谷歌图表API与Ruby on Rails

Google Charts API with Ruby on Rails

本文关键字：Ruby on Rails API 谷歌      更新时间：2024-04-26

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

   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>

我的ruby数组看起来像这样，类似于上面代码中的格式：

  [['timestamp', 'temperature'], [12-12-2013 05:05:05, 25.569], [12-12-2013 05:05:10, 25.570]
   ... and so on]

我需要将时间转换为epoch时间来按顺序绘制图形吗？我如何在上面的javascript中插入ruby声明的变量？还是我在这里做错了什么？

谢谢你，任何帮助都将不胜感激。

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

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

并将数据作为

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

然后我创建了.html.erb文件

<%= javascript_tag do %>
    google.load('visualization', '1.0', {'packages':['corechart'], 'language': '<%= @locale.code %>'});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
            var progress_chart_data = new google.visualization.DataTable();
            progress_chart_data.addColumn('date', '<%=j t(".date") %>');
          progress_chart_data.addColumn('number', '<%=j t(".points") %>');
            var progress_ticks = [];
            <% @points_by_dates.each_with_index do |points_by_date, index| %>
                progress_chart_data.addRow([new Date(<%= points_by_date[0] %>), <%= points_by_date[1] %>]);
                progress_ticks[<%= index %>] = new Date(<%= points_by_date[0] %>);
            <% end %>
            var date_format = 'MMM yyyy';
            var progress_chart_options = {
                legend: {position: 'out'},
                axisTitlesPosition: 'out',
                width: '800px',
              height: '300',
              hAxis: {format: date_format, ticks: progress_ticks},
                colors: ['#63c6d9'],
                vAxis: {minValue: 0},
                chartArea: {left: 90, top: 10}
            };
            var formatter = new google.visualization.DateFormat({pattern: date_format});
        formatter.format(progress_chart_data, 0); // Apply formatter to first column
        <% if @points_by_dates.present? %>
                var progress_chart = new google.visualization.AreaChart(document.getElementById('progress_chart'));
            progress_chart.draw(progress_chart_data, progress_chart_options);
        <% end %>
    };
<% end -%>

在记号选项中定义日期。

希望这对你有用。

第二个问题的答案，即如何在javascript中输入此变量是使用gon gemhttps://github.com/gazay/gon.基本上，它所做的是在窗口名称空间中为javascript创建一个名为gon的变量。事实上，您可以通过在视图文件的脚本标记中创建自己的全局变量并调用在那里生成此数组的助手来避免这个gem。但Gon是一种巧妙的方式，因此我更喜欢

arrayToDataTable方法不支持日期，因此必须使用常规DataTable构造函数：

var data = new google.visualization.DataTable();
data.addColumn('date', 't');
data.addColumn('number', 'temperature');
data.addColumn('number', 'data');
data.addRows(/* output from Ruby */);

您的时间戳需要作为JavaScriptDate对象输出。您可以使用Unix epoch时间，也可以将时间戳划分为年、月、日、小时、分钟和秒。使用Unix epoch时间的格式为：

new Date(/* Unix epoch time */);

年/月/日的格式为：

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

其中月份是0索引，所以一月是0，二月是1…十二月是11。

相关文章：