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?