Highcharts with Rails

3.8k views Asked by At

I'm trying to use the Lazy High Charts gem, but not having luck displaying the chart. The Javascript that is generated looks correct, but for some reason the chart isn't displaying in the div.

Here's the JS that is generated in the browser:

    <script type="text/javascript">
            (function() {
              var onload = window.onload;
              window.onload = function(){
                if (typeof onload == "function") onload();
                        var options = { "title": { "text": "Population vs GDP For 5 Big Countries [2009]" },"legend": { "align": "right","verticalAlign": "top","y": 75,"x": -50,"layout": "vertical" },"xAxis": { "categories": [ "United States","Japan","China","Germany","France" ] },"yAxis": [ { "title": { "text": "GDP in Billions","margin": 70 } },{ "title": { "text": "Population in Millions" },"opposite": true } ],"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "column","renderTo": "orders_chart" },"subtitle": {  },"series": [{ "name": "GDP in Billions","yAxis": 0,"data": [ 14119,5068,4985,3339,2656 ] },{ "name": "Population in Millions","yAxis": 1,"data": [ 310,127,1340,81,65 ] }] };

            window.chart_orders_chart = new Highcharts.Chart(options);

              };
            })()
    </script>
<div id="orders_chart"></div>

Here's what is in the view:

<%= high_chart("orders_chart", @chart) %>

Here's the controller code:

def graph_orders

    @chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.title(:text => "Population vs GDP For 5 Big Countries [2009]")
      f.xAxis(:categories => ["United States", "Japan", "China", "Germany", "France"])
      f.series(:name => "GDP in Billions", :yAxis => 0, :data => [14119, 5068, 4985, 3339, 2656])
      f.series(:name => "Population in Millions", :yAxis => 1, :data => [310, 127, 1340, 81, 65])

      f.yAxis [
        {:title => {:text => "GDP in Billions", :margin => 70} },
        {:title => {:text => "Population in Millions"}, :opposite => true},
      ]

      f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
      f.chart({:defaultSeriesType=>"column"})
    end

end

Here's what is in the application layout:

    <!DOCTYPE html>
<html>
<head>
  <title>Lono Orders</title>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style media="screen" type="text/css">

    #orders_chart{
        width: 700px;
        height: 500px;
    }

  </style>
<body>

    <%= yield %>

</body>
</html>

Here's what my application.js looks like:

//= require highcharts
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Any thoughts?

1

There are 1 answers

0
engineersmnky On BEST ANSWER

Try changing this

//= require highcharts
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

To

//= require jquery
//= require jquery_ujs
//= require highcharts/highcharts
//= require turbolinks
//= require_tree .

You need to require jQuery first otherwise highcharts will not work correctly as the extensions cannot be defined because $ is undefinded. Also when I include highcharts in my js it is highcharts/highcharts and I am using it in 3 different applciations right now without issue.