Skip to content

Clickable bar chart

paradoxon82 edited this page Jun 22, 2015 · 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