Geek Answers Handbook

ReferenceError: HighCharts not defined

I am drawing a diagram using highstocks in my rails application in the index.html.erb file, however, when I try to load the diagram, I get the following error in 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>

My application application.html.erb says the following:

  <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 application / javascripts folder, I have jquery-1.11.0.min.js and highcharts.js files when downloading from highcharts.com

What can i do wrong?

+6
source share
2 answers

You need to download Highcharts only once, and not twice, as you have. Therefore, I recommend using only:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="components/highstock/highstock.js"></script>

Because Highstock includes all Highcharts options. More secure, please take care of the correct paths to your files, because it looks like a problem only with it.

+2
source 
 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 a multiple ad that you may not know about. All import data is assumed to be correct.

+3
source

More articles:


All Articles