Javascript 谷歌图表API与Ruby on Rails_Javascript_Ruby On Rails_Graph_Google Visualization

Javascript 谷歌图表API与Ruby on Rails

javascript ruby-on-rails graph google-visualization

Javascript 谷歌图表API与Ruby on Rails,javascript,ruby-on-rails,graph,google-visualization,Javascript,Ruby On Rails,Graph,Google Visualization,我想绘制如下所示的时间序列数据 timestamp, temperature 12-12-2013 05:05:05, 25.569 12-12-2013 05:05:10, 25.570 12-12-2013 05:05:15, 26.000 我知道我可以用javascript创建一个图表，只需将其放入视图中： <head> <script type="text/javascript" src="https://www.google.com/

我想绘制如下所示的时间序列数据

   timestamp, temperature
   12-12-2013 05:05:05, 25.569
   12-12-2013 05:05:10, 25.570
   12-12-2013 05:05:15, 26.000

我知道我可以用javascript创建一个图表，只需将其放入视图中：

<head>
    <script type="text/javascript" src="https://www.google.com/jsapi" ></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
     var data = google.visualization.arrayToDataTable([
    ['t', 'temperature', 'data'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
   </script>
</head>

我是否需要将时间转换为epoch时间以绘制其顺序，以及如何在上述javascript中插入ruby声明的变量？还是我做错了什么

谢谢您，非常感谢您的帮助。

回答您的第二个问题，即如何在javascript中输入此变量是使用gon gem。基本上，它所做的是为javascript在窗口名称空间中创建一个名为gon的变量。事实上，您可以通过在视图文件的脚本标记中创建自己的全局变量并在其中调用生成此数组的帮助器来避免此gem。但Gon是一种简洁的方式，因此我更喜欢它

当我解决这个问题时，我在日期方面遇到了一些问题，现在记不清具体是什么了。但我已经从ruby发送了类似字符串的日期

date_for_js = "#{year}, #{month-1}, #{day}"

数据如下：

points_by_dates << [date_for_js, user.points.to_i]

points\u by\u dates方法不支持日期，因此必须使用常规数据表构造函数：
var data = new google.visualization.DataTable();
data.addColumn('date', 't');
data.addColumn('number', 'temperature');
data.addColumn('number', 'data');
data.addRows(/* output from Ruby */);

您的时间戳需要作为javascript日期对象输出。您可以通过使用Unix历元时间或将时间戳拆分为年、月、日、小时、分钟、秒来实现这一点。使用Unix历元时间的格式为：
new Date(/* Unix epoch time */);

年/月/日的格式为：
new Date(year, month, day, hour, minute, second);

其中月份为0指数，所以一月为0，二月为1…十二月为11
new Date(/* Unix epoch time */);

new Date(year, month, day, hour, minute, second);