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

執筆者:

関連記事

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …

SimpleCovのカバレッジをvimに表示させる~simplecov-vim

      github.com/nyarly/Simplecov-Vim 参照 Rails3でテストカバレッジを計測する~simplecov,thin 自分のgem上の …

Rails3.2のアプリをデプロイ~apache+passenger+postgresql

  環境 ubuntu server 12.04 目次1 postgresql2 apache+passenger3 デプロイ準備 postgresql インストール 参照 Ubuntu s …

RailsにTwitter Bootstrapのフォームを設定する~simple_form

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails github.com/plataformatec/simple_form 目次1 Gem …