Skip to content

Clickable bar chart

theophoric edited this page May 12, 2012 · 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 = 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 %>
Clone this wiki locally