更新日: 2014年4月4日
Rails

Rails で Chartkick を使ってグラフ描画

Rails アプリケーションでグラフを描画するために、Chartkick を使ってみました。Chartkick は、Ruby, Python, pure JavaScript で利用できる美しいグラフを作成するためのライブラリ。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

gem ‘chartkick’ を書いて bundle install

いつもどおり、Gemfile に chartkick を追加して bundle install。


$ vi Gemfile
gem 'chartkick'
$ bundle install

$ vi Gemfile

gem 'chartkick'

$ bundle install

Chartkick の使い方

グラフを描くビューで google の jsapi をインクルードします。Chartkick が依存しています。

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

1	<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

使う場所が多ければ、views/layouts/application.html.erb の html header 部に書いても良いかも。

評判通り、ビューのコードは本当に1行だけで動きます。折れ線グラフを描画するコードの例です。

<%= line_chart @graph_data %>

1	<%= line_chart @graph_data %>

line_chart　折れ線グラフ
pie_chart　円グラフ
column_chart　棒グラフ（縦）
bar_chart　棒グラフ（横）
area_chart　エリアグラフ

描画グラフ用のメソッドは以上が用意されています。

渡すデータ（上述の @graph_data）は “キー名” => “値” のハッシュか [“キー名”, “値”] の配列で指定する。

<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<%= pie_chart [["Football", 10], ["Basketball", 5]] %>

1 2	<%= pie_chart({"Football" => 10, "Basketball" => 5}) %> <%= pie_chart [["Football", 10], ["Basketball", 5]] %>

拍子抜けするほど簡単ににグラフを出力できました。出力されるグラフも綺麗です。このエントリーの例程度であれば5分でできますので、ぜひお試しください！

– 参考リンク –
Ruby on Rails で使えるグラフ・チャート用ライブラリまとめ | EasyRamble
File: README — Documentation for chartkick (1.2.1)

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング