Highcharts with Rails

Question

Highcharts with Rails

3.8k views Asked by dougiebuckets At 24 November 2024 at 05:09

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?

Original Q&A

There are 1 answers

**engineersmnky** · Accepted Answer · 2014-06-04 13:14:17

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.

TechQA.

Highcharts with Rails

There are 1 answers

Related Questions in RUBY

Related Questions in HIGHCHARTS

Related Questions in LAZY-HIGH-CHARTS

Popular Questions

Popular Tags

Trending Questions