D3.js Railsで使えるGem

簡単にグラフが作成できるC3.jsをRailsでつかってみた

投稿日:2015年4月27日 更新日:

C3.js

C3.jsはD3.jsをベースにしたグラフ描画のライブラリ.
データを与えるだけできれいなグラフが描ける上に、カスタマイズも可能.
c3js.org/

使い方は簡単.
適当にライブラリを配置して読み込む.

そして、viewにdiv#chartを設置して、c3.generate()すればOK.

かっこいい感じのグラフが描画される.
screenshot
インタラクティブにマウスオーバーやツールチップ、クリックで表示非表示、画面サイズに合わせたリサイズなど高機能.

時系列の場合は、こんなデータ.ちょっと今風でない行列の先頭にタイトルデータがはいるという、扱いにくい感じ. <= なんかJSONとかでも大丈夫でした.rowsとかjsonとか結構データによって柔軟に対応できるぽい.

gon

今回はgonというgemを使った.
github.com/gazay/gon

gonはコントローラーから、直接、Javascriptにデータを渡してくれる.
その仕組みは、描画されたソースをみると大体わかるけど、htmlにデータを直書きしている.
Jsonの場合はhtmlのあと、また取得することが多く、gonならデータの通信が一回で済むから、ちょっとグラフを描画する程度には最適.

準備として、Rails4の場合はViewに次の通り書き込んでおく.

次に、Railsから、上のcolumnsに対応するデータを渡せばOK.

例えば、@tteventsはgroupとかcountとかして集計したデータセット.
1つのデータは、{year: 2014, month: 1, day:5, sum: 5, count:3}とかで、これが集まってActiveRecord_Relationに入ってる.

これをcontrollerでgonに適当に加工していれた.

JavaScriptでデータを渡してやればOK
第2軸は、y2という名前固定ぽい.

D3.jsより全然お手軽!
バーチャートやドーナッツチャートはよく使うからうれしい
screenshot
横軸も時系列を使えば、0の日のデータがなくても、ちゃんと間を空けて描画してくれる.データベースから0の日を含んだデータを取ってくるのは結構めんどうくさいからありがたい.

追記 timeseriesになってなかった

axesの指定が必要でした.
参考: Timeseries Chart

screenshot

複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場合はMultiple XY Line Chart

Multiple XY Line Chart

screenshot

ドーナッツチャートの場合

ドーナッツチャートの場合は、[項目名,データ,…],[項目名,データ,…]というデータセットが必要.
ActiveRecordの集計結果に、これはto_aを使えば簡単に作れる.

例えば、Projectが多数のIssueを持ち、Issueが多数のEventを持つという関係の場合、project名ごとのEventのduration(時間)を集計するにはJoinして,groupすればOK.

これをJavascriptに渡す.

これでOK
screenshot

-D3.js, Railsで使えるGem
-,

執筆者:

関連記事

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

By: Mauquoy Token Company – CC BY 2.0 railscasts.com/episodes/258-token-fields?language=ja&#03

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …