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
-,

執筆者:

関連記事

sunspot_railsで全文検索

sunpotはsolrというJava製の全文検索サーバをrubyから使えるGem sunspot_rails はsunspotにマージされてました 参考 railscasts.com/episodes

d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush

参考(というかほぼそのまま) 【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

d3.jsで力指向グラフを使って遊ぶ~force layout & zoom & pan

参考 D3をはじめよう 参考 Force Layout 目次1 forceレイアウトのスケルトン2 zoom&pan forceレイアウトのスケルトン forceレイアウトではオブジェクトに力が作用し …

d3.jsで棒グラフを作成する

  前提 SVGでビジュアライゼーションことはじめ~d3.js   目次1 データの数だけ棒を表示する2 scale3 テキストラベルをつける4 JSONで読む データの数だけ棒を …

no image

Private_pubでのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …