Railsでグラフ作成
私はフリーITエンジニアとして、業務分析、業務改善提案を含む設計、製造、受入検査を含む検査、システム運用開始後の運用改善提案など、様々な分野を担当しています。
Railsでグラフ作成は難しくないのですが、要件によっては、ツールを選ぶ必要があります。
今回やってみて、意外に苦労したので、実際例を紹介します。
作ったのは次のようなグラフです。
電気使用量のように季節要因があるデータを分析する際には、同月で比較することが重要です。
そこで、同月比較グラフを作成しました。
次のような特徴があります。
・複数の折れ線グラフを1枚に表示
・X軸は1月~12月
・ツールチップでデータを表示
[Chartkick]
まず、試したのが、Chartkickです。
Railsからは容易に扱えます。
ただし、私の調査方法が甘かったのか、X軸は日付・時刻が標準で、変更方法がよくわかりませんでした。
[Gruff]
次のサイトを参考にしました。
綺麗なグラフが書けます。
日本語を扱うときはフォント指定も必要なのが注意点です。
前提条件でちょっとつまづく可能性があります。
グラフは画像なので、ツールチップが出せません。
[Flot]
jQueryベースでグラフを作成するライブラリです。私は、他のプロジェクトでJavaから使用した経験があります。
高機能なグラフソフトです。
Railsからは flot-rails を使用すると容易にグラフ作成できます。
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);
というようにコードを書き換えています。
若干手間がかかる代わりに、ツールチップを分かりやすい形に整形できています。