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

執筆者:

関連記事

no image

Rubyでxmlの要素の追加など~nokogiri

目次1 はじめに2 文字列をパースしてxmlとして読み込んでそのままxmlとして出力する3 nodeの追加4 nodesetの作成と追加5 DocumentFragmentの作成と追加 はじめに 参考 …

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

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

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-59e98 …

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …