もた日記

くだらないことを真面目にやる

トップ > Ruby on Rails > Railsメモ(29) : Chartkickで簡単にグラフを描画する

Railsメモ(29) : Chartkickで簡単にグラフを描画する

Ruby on Rails

Railsで簡単にグラフを描画してみたいのでgemを調べてみたところ下記gemがヒットした。Highcharts, Google Charts, Gruffといったライブラリが使えるらしい。

gemとしてはどれが人気なのかGitHubのスター数などを確認したところ、chartkickが人気のようだ。どうやらchartkickはGoogle ChartsとHighchartsの両方に対応しているらしい。

名前 Watch Star Fork
chartkick 96 3131 292
lazy_high_charts 32 868 183
gruff 28 740 148
googlecharts 15 676 107
highcharts-rails 7 147 30


Chartkickのインストール

github.com

Chartkickでどんなグラフを描画できるかは下記リンクで確認できる。

Gemfileに下記行を追加してbundle installする。

gem "chartkick"

次に、JavaScriptをインクルードするために下記行を追加する。今回はapp/views/layouts/application.html.erbのheadタグ内に追加した。
これはGoogle Chartsを利用するためのタグだが、Highchartsを使用する場合は別の記述なので後で試してみる。

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


Chartkickの使い方

Chartkickで利用可能なグラフの種類は以下の通り。

  • Line chart
  • Pie chart
  • Column chart
  • Bar chart
  • Area chart
  • Geo chart
  • Timeline
  • Multiple series

手始めに、動作確認としてデータを直接ビューファイルに記述してみる。以下のようにHashとArrayに対応しており、図のようなグラフが表示された。
最初にpie_chartのようなグラフの種類を指定して、次に表示するデータを渡せば簡単にグラフが描画できる。

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

f:id:wonder-wall:20150822215648p:plain

通常はDBからデータを取ってくるので、

<%= pie_chart @data %>

のようにコントローラーで取得したデータを表示したり、

<%= pie_chart Artist.limit(10).pluck(:name, :songs_count) %>

あるいはビューに直接記述しても動作する。

Chartkickのオプション

オプションの指定方法は上記リンクに説明があるが、グラフ個別のオプションについては以下のように指定する。

<%= line_chart data, id: "users-chart", height: "500px" %>
<%= line_chart data, min: 1000, max: 5000 %>
<%= line_chart data, colors: ["pink", "#999"] %>

全てのグラフに適用するオプションについてはconfig/initializers/chartkick.rbに

Chartkick.options = {
  height: "400px",
  colors: ["pink", "#999"]
}

のような形式で記述する。

Highcartsを使用する

Highcharts（商用の場合は有償らしい）を使用するためにはJavaScriptファイルが必要なので下記ページからダウンロードして自分で配置するか、

CDNにホストされたものを使用する。

使用するためにはhighchart.jsがあればよい。

<%#= javascript_include_tag '//www.google.com/jsapi', 'chartkick' %><
<%= javascript_include_tag '//code.highcharts.com/highcharts.js', 'chartkick' %><

これでグラフがHighchartsを使用したものに変わる。Highchartsはデフォルトでアニメーションが有効になっているようでグラフを表示するときに動きがあって面白い。

f:id:wonder-wall:20150822224616p:plain

group_by_day, group_by_week

ちなみに、READMEにgroup_by_dayやgroup_by_weekというメソッドがあったが、これは同じ作者によるgroupdateというgemをインストールすれば使用できるようになる。試してみようと思ったがSQLiteだとエラーになってしまった。どうやらサポートしているDBは PostgreSQLとMySQLだけらしい。残念。

[1] pry(main)> Song.group_by_day(:created_at).count
RuntimeError: Connection adapter not supported: SQLite
from /home/vagrant/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/groupdate-2.4.0/lib/groupdate/magic.rb:87:in `relation'

アスベル 密閉米びつ2kg ホワイト 7509

アスベル 密閉米びつ2kg ホワイト 7509