How to use lazy_high_charts in Iruby notebook

[Shekhar Prasad Rajak]

I want to see plots in IRuby notebook.

When I do

chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.title({ :text=>"Combination chart"})
      f.options[:xAxis][:categories] = ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      f.labels(:items=>[:html=>"Total fruit consumption", :style=>{:left=>"40px", :top=>"8px", :color=>"black"} ])
      f.series(:type=> 'column',:name=> 'Jane',:data=> [3, 2, 1, 3, 4])
      f.series(:type=> 'column',:name=> 'John',:data=> [2, 3, 5, 7, 6])
      f.series(:type=> 'column', :name=> 'Joe',:data=> [4, 3, 3, 9, 0])
      f.series(:type=> 'spline',:name=> 'Average', :data=> [3, 2.67, 3, 6.33, 3.33])
      f.series(:type=> 'pie',:name=> 'Total consumption',
        :data=> [
          {:name=> 'Jane', :y=> 13, :color=> 'red'},
          {:name=> 'John', :y=> 23,:color=> 'green'},
          {:name=> 'Joe', :y=> 19,:color=> 'blue'}
        ],
        :center=> [100, 80], :size=> 100, :showInLegend=> false)
    end

I get this

#<LazyHighCharts::HighChart:0x007fc201ca9570 @series_data=[{:type=>"column", :name=>"Jane", :data=>[3, 2, 1, 3, 4]}, {:type=>"column", :name=>"John", :data=>[2, 3, 5, 7, 6]}, {:type=>"column", :name=>"Joe", :data=>[4, 3, 3, 9, 0]}, {:type=>"spline", :name=>"Average", :data=>[3, 2.67, 3, 6.33, 3.33]}, {:type=>"pie", :name=>"Total consumption", :data=>[{:name=>"Jane", :y=>13, :color=>"red"}, {:name=>"John", :y=>23, :color=>"green"}, {:name=>"Joe", :y=>19, :color=>"blue"}], :center=>[100, 80], :size=>100, :showInLegend=>false}], @options={:title=>{:text=>"Combination chart"}, :legend=>{:layout=>"vertical", :style=>{}}, :xAxis=>{:categories=>["Apples", "Oranges", "Pears", "Bananas", "Plums"]}, :yAxis=>{:title=>{:text=>nil}, :labels=>{}}, :tooltip=>{:enabled=>true}, :credits=>{:enabled=>false}, :plotOptions=>{:areaspline=>{}}, :chart=>{:defaultSeriesType=>"line", :renderTo=>nil}, :subtitle=>{}, :labels=>{:items=>[{:html=>"Total fruit consumption", :style=>{:left=>"40px", :top=>"8px", :color=>"black"}}]}}, @html_options={}, @placeholder="graph">

But I want to see the chart instead. What should I do for display charts ?

[Shekhar Prasad Rajak]

Ping @michelson

[Miguel Michelson Martinez]

Hi @Shekharrajak, I've never used IRuby , but I believe that the output is just "stringyfing" the object, that's why you are getting that.

You have to use the view helper in order to output the proper content, using high_chart("my_id", @chart)

take a look at the dummy apps , https://github.com/michelson/lazy_high_charts/blob/master/spec/dummy_nanoc/lib/default.rb

cheers!

[Shekhar Prasad Rajak]

Thanks @michelson for sharing the link. high_chart returns the script and div part for the webpage, but I think there is need of dependent script means these scripts :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<!-- for 3d plotting -->
<script src="https://code.highcharts.com/highcharts-3d.js"> <script>
<script src="https://code.highcharts.com/modules/exporting.js"> </script>

to view the chart.

[Miguel Michelson Martinez]

Hi @Shekharrajak , Yes it does!

check the layout file in the nanoc dummy app, it has the following scripts in order for the HC script to work

do you need more help ? should we close this ?

[Shekhar Prasad Rajak]

@michelson , I see dummy app and usage of high_chart and tried in IRuby notebook. I tried IRuby.display high_chart("some_id", chart), mime: 'text/html' which returns nothing.

I think, when we require the gem in iruby notebook , it must load the dependent scripts/js files that will be used in high_chart generated html code to display the charts in notebook.