使用GoogleVisualr创建图表 [英] Creating charts with GoogleVisualr
本文介绍了使用GoogleVisualr创建图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个示例应用程序来试用GoogleVisualr
I have a sample app created to try out GoogleVisualr
我正在尝试创建一个折线图，其中x轴为日期时间，y轴为等级.因此，基于"created_at"和收视率的收视率图表按时间序列排列.
I am trying to create a line chart with datetime on the x-axis and ratings on the y-axis. So a time series of chart of ratings based on the "created_at" and ratings.
我的控制器:
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:
JavaScript being generated:
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，并在每个产品上进行迭代时向其中添加行.
You're creating a new DataTable for every product. Instead, you should create one DataTable that you add rows to as you iterate over each product.
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)
这篇关于使用GoogleVisualr创建图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
