再び溝畑です。
OL2→OL2→Vim→OL3ときたので、さすがに別のことを書きます。
今回はグラフです。
JavaScriptのグラフライブラリ、沢山ありますね。
どれを選んで良いのか分からない!
そんなときは、このサイトがオススメです。
JavaScript Graphing Library Comparison
必要な条件で絞り込んで、用途に応じたライブラリが選べます。
自分が少しでも触ったことがあるものは
・Highcharts
・Highstock
・Dygraphs
・C3.js(D3.js絡みで)
その中でもHighcharts、Highstockにはお世話になってます。
今回はHighstockを使って、複数の単位のデータを1グラフに描画してみたいと思います。
Highstock
Highstockについては公式のデモを見ると大体掴めるはずです。Highstock Demo
見ての通り、時系列のグラフを描画するのに特化しています。
個人で使う分には無料で、商用になると有料です。
グラフの描画方法なんかは、DEMOのコードを見つつ、
APIリファレンスを見ながらオプションをいじると良いと思います。
このAPIリファレンスですが、ほとんどのオプションにサンプルが用意されています。
JsFiddleへのリンクがあるので、自由にいじって変化を確認できるのがありがたいですね。
グラフの描画
手始めに、簡単なグラフの描画から。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var chart = new Highcharts.StockChart({ chart: { renderTo: document.getElementById('graph') }, title: { text: 'sample' }, series: [{ name: 'data1', data: [ [x, y], [x, y] ....] }] }); |
APIリファレンスの通りに、ほしいオプションを書いていくだけです。
dataには[[x,y],[x,y]...]の形の配列を渡すとOKです。
このとき、XはUNIXTIMEにしてください。
すると、こんな感じのグラフが簡単に描画できます。
折れ線グラフサンプル
2軸のグラフ
さて、別の単位のデータを一緒に表示させたいよ!となったとします。こんなときはYを2軸にしてあげると良いです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var chart = new Highcharts.StockChart({ // ... 省略 yAxis: [{ min: 0, max: 50, opposite: false }, { min: 0, max: 300 } ], series: [{ name: 'data1', data: [[x,y]...], yAxis: 0 }, { name: 'data2', data: [[x,y]...], yAxis: 1 }] }); |
yAxisオプションを配列で追加します。
oppositeをfalseにすると軸がグラフの左側に表示されます。
デフォルトはtrueなので、右に表示されています。
そして、seriesではどのyAxisを使うのかを指定します。
今回は、0ならレンジが0-50の軸、1なら0-300の軸となります。
2軸のグラフサンプル
2軸表示されているのが分かると思います。
もっとデータ増やしたいよ
問題は、もっとデータが増えて、それをひとつのグラフに表示したい。となった場合。。。単位まとめてグラフを分けたら?と言われたらそれまでですが、そういうわけにもいかないときはあります。
そういうときは、全てのデータを%換算して、表示を考えるわけですが、
そうすると今度はツールチップには実値がほしい...となります。
リファレンスを見てみると、データは[[x,y]...]形式だけでなく、
1 2 3 4 5 6 7 8 9 10 11 |
data: [{ x: x, y: y, name: name }, { x: x, y: y, name: name }, ... ] |
こんな形でも可能です。
となると、ただの力技ですが、全てのデータを%換算して、xに持たせます。
そして、換算前の実値をnameに放り込んでみるとどうでしょう...?
やってみよう
データの持たせ方を変えてみても、そのままではツールチップにはxの値が表示されます。なので、ツールチップを表示を変更していきます。
ツールチップの表示は、tooltip.formatterを書くとカスタマイズできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var chart = Highcharts.StockChart({ // ...省略 tooltip: { useHTML: true, formatter: function (e) { var content = ''; this.points.forEach(function (val) { var series = val.series; content += '<span style="color:' + val.color + '">' + series.name + '</span>:'; content += val.point.name + '<br>'; }); return content; } } }); |
パーセント換算したサンプル
表示は%、ツールチップは実値になりました!
data1は0-50、data2は0-300、data3は0-150をレンジとしています。
サンプルは時間の表示をサボっていますが、this.xで時間がとれるので、上手く変換すればOKです。
注意点としては、長期間のデータを表示していると、特定の期間以上ではnameが取得できなくなるので、少し考える必要があります。
そうなったときは、val.series.options.dataに、入れたデータが入っているので、そこから取得できると思います。
最後に
ただの力技でしたが、いかがでしょうか。複数のデータを分けずに一気に表示したいという場面は、意外とあると思いますよ(ない?)
Highstockは簡単に時系列グラフが描画できるのでオススメです!
商用で使う場合はライセンス買いましょう。。。