1

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"});
  }});

出力：

出力：

4

1 に答える 1

2

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)
于 2013-05-14T21:12:12.127 に答える