環境センサーデータをWordPressに保存し、Webブラウザでグラフにして表示する

環境センサーで読み取ったデータ（気温、湿度）をWordPressのデータベースに保存し、それをグラフ化してWebブラウザ上に表示する方法を検討しています。

• CSVファイルに書き出して、Pluginを使ってグラフ化する
• PHPプログラムを作成しグラフ化する
• CSVファイルに書き出して、表計算ソフトでグラフ化する

が考えられますが、今回は「PHPプログラムを作成しグラフ化する」ことにしました。

---

M5Stackに環境センサーを取り付けて、5分おきに気温と湿度データをWordPressに送るためのプログラム（UIFlow）を作成しました。

WordPressで受信したデータはデータベース上に保存します。

356,humi,32.41,"2024-05-18 18:33:05"
355,temp,34.13,"2024-05-18 18:33:05"
354,humi,32.25,"2024-05-18 18:28:03"
353,temp,33.99,"2024-05-18 18:28:03"
352,humi,31.87,"2024-05-18 18:23:02"
351,temp,33.86,"2024-05-18 18:23:02"
350,humi,31.40,"2024-05-18 18:18:00"
349,temp,34.16,"2024-05-18 18:18:00"
348,humi,30.90,"2024-05-18 18:12:58"
347,temp,33.85,"2024-05-18 18:12:58"

WebブラウザからWordPressのグラフ表示用ページを開くと、

1. データベースから最新1時間分（5分おきのデータ12件）を読み込む（PHP）
2. グラフ描画ライブラリChart.jsでグラフを描画（JavaScript）
3. Webブラウザ上に表示

を実施します。

---

センサーを変えて、取得するデータを変えればいろいろ活用できます。

今回はローカル環境にWordPressを設置しました、ネット上でも同じです。