温湿度管理グラフ作りました
一週間ほど前になりますが、温湿度管理のグラフページを作成しました。
一日の温湿度を上段下段でそれぞれ15分毎に計測しており、そのデータをWordPressから見える領域にアップしています。
グラフ自体はJavaScriptのchart.jsという無料のライブラリを使って表示させています。
何も指定しなければ当日のデータが表示されますが、日付指定のボックスで過去のデータも表示できます。
chart.jsを使ったグラフのページは昨年作成したことがあったのですが、その時は数日間に渡って作成していた記憶があります。
これです。
これは東京都の区毎及び日毎のコロナウィルスの感染者数をグラフで表示させています。
地区と期間を選択可能にしており、その動的な処理がかなり時間がかかりました。
5/16以降のデータが取れていませんが、2020/3/31から2022/5/16までのデータは参照可能です。
これで一番難しかったのが、地区の選択後のグラフ表示です。
サンプルを色々探していましたが、グラフの数が固定のものしか見つからず、動的な使い方がうまく見つけられなかったので、色々試行錯誤して指定した数のグラフを表示させることが出来ました。
今回のグラフは動的に表示させる必要はないので比較的シンプルな作りになっています。
グラフの元データはCSVファイルになります。
ラズパイに温湿度センサーを上段と下段で2個接続していて、一つのCSVにまとめて出力しています。
そのCSVファイルを一時間毎にSCPでコピーしています。これはシェルスクリプトです。
CSVは日毎のファイルになっているので、日付指定のボックスで選択後、参照するファイル名を指定してグラフを表示させています。
やはりグラフは見やすいですね。
ただ長期的なスパンで見ようとするとグラフだと限界があるので、今後は指定期間で日毎の最高温度、平均温度、最低温度、最高湿度、最低湿度、平均湿度を出せるページは作りたいです。
ちなみに参照方法ですが上部のメニューに「温湿度管理グラフ」という項目がありそこから参照可能です。
今日はこの辺で