前回までの記事ラズパイでIoT 温度データを取得してMySQLに保存しよう。でラズパイにつながった温度センサーHDC1000のデータがMySQLに保存されるようになりました。

今回はそのMySQLのデータをグラフに表示してみたいと思います。家のパソコンやスマホから見ることができますよー(*´艸`*)

どんな感じで表示されるの?

温度データって今の温度じゃなくて変化が重要ですよね。

そのとき調べたい日中の変化だったり、1週間の変化だったり、月の変化だったり。。

ということで、Day(1日前からの変化)、Week(1週間の変化)、1ヶ月の変化(28日分の変化)のグラフを切り替えて表示できるようにしました。プルダウンメニューから変化させます。

ラズパイをサーバーにしてMySQLのデータからグラフを作りパソコンで表示している画像

1週間と1ヶ月の変化は、1日単位で表示させるのでmin/ave/maxを表示できるようにしました。
ラズパイをサーバーにしてMySQLのデータからグラフを作りパソコンで表示している画像。データをラズパイ側から処理して最大値、最小値を表示
※サンプル画像は古いデータがないので1週間分のデータは表示されていません。

こんな感じのグラフがパソコンやスマホから取得できるのって便利ですよね。
ラズパイはLinuxなのでPHPサーバーとして動かすことができるのでこんなこともできちゃうんです。

実装方法をご紹介していきますね(ง°̀ロ°́)ง

ラズパイを使ったグラフ表示のサンプルプログラム

JavaScriptからMySQLのデータを取得するようにPHPに要求し、PHPはJavaSciptの要求に従いデータを返します。JavaScript側ではGoogle Chartsのグラフ描画機能を使うので、そのデータフォーマットでPHPがデータを返すようにするようにしています。

順に見ていきましょう。

Google Chartsでグラフを表示する

グラフの表示にはGoogle Chartsを使用しました。JavaScriptはクライアントサイドなのでインタラクティブにデータの表示ができるからです。

Google Chartsでグラフを表示させる前にCreateJsonFromMySql.phpでラズパイにMySQLからデータを取得しJSONフォーマットでグラフデータを返すように要求しています。

CreateJsonFromMySql.phpについては後ほどサンプルプログラムをご紹介します。

JavaScript側はPHPから受け取ったグラフデータをGoogle Chartsのインスタンスに渡すことで実際にグラフが描画されます。

JavaScriptから呼ばれるPHPのプログラム

JavaScript側からDay/Week/Monthどの状態でデータが欲しいのかを$_GET[‘range’]で取得しています。

また、JavaScript側からは何のMySQLデータが欲しいのかを$_GET[‘target’]で取得しています。将来的には温度以外の他のデータも取得したいので少し汎用的にしました。

データはGoogle Chartsのグラフが要求するJSONデータで返しています。

DbManager.php / Encode.phpはJavaScriptからPHPにクエリ情報を渡す方法は?ラズパイで試しました。でご紹介していますので参考にしてください。

あとはJavaScript側のコードを呼び出してあげればOKです(*´罒`*)

おわりに

パソコンやスマホからラズパイに保存されているMySQLのデータをPHP経由で表示させる方法をご紹介しました。
Google Chartsはパワフルなのでかなり実用的な感じになったのかなーと思います
(◍•ᴗ•◍)♡ ✧*。

記事を読んでいただいてありがとうございます。この記事がいいなと思ったら下記のSNSボタンのクリックをお願いします。励みになります😁