Picture

Hi, I'm marksard.

Joy of making, Smile be making, Interest and making.

ラズパイに積んだセンサーや情報ログのグラフ表示をGoogleChartからHighChartに切り替えた

ラズパイを使った温湿度時計を置いてます

 二年前に引っ越しをしたときに自室に置時計(温湿度計付き)が欲しくなり、マンションにはクソで不向きな電波時計よりntp同期してくれる時計が欲しいのだけど当然?無いため自分で作りました。会社の同僚に貰った古いラズパイに20x4のキャラクタディスプレイと温湿度センサーを付けて時刻と温湿度とかを表示してます。

温湿度のログをグラフ表示

 温湿度計付けたらロギングしたくなるじゃないですか?で当時調べたら簡単そうだったGoogleChartを使って表示して満足してたのだけど、やっぱりちょっと痒い所に手が届かないというか。
 で、昨日思い出してちょっと調べたらHighCharts.jsってのがよさげだったので切り替えてみました。実際にはHighCharts.jsの親戚?な、長いデータのスクロール表示に対応しているHighStock.jsを使用してます。

google chart

google chart

HighStock

highstock

 表示しているデータは同じ。自室の温度、湿度、気圧、ラズパイのCPU温度、ネット速度(Down/Up/Ping)をロギング。ラズパイが古くてLANが100Mbpsなので上限は不正確だけど遅くなるタイミングのチェックに良いなと思って。

 google chartだと温度計の単位が整数値しか認識してなかった(なんか設定あるんだろうけど)けど、highstockは何もしなくても少数を読んで表示してくれてるので同じデータなんだけどグラフは違うものになってます。

 このグラフ表示のhtmlのソースと温湿度時計表示アプリのソースをネタにqiita記事にしようかなと。とりあえず温湿度時計表示アプリのコードをgithubに上げておきました。

Back to Top