Chart.js を使ってグラフを書く

 

Chart.js  のダウンロード

ESPr Developerで温度測定し、SQLiteに蓄積しているデータをグラフにしてみたいと思います。※蓄積といっても、ESPr Developerを他目的で使いたいので3日でやめました。
今回、グラフにするために Chart.js というライブラリを使ってみます。先ずはライブラリ設定です。Chart.js のホームページへのリンク(英語)は下記です。日本語翻訳サイトもある様です。

◆リンク◆ Chart.js ホームページへのリンク(英語)
→ Get Started →  installation page → Chart.js on GitHub の順に進むと、Version2.7.3 が登録されています。(本記事作成時)Source code(zip)をダウンロードすると“Chart.js-2.7.3.zip”という名前で保存されます。解凍すると“Chart.js-2.7.3”というフォルダーの下に“samples”  というフォルダがあり、更にその下に各グラフを区分するフォルダが幾つかあり、それぞれのに html サンプルが入っています。今回の時間ごとの温度測定結果を表示する目的では “line” というフォルダに入っているサンプルが応用できそうなので試してみようと思います。
次の図は、“Chart.js-2.7.3”の中の“line” 下にあるサンプルhtmlを開いた状態です。つい最近まで  html ,JavaScript に触れることがなかった私にとっては、ライブラリを使っているからなのですが、比較的シンプルなコードでグラフを定義できるので驚きました。

“Chart.js-2.7.3”サンプルHTML “basic.html”

※本ホームページ全体に同じことですが、ライブラリ設定等、くれぐれも自己責任でお願い致します。

サンプルプログラム修正

今回は、シンプルな折れ線グラフを作る予定です。サンプルプログラムフォルダー “line” 下の “interpolation-modes.html”をベースに、3日間の温度測定データ表示を行ってみたいと思います。先ず、”interpolation-modes.html”オリジナルを示します。

“Chart.js-2.7.3”サンプルHTML “interpolation-modes.html”

次に3日間の温度測定用に変更したものを示します。現状はスクリプト内に測定データを直接入力していますが、タイトル等も日本語にし、各測定日ごとに0~23時の測定結果を折れ線グラフで表示できています。

3日間の温度測定結果   “001.html”  ※リンク有

上のリンクを開くと「Randomize Data」というボタンがあります。クリックするとグラフを構成する要素データに乱数による値を設定し、グラフ表示を変化させます。オリジナルは、変化範囲が大きいもで、今回は下の図の通りピンク色のデータのみ、18~28度の範囲で変化する様に変更しています。

3日間の温度測定結果   “001.html”   ボタンによるデータ変更

ボタンクリックにより、グラフ要素の値を変化させられることが判りましたので、先回投稿「HTTP通信を使って、サーバー上のデータを取得する」で確認したHTTP通信によってサーバー側から取得したデータを設定すれば、いつでもグラフの最新化が可能であると思われます。これについては、次回確認予定です。

主な修正箇所

オリジナルのサンプルプログラムを温度データ表示用に変更する為の主な修正箇所について、下の図に示します。下図①で配列変数data_00,data_01,data_02に日付毎に0~23時の温度データを設定し、④でデータセットに配列データを設定すると、表の値が変更されます。(今回は3日分のデータですので、同様に他2ヶ所でデータ設定しています。)
次に②横軸の時刻表示データ(目盛),③凡例ラベル,⑤タイトル,⑥横軸ラベル,⑦縦軸ラベル,⑧縦軸最大・最小値(目安)などを設定し、グラフを見やすくします。
⑪は「Randomize Data」ボタンを形成し、⑫の箇所で⑪ボタンがクリックされたことを監視し、クリックされると⑫の中の処理を実行します。⑬で⑭処理を含む関数を呼び出し、配列変数に戻り値を設定・変更しています。同じようにHTTP通信によってサーバー側から取得したデータを配列変数に設定し、アップデート処理を行えばグラフの更新が出来そうです。

まとめ

今回、Chart.js を使って折れ線グラフを書く方法を確認しました。また、サーバー上にあるデータを反映する方法についても何となくイメージがつかめました。次回はESPr Developerで実際に測定し、サーバー上に保管されている温度データをChart.js を使って表示してみたいと思います。
今回、作成したプログラムは下記です。

★今回の成果★ ※リンクしています。
3日間の温度測定結果   “001.html

※サーバー環境:レンタルサーバー(ロリポップ)
ライトプラン(月々250円~)