ruby - Creating charts with GoogleVisualr -
i have sample app created try out googlevisualr
i trying create line chart datetime on x-axis , ratings on y-axis. time series of chart of ratings based on "created_at" , ratings.
my controller:
product.all.each |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) data:
+----+---------------------------------------------------------------+--------+-------------------------+-------------------------+ | 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 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 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 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"}); }}); output:
you're creating new datatable every product. instead, should create 1 datatable add rows iterate on each product.
data_table = googlevisualr::datatable.new data_table.new_column('datetime', 'date') data_table.new_column('number', 'rating') product.all.each |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)
Comments
Post a Comment