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 …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …

RailsでHTML5対応のvideoプレイヤーを利用してみる~flowplayer5.0.0

  参考 flowplayer.org/ Flowplayerのサイトからバージョン5.0.0がダウンロードできる flowplayer-gemのバージョンは3.2.4 バージョン5では基本 …

今度こそRails3.2からdocxを生成する

  前提 Rubyからdocxを生成する 前回、イキオイアマって自分でdocxを生成する簡単なライブラリを作ってしまった.(なんて車輪の再発明 今回はこれをRailsから利用してみる. 目次 …