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

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

HomeMadeGarbage Advent Calendar 2022 |4日目

2021年のアドベントカレンダーで行っていた気象データのグラフ化ですが、約1年以上の運用となりグラフの表示が重くなって来たため、高速化を行いました。

Arduino MKR WiFi 1010 ベランダ太陽光発電 気象観測システム 1周年

グラフ化について前回までの記事

Chart.js のバージョン指定

高速化の前に、ある日突然グラフが表示されなくなる不具合が起こりました。

原因はCDNで読み込んでいるChart.jsのアップデートでした。

Releases · chartjs/Chart.js

月にChart.jsが4.0にアップデートした様で、現在グラフで使用しているdate-fns adapter は 現時点では4には未対応の様です。

Time Cartesian Axis | Chart.js

https://github.com/chartjs/chartjs-adapter-date-fns
GitHub – chartjs/awesome: A curated list of awesome Chart.js resources and libraries

CDNにバージョン指定を追加する事で表示は元に戻りました。

version指定に変更

高速化について変更点

ソースコード

1. データの高速化

ログファイルを月ごとにしてもらう

まずは Arduino からの気象データを月毎に分割して貰いました。

ログデータの中身は変更なし、こんな感じでタブ区切りのデータが入っています。

php + ajax で取得

これまでは php で HTMLに直接データを展開していた所を辞めて、phpでファイル一覧取得し、ajaxでテキストデータを取得する形にしました。

修正前

修正後

ここだけでもページの表示が軽くなりました。

6MB以上とかになっていたから・・

2. ボタンを追加

期間指定に「24時間」「1週間」「1ヶ月」「半年」「1年」「全期間」のボタンを追加しました。

HTML

JS

それぞれ、現在時刻からの差分を開始日時に指定しています。

3. グラフに渡すデータを小さくする

今まではログデータの全件をChart.jsに渡した上で表示範囲を指定していましたが、現在データが10万件を超えており渡した時点で重くなってしまうため、先に期間指定で件数を減らしてからChart.js に渡す様にしました。

修正前

修正後

大分早くなって来ました。

4. 表示期間が2ヶ月以上は1時間単位にする

ログデータは3分毎になっており、期間が長くなるとチャートの描画に時間がかかってしまうため、60日以下は全データ、それ以上の期間は1時間毎のデータを渡す事にしました。

変更点

この辺りは前回迄の作りはそのままで時間毎の参照用の配列を作った形ですが
もっと良い構造があるような気がする💦

表示の様子

表示が大分サクサクになりました✨

まだちょっと調整したい所は細々とありますが、一旦は完了!🙌

今後実装したい機能

今後実装したいと思っているのは気圧が急降下している時にメール等で通知を送る事です。

 

コメントはこちらから

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

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