Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReferenceError: HighCharts is not defined

I'm rendering a chart using highstocks on my rails application on a index.html.erb file, however when I try to load the chart, I get the following error on the firebug console,

ReferenceError: HighCharts is not defined
new HighCharts.Chart({

My index.html.erb file is as follows

<div id="quotes_chart", style="width=560px; height:300px;">
<script>
 $(function(){   
 new HighCharts.Chart({
  chart : {
   renderTo: "quotes_chart"
  },
  title : {
   text: "Daily trades" 
  },
  xAxis : {
    type: "datetime"
  },
  yAxis : {
    title: {
     text: "Shillings"
   }
  },
  tooltip : {
    formatter: function(){
      return HighCharts.dateFormat("%B %e, %Y", this.x) + ': ' + "Kshs" + Highcharts.numberFormat(this.y, 2);
    }
  },
  series: [
    <% { "Telecommunication" => StockQuote.telecomm, "Agriculture" => StockQuote.agric }.each do |name, prices|
%>
{
  name: <%= name %>,
  pointInterval: <%= 1.day * 1000 %>,
  pointStart: <%= 2.weeks.ago.to_i * 1000 %>,
  data: <%= (2.weeks.ago.to_date..Date.today).map { |date| StockQuote.price_on(date).to_f}.inspect%>
},
<% end %>
]
});
});
</script>
</div>

In my application.html.erb is as follows:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="components/highstock/highstock.js"></script>
 <%= javascript_include_tag "jquery-1.11.0.min", "highcharts" %>

In my app assests/javascripts folder I have both the jquery-1.11.0.min.js and highcharts.js files as downloaded from highcharts.com

What might I be doing wrong?

like image 993
Mutuma Avatar asked May 06 '14 23:05

Mutuma


1 Answers

var chart=null;
$(document).ready(function() {
    chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'bar'
                    },
                    title: {
                        text: '${model.title}'
                    }
...                        

Set the chart to null because this error can occur due to multiple declaration that you may not be aware of. Assumption is all imports are correct

like image 130
gilberto Nd Avatar answered Oct 16 '22 08:10

gilberto Nd