HomeMadeGarbage Loading

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

Avatar photo お母ちゃん  2021.12.12 
ホーム
電子工作
Raspberry Pi
IOT
音楽
Home > Advent Calendar > ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化②グラフ切替
すき 0
うんこ 0

HomeMadeGarbage Advent Calendar 2021 |12日目

前回

前回は、Arduino で取得している気象データphpで取得し、
Chart.js で気温をグラフ表示するところまでやってみました。

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

今回は、気圧や湿度にも切り替え表示出来るようにしました。

ソースコード

CDN で bootstrap、jQuery、Cart.js を使用しています。

変数を用意

  • チャート用変数:myChart
  • 気象データの切り替え用:mode
  • 気象データ:weatherData

配列の宣言の仕方が不格好な気がするけどこんなんでいいのか・・?

データを配列に入れていく

チャートの表示

ボタンクリックでチャートを切り替え

 

こちら参考にさせて頂きました

Chart.jsでグラフを更新するサンプル(ボタンをクリック) – Qiita

動作デモ(CodePen)

生データが膨大(1万件強)のためテストデータにしております。

See the Pen Untitled by HomeMadeGarbage (@hmg) on CodePen.

次の記事

ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化③日付範囲指定

コメントはこちらから

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

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