I have a rails app whereby I'm creating a highcharts line graph to compare stocks in 2 industries, Telecommunication and Agriculture while following this, ryan bates highstocks video.
The graph will be output in a view, index.html.erb of stock_quotes whereby the javascipt code for highcharts is as follows:
<div id="quotes_chart", style="width=560px; height:300px;">
$(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 %>]
});
});
</div>
The model stock_quote.rb is as follows:
scope :agric, where(category: "Agriculture")
scope :telecomm, where(category: "Telecommunication")
def self.price_on(date)
where("date(published_at) = ?", date).sum(:total_price)
end
This is what is being output on the stock_quotes div:
$(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: [ { name: Telecommunication pointInterval: 86400000, pointStart: 1398157330000, data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 554.0] }, { name: Agriculture pointInterval: 86400000, pointStart: 1398157330000, data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 554.0] }, ] }); });