ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化①

アバター画像 お母ちゃん  2021.12.6 
Home > Advent Calendar > ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化①
すき 0
うんこ 0

HomeMadeGarbage Advent Calendar 2021 |6日目

ソーラー発電&Arduino で気象データの測定

ベランダで測定している気象データをいつでも見やすいようグラフ化する事にしました。

Arduino MKR WiFi 1010 をソーラで楽しむ 1 -ベランダ気象データ測定-

(お父ちゃんが見ているグラフはエクセルで表示したものだった)

ラズパイ2サーバに気象データのログが出力されているので、
そこで個人的に確認するためグラフ化をしました。

ラズパイ2サーバについて

このブログは元々ラズパイ2サーバで運用していましたが今はXSERVERで運用しています。
旧ラズパイ2サーバは現在は主に家庭内で使用しています。

Raspberry Pi 2 サーバー ★ 高速化 ① Apache2 から Nginx へ移行

ブログ開設したのが2016年4月なのでそれから5年以上は動いているのか・・

グラフ

グラフ化については Chart.js を使用させて頂きました。

Chart.js | Open source HTML5 Charts for your website

PHP

サーバにphpファイルを置いて
とりあえずログデータから線グラフを表示するところまで作成しました。

PHPでログファイルを取得

サーバにあるログファイルを取得するところだけPHPを使用しています。

ログファイルの形式は、タブ区切りと改行になっているので、
ひとまず改行をカンマ(,)に置換してJSの変数に入れました。

JS

JS側でデータ整形

JSに入れたテキストデータを、

まずカンマで分割し配列に入れ

forで配列を回し

replaceを使ってテキストデータの整形をします。

 ① replace(/ /,’,’) :日付と時間の間のスペースをカンマに(2021/09/22 07:29)
 ②replace(/\t/g,’,’):タブをカンマにする
 ③replace(/ /g,”):余分な半角スペースの除去

上記をカンマで分割し配列にする

日付データ配列、温度データ配列にそれぞれ入れる

Chart.js

日付データ配列と温度データ配列を Chart.js にセットする

 

表示された!

データが1万件強ありますが表示早いです・・・
そして下のラベルも自動で表示の調整してくれてる・・・すごい・・・

 

とりあえずベースが出来たので
次回は表示の調整など行って行きたいと思います。

次の記事

ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化②グラフ切替

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください