Clickable bar chart - xiaods/lazy_high_charts GitHub Wiki
##Purpose## This chart creates a bar chart and when the user clicks on any of the bars, they are redirected to another site. Obiviously, the JS function could do anything and could treat each bar differently.
##Controller##
@graph = LazyHighCharts::HighChart.new('column') do |f|
f.series(:name=>'Correct',:data=> [1, 2, 3, 4, 5])
f.series(:name=>'Incorrect',:data=> [10, 2, 3, 1, 4] )
f.title({ :text=>"clickable bar chart"})
f.legend({:align => 'right',
:x => -100,
:verticalAlign=>'top',
:y=>20,
:floating=>"true",
:backgroundColor=>'#FFFFFF',
:borderColor=>'#CCC',
:borderWidth=>1,
:shadow=>"false"
})
f.options[:chart][:defaultSeriesType] = "column"
f.options[:xAxis] = {:plot_bands => "none", :title=>{:text=>"Time"}, :categories => ["1.1.2011", "2.1.2011", "3.1.2011", "4.1.2011", "5.1.2011"]}
f.options[:yAxis][:title] = {:text=>"Answers"}
f.options[:plot_options][:column] = {:stacking=>'normal',
:cursor => 'pointer',
:point => {:events => {:click => js_function}}
}
end
##View##
<%= high_chart("my_id4", @graph) do |c| %>
<%= "options.plotOptions.column.point.events.click = function() { location.href='http://www.hotmail.com'; }" %>
<%= "options.tooltip.formatter = function() {return this.series.name +': '+ this.y +' Total: '+ this.point.stackTotal;}" %>
<% end %>