How to use lazy_high_charts in Iruby notebook

[Shekharrajak]

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 ?

[Shekharrajak]

Ping @michelson

[michelson]

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!

[Shekharrajak]

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.

[michelson]

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 ?

[Shekharrajak]

@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.