この記事について
IoTっぽいことをやりたくて表示画面の方から作ってみました。
リアルタイム表示が可能なJavascriptのグラフ表示ライブラリを色々物色した結果、Epoch.jsが一番使いやすいという結論になりました。サンプルコードを書きつつEpoch.jsの使い方等についてまとめてみました。
サンプルコード
See the Pen GQpbRR by okoppe8 (@okoppe8) on CodePen.
スライダーの部分はIoT機器のPostのシミュレータです。
Epoch.js とは
公式：https://epochjs.github.io/epoch/
Epoch.jsは様々なグラフを生成するJavascriptライブラリです。同様の目的のメジャーなライブラリにChart.js、highchart.js、Google Chart Tools などがあります。
Epoch.js を選ぶメリット
主に３点あげられます。
- リアルタイム表示に特化していて設定が簡潔
- 公式サイトだけで使い方がばっちりわかる
- MITライセンスで気兼ねなく使える
Chart.jsなどのメジャーなライブラリでもリアルタイムのグラフ表示は可能と謳われているものの、シンプルなサンプルコードは結構少ないです。
高機能な分設定が複雑だったり、追加のプラグインが必要だったり、アニメーションのための複雑な処理があったり、ライブラリの使い方と関係ないところで複雑な処理を入れていて読みづらかったりと、私のような片手間でJavaScriptを扱っている人には結構つらいものがあります。
Epoch.jsはリアルタイム表示に特化し機能も抑えられているため、公式サイトにあるサンプルを読むだけで使いこなすことができます。低機能であるためユーザーによっては満足しない（例：グリッドやドットが表示されないので見づらい、巻き戻しやズームができないなど）ということがあると思いますが、あくまでデモやプロトタイピング用途として割り切ってしまえば強力なツールであると思います。
Epoch.js の動作
Epoch.js はデータをキューで管理します。pushメソッドでキューに追加されたデータは、１秒に１回グラフに追加されます。１秒という部分は設定では変更できませんが、ソースコードのsetIntervalで処理している部分を修正することで変更可能です。
キューにデータが無いときはグラフは更新されません。アニメーションがストップします。
注意すべき点ですが、Google Chrome等のブラウザではタブがアクティブで無いときはグラフの更新が行われずアニメーションだけ一時停止します。その時にキューへデータが追加されると、グラフの更新が行われないのにデータだけキュー溜まることになり、タブが再度アクティブになってもしばらく最新のデータが表示されないという状況になります。
これを防ぐには設定の「queueSize」の値を１に設定します。最新以外のデータが捨てられるので、タブが再度アクティブになったときは最新データが即時表示されます。
レスポンシブ対応
Epoch.jsのグラフはレスポンシブに対応していません。しかし、幅(width)の設定で100%と指定すると初期表示でコンテナの幅いっぱいの表示されるので特に不便は感じないと思います。
参考
Qiita:Flask+websoket+Epochを使ってリアルタイムチャート
D3.jsベースのEpochを使ってリアルタイムチャートを描いてみる
Bitcoin のリアルタイムチャートを Chart.js で表示する
Chart.jsの記事だがロジックの作り方は参考になる。
っていうかこういうのもあったんか…。気付かなんだ。
chartjs-plugin-streaming：https://nagix.github.io/chartjs-plugin-streaming/ja/