使用GoogleVisualr创建图表
我有一个示例应用程序，用于试用GoogleVisualr
我正在尝试创建一个折线图，其中x轴为日期时间，y轴为等级。 因此，基于“created_at”和评级的评级图表的时间序列。
我的控制器：
Product.all.each do |p| data_table = GoogleVisualr::DataTable.new data_table.new_column('datetime', 'Date') data_table.new_column('number', 'Rating') data_table.add_rows([ [p.created_at, p.rating] ]) opts = { :width => 800, :height => 480, :title => 'Graph of Ratings overtime', :legend => 'bottom' } @chart = GoogleVisualr::Interactive::LineChart.new(data_table, opts) 数据：
+----+---------------------------------------------------------------+--------+-------------------------+-------------------------+ | id | title | rating | created_at | updated_at | +----+---------------------------------------------------------------+--------+-------------------------+-------------------------+ | 37 | Abbess or Abbot | 2 | 2013-04-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 38 | Admiral of the Fleet | 2 | 2013-04-15 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 39 | Aesymnetes | 2 | 2013-04-17 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 40 | Agonothetes | 2 | 2013-03-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 41 | Agoranomos | 2 | 2013-03-19 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 42 | Air Marshal | 3 | 2013-01-20 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 43 | Aircraftman | 2 | 2013-02-22 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 44 | Akhoond | 2 | 2013-01-13 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 45 | Allamah | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 46 | Amban | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 47 | Amir al-Mu'minin | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 48 | Amphipole | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 49 | Anax | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 50 | Apodektai | 1 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 51 | Apostle | 1 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 52 | Arahant | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 53 | Archbishop | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 54 | Archdeacon | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 55 | Archduchess or Archduke | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 56 | Archimandrite | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 57 | Archon | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 58 | Archpriest | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 59 | Argbadh | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 60 | Arhat | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 61 | Asapatish | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 62 | Aspet | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 63 | Assistant in Virtue | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 64 | Assistant Professor | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 65 | Assistant to the President & Deputy National Security Advisor | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 66 | Associate Professor | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 67 | Aswaran Salar | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 68 | Augusta | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 69 | Ayatollah | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 70 | Baivarapatish | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 71 | Bapu | 3 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | | 72 | Baron or Baroness | 2 | 2013-05-14 17:12:42 UTC | 2013-05-14 17:12:42 UTC | +----+---------------------------------------------------------------+--------+-------------------------+-------------------------+
正在生成的JavaScript：
google.load('visualization','1', {packages: ['corechart'], callback: function() { var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Date"});data_table.addColumn({"type":"number","label":"Rating"});data_table.addRow([{v: "05/14"}, {v: 4}]); var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data_table, {width: 800, height: 480, title: "Graph of Ratings overtime", legend: "bottom"}); }});
输出：
您正在为每个产品创建一个新的DataTable 。 相反，您应该创建一个DataTable ，在迭代每个产品时添加行。
data_table = GoogleVisualr::DataTable.new data_table.new_column('datetime', 'Date') data_table.new_column('number', 'Rating') Product.all.each do |p| data_table.add_row([p.created_at, p.rating]) end opts = { :width => 800, :height => 480, :title => 'Graph of Ratings overtime', :legend => 'bottom' } @chart = GoogleVisualr::Interactive::LineChart.new(data_table, opts)