Skip to content

Clickable bar chart

takiy33 edited this page May 8, 2016 · 13 revisions

##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.plotOptions(series: {
    :cursor => 'pointer', 
    :point => {:events => {:click => "click_function"} } 
  }
end

##View

<%= high_chart("my_id4", @graph) do |c| %>
  <%=raw "options.plotOptions.series.point.events.click = function() { location.href='http://www.hotmail.com'; }" %>
<% end %>
Clone this wiki locally