読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

Rails で グラフ描画なら、 Chartkick を利用すべし

Rails

ども、@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 %> とするだけで、以下のようなグラフが表示される。

f:id:cevid_cpp:20151023193620p:plain

さて、データは渡すことはできたが、実際にグラフのカスタマイズができないといけない。そこも当然考えられており、 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 を使わない方針で進めたが、それでも十分に対応できた。