読者です 読者をやめる 読者になる 読者になる

Google Chart Toolsを使ってグラフ表示する実装

Rails3.1でグラフ表示するgemを探しましたが、あまりメンテナンスされてなさそうだったので
Google Code PlaygroundのサンプルコードをHelperクラスに実装して、必要な部分だけ設定するような形にしてみました。


Source: 参考にしたサンプル
Google Code Playground


今回は、例として家計簿データを扱うモデル(Kakeibo)をカテゴリ毎(category_id)に集計して、
棒グラフを表示してみました。


app/views/layouts/application.html.erb

<script type="text/javascript" src="http://www.google.com/jsapi"></script> # 追加


app/views/xxx/xxx.html.haml

# viewの実装はシンプルに一行だけ、コントローラで設定した検索結果(モデルの配列)と
# グラフのタイトルを引数で指定しています。
= bar_chart_by_category(@results, :title => 'カテゴリ別') # @resultsはコントローラで設定しています


app/helpers/xxx_helper.rb

  def bar_chart_by_category(results, options={:title => 'bar chart'})
  # 引数で渡されたモデルの配列をカテゴリでグルーピングして
  # 合計値を算出して、カテゴリ名を取得しています。
    labels, data = [], []
    results.group_by(&:category_id).each do |id, result|
      next if id.nil?
      data << result.sum(&:value)
      labels << "#{Category.find(id).name}"
    end

  # サンプルコードをコピペして、labels, data, titleを設定しているだけです。
    html = javascript_tag  <<"EOS"
     google.load('visualization', '1');
     function drawVisualization() {
     var wrapper = new google.visualization.ChartWrapper({
     chartType: 'ColumnChart',
     dataTable: [#{labels}, #{data}],
     options: {
     'title': '#{options[:title]}'
     },
     containerId: 'category'
     });
     wrapper.draw();
     }
     google.setOnLoadCallback(drawVisualization);
EOS
    html << content_tag(:div, '', {:id => 'category', :style => "width: 600px; height: 400px;"})
  end


表示されたグラフは、日本語も普通にOKで結構いい感じ。
同じ要領で他の種類のグラフも簡単に表示できそう...
f:id:t-taira:20110626222247p:image