lazy_high_charts user guide - xiaods/lazy_high_charts GitHub Wiki
@h = LazyHighCharts::HighChart.new('graph') do |f|
f.options[:chart][:defaultSeriesType] = "area"
f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
end
Without overriding entire option , (only change a specific option index):
@h = LazyHighCharts::HighChart.new('graph') do |f|
#.....
f.options[:chart][:defaultSeriesType] = "area"
f.options[:chart][:inverted] = true
f.options[:legend][:layout] = "horizontal"
f.options[:xAxis][:categories] = ["uno" ,"dos" , "tres" , "cuatro"]
#......
Overriding entire option:
@h = LazyHighCharts::HighChart.new('graph') do |f|
#.....
f.xAxis(:categories => @days.reverse! , :labels=>{:rotation=>-45 , :align => 'right'})
f.chart({:defaultSeriesType=>"spline" , :renderTo => "myRenderArea" , :inverted => true})
#.....
If you want to use this syntax and still be able to build option step-by-step without overriding:
@h = LazyHighCharts::HighChart.new('graph') do |f|
#.....
f.xAxis!(:categories => @days.reverse! , :labels=>{:rotation=>-45 , :align => 'right'})
f.chart!({:defaultSeriesType=>"spline" , :renderTo => "myRenderArea" , :inverted => true})
#.....
Using the datetime axis type:
@h = LazyHighCharts::HighChart.new('graph', style: '') do |f|
f.options[:chart][:defaultSeriesType] = "area"
f.options[:plotOptions] = {areaspline: {pointInterval: 1.day, pointStart: 10.days.ago}}
f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9])
f.xAxis(type: :datetime)
end
A datetime axis example
Usage in layout:
<%= javascript_include_tag :highcharts %>
Usage in view:
<%= high_chart("my_id", @h) %>
You can pass in additional javascript into to the view with a block, this will be executed before the high chart is called
<%= high_chart("my_id", @h) do |c| %>
alert('hello')
<%end %>
To include javascript function calls or callbacks you can use the js_code method on your string"function".js_code:
f.options[:plotOptions] = {
:column => { :events => { :click => %|function() { window.location = "http://www.highcharts.com" }|.js_code } }
}
Just call HighChart Helper this way:
<%= high_stock("my_id", @h) %>