2012-08-06 81 views
0

你好我想在我的应用程序中使用highcharts ......对于我之后的highcharts episode剧本的作品,但我想把我得到这个真实的数据: enter image description herehighcharts与轨道

我已经照着所有的步骤,但这里是我的模型:

class TankingLog < ActiveRecord::Base 
belongs_to :gas_station 
belongs_to :car 
attr_accessible :car_id, :cost, :date, :gallon, :gas_station_id, :km 
validates_presence_of :cost, :date,:gallon,:km 
validates_numericality_of :cost, :gallon 
validates_numericality_of :km #:only_integer 
def self.total_on(date) 
    where("date(date) = ?",date).sum(:cost) 
end 
end 

这里是我html.erb:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
     body { 
     padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
    <h1>Listing Tankings</h1> 
    <% if @tankinglog.count<1 %> 
    <p> 
    There are no tankings for this car. Do you want to <%= link_to 'create a new tanking', new_user_car_tanking_log_path(@user, @car)%> 
    </p> 
    <% else %> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
     new Highcharts.Chart({ 
     chart: { renderTo: 'foo_chart' }, 
     title: { text: 'Tankings by Day' }, 
     xAxis: { type: 'datetime' }, 
     yAxis: { 
     title: { text: 'Cost' } 
    }, 
     series: [{ 
     pointInterval: <%= 1.day * 1000 %>, 
     pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>, 
     data: [data: <%= (1.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %>] 
     }] 
     }); 
    }); 
    </script> 
    <div id="foo_chart" style="width: 560px; height: 300px;"></div> 

    <table class="table table-condensed"> 
     <tr> 
     <th>Cost</th> 
     <th>Gallon</th> 
     <th>Km</th> 
     <th>Date</th> 
     <th>Gas Station's id</th> 
     <th></th> 
     </tr> 
     <% for tankinglog in @tankinglog %> 
     <tr> 
      <td><%= number_to_currency (tankinglog.cost) %></td> 
      <td><%= tankinglog.gallon %></td> 
      <td><%= tankinglog.km %></td> 
      <td><%= tankinglog.date %></td> 
      <td><%= tankinglog.gas_station_id %></td> 
     </tr> 
     <% end %> 
    </table> 
    <br /> 
    <%= link_to 'New tanking', new_user_car_tanking_log_path(@user, @car), :class => "btn btn-primary" %> 
    <% end %> 
    <br /> 
    <br /> 
    <%= link_to 'back', user_cars_path(current_user), :class => "btn btn-primary" %> 
    </div> <!-- /container --> 
</body> 

感谢您的帮助

也在这里是我的脚本显示: enter image description here

回答

1

你有它正试图呈现到foo_chart DIV?在包含highcharts'js之前,您是否包含了jQuery的js?浏览器的“控制台”的内容是什么?控制台是否有任何js错误?你可以分享生成的HTML,因为文字不是图像?

如何从控制台错误(铬) enter image description here

点击行号将带你到那里JS爆发

+0

是的,我有div – Asantoya17 2012-08-06 17:50:43

+0

雅,看到您的脚本,主要是看图像,所以错过了它的第一次。控制台数据将是最好的帮助 – 2012-08-06 17:52:18

+0

我如何使用控制台数据? – Asantoya17 2012-08-06 18:24:16

0

是我的错的确切地点,我有一个语法错误,这是:

series: [{ 
     pointInterval: <%= 1.day * 1000 %>, 
     pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>, 
     data: <%= (0.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %> 
     }] 

isntead

series: [{ 
    pointInterval: <%= 1.day * 1000 %>, 
    pointStart: <%= 0.weeks.ago.at_midnight.to_i * 1000 %>, 
    data: [data: <%= (1.weeks.ago.to_date..Date.today).map { |date| TankingLog.total_on(date).to_f}.inspect %>] 
    }] 

感谢您的帮助