Search code examples
jqueryhighchartsrubymine

Highcharts implementation in RubyMine 3.1


I want to implement highcharts in ruby on rails. But there's some runtime problem with rails.js

Error : Event.Handler.Prototype is null or not an object in rails.js

Here is the Controller :

class LineChartController < ApplicationController
  def index
      chart_data = [{
            :name  => 'Expense',
            :data  => [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            :name  => 'Savings',
            :data  => [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    tooltip_formatter = '
  function() {return "<b>"+ this.series.name +"</b><br/>"+this.x +":"+ this.y +"\u00B0C";}'

@chart =  Highchart.new({
  :chart => {
            :renderTo => "container",
            :marginRight =>  130,
            :marginBottom => 25,
    #:defaultSeriesType=> "line"
        },
        :title => {
            :text => "Monthly Average Expenses",
            :x => -20
        },
        :subtitle => {
            :text => 'Source: Sample Application',
            :x => -20
        },
        :x_axis => {
            :categories => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        :y_axis => {
            :title => {
                :text => "Rs. (in 1000's)"
            },
          :plotLines => [{
                :value => 0,
                :width => 1,
                :color => '#808080'
            }]
        },
        :tooltip => {
            :formatter => tooltip_formatter
        },
        :legend => {
            :layout=> 'vertical',
            :align=> 'right',
            :verticalAlign=> 'top',
            :x=> -10,
            :y=> 100,
            :borderWidth=> 0
        },
        :series => chart_data

  })
  end
end

application.html

<head>
  <title>Graphs</title>
  <%= stylesheet_link_tag :all %>
 <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "highcharts" %>

  <%= csrf_meta_tag %>
</head>
<body>

<%= yield %>

<script type="text/javascript">
            $(document).ready(function() {

                <%= @chart %>
                <%= yield :javascript %>
            });
        </script>

</body>

Q : where am i going wrong? any suggestions?


Solution

  • You have to use rails.js for jQuery (rails.js. The one you use is default compatible with Prototype.