やりたいこと
IoTデータって時系列データであることが多いと思いますが、標準のline chart infotypeだと物足りないです。色々と調べると、c3.jsというグラフ・ライブラリが良さそうです。D3.jsの親戚のようですね。
- マウスオーバーで値を見られる様にする
- 縦軸の最大値、最小値を指定できるようにする
- 横軸に適切に時刻を表示する
完成したInfotype
c3.jsを使ったinfotypeを作ってもらいました。
enebular.comのDiscoverにありますので、自分のプロジェクトにインポートできます。
パラメータを色々いじって、previewボタンを押してみましょう。ちゃんと動きそうです。
以下にある現状の標準Line chartよりも、ExcelやBIツールで見るグラフに近くなっています。
動作確認
フローを作ってデプロイする
リモートモード
Grovebasehatを載せたラズパイにenebular editorでリモートモードでアクセスします。
フロー編集
こんなフローを書きました。（Discoverよりインポート可能です。）
デプロイ
debugノードで値が出ているか確認します。
リモートモードでsaveしたらラズパイにデプロイされています。
クラウド上のデータを確認
firebaseまでデータが来ているかfirebaseの画面で確認しましょう。
データを表示する
データソースの設定
enebularの可視化ツールinfomotionでfirebase上のデータを表示するためには、データソースを登録しましょう。
infomotionを使ってみる
温度と湿度の時系列データが期待した通り、表示されました。
まとめ
c3.js使うと、d3で一から作らなくて便利そうです。
いろんなサンプルがあるので、もっといいグラフを簡単に実現できないか調べたいと思います。
