山田健一のブログ

業務に強いフリーITエンジニア 山田健一のブログです

Railsでグラフ作成

私はフリーITエンジニアとして、業務分析、業務改善提案を含む設計、製造、受入検査を含む検査、システム運用開始後の運用改善提案など、様々な分野を担当しています。

Railsでグラフ作成は難しくないのですが、要件によっては、ツールを選ぶ必要があります。
今回やってみて、意外に苦労したので、実際例を紹介します。
作ったのは次のようなグラフです。

f:id:yamadaken1:20160324093018j:plain

電気使用量のように季節要因があるデータを分析する際には、同月で比較することが重要です。
そこで、同月比較グラフを作成しました。
次のような特徴があります。
複数の折れ線グラフを1枚に表示
・X軸は1月~12月
ツールチップでデータを表示

 

[Chartkick]

http://chartkick.com/

まず、試したのが、Chartkickです。

Railsからは容易に扱えます。
ただし、私の調査方法が甘かったのか、X軸は日付・時刻が標準で、変更方法がよくわかりませんでした。

 

[Gruff]
次のサイトを参考にしました。

d.hatena.ne.jp

綺麗なグラフが書けます。
日本語を扱うときはフォント指定も必要なのが注意点です。
前提条件でちょっとつまづく可能性があります。
グラフは画像なので、ツールチップが出せません。

 

[Flot]

http://www.flotcharts.org/

jQueryベースでグラフを作成するライブラリです。私は、他のプロジェクトでJavaから使用した経験があります。
高機能なグラフソフトです。
Railsからは flot-rails を使用すると容易にグラフ作成できます。

github.com

flot-rails の欠点は、ドキュメントがあっさりしていることですが、
README.md に従えば、なんとかなります。

まず、


<%= pie_chart [{label: 'Hello World', data: 50}, {label: 'Foo', data: 25}, {label: 'Bar', data: 25}] %>

 

で円グラフ作成を試してください。


折れ線グラフを書くためには


<%= chart(@chart_data, grid: {hoverable: true}, 
    series: {lines: { show: true },points: { show: true }}) %>

 

というコードに置き換えてください。

@chart_dataには次のようなデータをセットします。
これは、グラフ見本のデータと一致しています。


 [
 {:label=>"2016年", :data=>[[1, 357], [2, 369], [3, 340], [4, nil], [5, nil], [6, nil], [7, nil], [8, nil], [9, nil], [10, nil], [11, nil], [12, nil]]}, 
 {:label=>"2015年", :data=>[[1, 427], [2, 385], [3, 304], [4, 295], [5, 242], [6, 175], [7, 197], [8, 227], [9, 200], [10, 210], [11, 242], [12, 239]]}, 
 {:label=>"2014年", :data=>[[1, 502], [2, 454], [3, 414], [4, 295], [5, 259], [6, 174], [7, 185], [8, 192], [9, 195], [10, 186], [11, 215], [12, 242]]}, 
 {:label=>"2013年", :data=>[[1, 505], [2, 444], [3, 444], [4, 329], [5, 304], [6, 239], [7, 222], [8, 244], [9, 252], [10, 217], [11, 276], [12, 318]]}, 
 {:label=>"2012年", :data=>[[1, 577], [2, 526], [3, 472], [4, 455], [5, 319], [6, 292], [7, 296], [8, 273], [9, 293], [10, 254], [11, 273], [12, 399]]}, 
 {:label=>"2011年", :data=>[[1, 691], [2, 569], [3, 532], [4, 513], [5, 416], [6, 325], [7, 332], [8, 287], [9, 277], [10, 320], [11, 306], [12, 348]]}, 
 {:label=>"2010年", :data=>[[1, 598], [2, 476], [3, 432], [4, 459], [5, 397], [6, 295], [7, 332], [8, 348], [9, 357], [10, 373], [11, 422], [12, 429]]}, 
 {:label=>"2009年", :data=>[[1, 469], [2, 445], [3, 361], [4, 413], [5, 340], [6, 289], [7, 299], [8, 399], [9, 308], [10, 325], [11, 371], [12, 378]]}
 ]

 これだけではツールチップまでは実現できません。

http://www.flotcharts.org/flot/examples/interacting/index.html
ツールチップ表示のサンプルがありますので、JSコードを参考にしてください。

 

flot-rails は <div class="inner" 。。。。。 というタグにグラフを書きますので、
$("#placeholder")

$(".inner")
に書き換えてください。
また、私の同月比較では

 


                showTooltip(item.pageX, item.pageY,
                            item.series.label +  x + "月 : " + y);

というようにコードを書き換えています。

若干手間がかかる代わりに、ツールチップを分かりやすい形に整形できています。