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