ども、@kimihomです。
今回は Rails でグラフの描画について。
大抵、グラフを描画するとなると、サーバーからデータをViewに渡して、そこからJavaScriptでデータをどんどん投入してようやく描画、という長いプロセスを踏む必要がある。Rails 側でデータをしっかり取って、そのままグラフ表示できたらViewのコードを書かなくてすみそうなものなのだが。
そんなことができてしまう Chartkick を紹介する。
Create beautiful Javascript charts with one line of Ruby
Chartkick
セットアップの方法はリンク先に全て書いてあるため、ここでは省略する。 bundle install して script タグをいれるだけだ。
Chartkick を使えば、DBで取ってきたデータをそのまま グラフ描画用のヘルパーに渡すことが可能だ。この Gem の利用には、goupdate というDate型で保存しているデータをそのままグルーピングしているライブラリの利用を推奨している。
これを使えば、View側で <%= line_chart User.group_by_day(:created_at).count %> とするだけで、以下のようなグラフが表示される。
さて、データは渡すことはできたが、実際にグラフのカスタマイズができないといけない。そこも当然考えられており、 line_chart の第二引数に library オプションを指定すると、 Google Chart API のオプションをそのまま適用することが可能だ。Google charts API のドキュメントを参照していただきたい。
chartkick, groupdate の注意点
実際に利用する前に、以下の点を確認しておこう。
- groupdate の Gem は、UTCのタイムゾーンを指定しなければ利用できない。 Tokyo などのタイムゾーンだと利用不可。
- SQLite3 で groupdate を利用することができない。
- Chartkick の Tooltipはカスタマイズ不可。ロードマップにあるが、対応していない模様(HighChartsの方を使えばできるという報告はある)
PostgreSQL でのグルーピング
グルーピングの処理は各データベースによって書き方が異なっており、それぞれ調べながら対応する必要がある。その中でも今回はPostgreSQL の場合について書く。
日付でのグルーピング
日付でのグルーピングは以下のようにシンプルにかける。
model.group("records.created_at::date").count
こうすると、Date型のオブジェクトがキーとなったハッシュが生成される。
時間でのグルーピング
時間ごとにグルーピングするには以下のようにする。
model.group("DATE_PART('hour', records.created_at)").count
こうすると、 2.0 などといった float 型の数値がキーとなったハッシュが生成される。
それを元に、最終的に Date として解析できる形式に キーを変換し、それを Chartkick に渡すことで、時間ごとの描画をうまく表示することができる。
従来のとChartkickとの違い
グラフ描画自体の手間は省けたが、それようにデータをしっかりとRails 側で整形する必要がある。とはいえ今までJavaScript側にやらせていたのを Rails 側でやるというだけだ。
そうなると Rails 側が重くなるということが起こる。それに対応するにはAjaxを使えば大丈夫だ。
終わりに
グラフ描画も Rails なら簡単に実装できることがお分かりいただければ幸いである。私はgroupdate を使わない方針で進めたが、それでも十分に対応できた。
