chart.jsのグラフを動かしたい
センサー値とかを収集していい感じにリアルタイムに動かして表示したいなーと思ってChart.jsのLineChartを弄ってみて、なんとかウネウネ動かすとこまで行ったのでまとめ。
できたもの
やりたかったことは常時一定の測定点をもつ折れ線グラフを右から左へ流していくイメージ。
https://jsfiddle.net/yac0L4gq/2/
（初期化以外は）適当に乱数値でグラフ書いてます。
すでに存在する点の値を次々ずらして更新していくことで動きを作っている。
失敗したこと
すでに存在する点をシフトしていくと左からなくなる予定の測定点がアニメーションして右側に移動する、持ってるデータにどこの点の測定点かなどのデータも持ってる、などイマイチな挙動やデータの状態になるのでこの方針は諦めた。
感想
ウネウネ動かしてるとすごい勢いでCPUのファンが回ってしまう、そういう意味では重い処理なのでこのまま使うには実用的ではないと思われる。
グラフの描画オプションを変更すればマシになるかもしれない。（いま曲線ででるのでその計算とか結構かかってるかも。）
他のグラフはもっと簡単にできそうなのでラインチャートを選んだことが間違いだった気はしている。
そのうちマシにしたいけどここで一区切り。