Chartkick + Railsで簡単にグラフを出力！

Ruby
アドウェイズエンジニアのイシマルです。

前回の記事は5月でしたので、4ヶ月ぶりぐらいになります。

5月の時点では研修中だった2013年新卒も、各ユニットに配属され、業務で活躍しており素晴らしいですね。 
私も日々新しいことをどんどんとりいれて、業務に活かしていこうと思います。 

では、今日の本題、 「Chartkick + Railsで簡単にグラフを出力！」に入りたいと思います。

■必要な環境

Ruby on Rails(推奨)
※Railsが無くても、chartkick.jsとgoogleのjsapiを読み込めば可能です。
 

■Chartkickで書けるグラフ

以下の4つのグラフが書けます。

●棒グラフ(column chart)
●折れ線グラフ (line chart)
 ●エリアグラフ (area chart)
●円グラフ (pie chart)


■Chartkickのインストール(Rails)

gemを追加するだけです。簡単ですね。 
$ cd [Rails.root]
$ vi Gemfile
 gem 'chartkick'
$ bundle install


■グラフの書き方

sample.html.erbのcontent_forで、GoogleのJS APIを読み込みます。

<% content_for :head do %>
  <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<% end %>
※上記は、layoutsの共通ファイルに、yieldでheadを記載できるようにした例です。
※参考 
$ vi app/views/layouts/application.html.erb
  <head>
    ・・・
    <%= yield :head %>
  </head>

あとは、sample.html.erbファイルで以下のように書くだけです。

<%= column_chart @graph_data %>
※上記は、棒グラフ(縦)の例です。
　棒グラフ(横)、折れ線グラフ、円グラフ、エリアグラフは、column_chartのところをそれぞれ、
　bar_chart、line_chart、pie_chart、area_chart
　にすればそれぞれ出力されます。

@graph_dataは、ロジック側で以下のような形式で作成します。

[[201305, 9283492], [201306, 4095925], [201307, 11042345]]

このように書くと、ChartKickが以下のようなHTMLを勝手に生成してくれて、勝手にgoogle　APIを叩いてグラフを表示してくれます。APIって中身を知らなくてもよいので便利で良いですね。 
<div id="chart-1" style="height: 300px; ･･･(省略)">
  Loading...
</div>
<script type="text/javascript">
  new Chartkick.ColumnChart("chart-1", [[201305,9283492],[201306,4095925],[201307,11042345]], {});
</script>

■出力結果

以下のようにグラフが出力されます。
area_chart
bar_chart
column_chart
line_chart
pie_chart

■複数の値をグラフに表示したい場合

以下のような複数の値を比較したグラフを表示したい場合
multi_line_chart
●コード

以下のようにコードを記載します。 
<%= line_chart @output.each do |mau|
  {:name => mau.name, :data => mau.data}
end %>

●データ

以下のようなデータを作成します。 
[
 {"name"=>"サンプルＰＪ", "data"=>[[201305, 9283492], [201306, 4095925], [201307, 11042345],]},
 {"name"=>"サンプルＰＪ２", "data"=>[[201305, 3283452], [201306, 15283452], [201307, 11283452]]}
]


■オプション

背景の色を変えたり、横軸にタイトルを入れたりと、様々なオプションを入れることができます。

<%= line_chart @graph_data,
  :library => {
    :hAxis => {:title => "年月", :type => "string", :baselineColor => "black"}, 
    :curveType => "none", 
    :backgroundColor => "#ccffff"
  } 
%>

line_chart_option
詳しくは、Google Chartのマニュアルで！

Chartkickのgithubはこちらです。