HomeMadeGarbage Loading

Chart.js

ホーム
電子工作
Raspberry Pi
IOT
音楽
Home > Chart.js
ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化⑤表示調整

前回 https://homemadegarbage.com/weather-graph4/ 今回はちょこちょことお父ちゃんから依頼のあった表示の調整を行いました。 ソースコード [crayon-62f3b7d523765252203819/] ①フォントサイズ <ラベルのフォントサイズが小さい [crayon-62f3b7d52376d674323184/] Fonts | Chart.js ②グラフの背景色 < グラフ画像を保存した時に背景が透明になっちゃ...

Web 2022.1.8 お母ちゃん

ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化④日付形式

前回は日付範囲指定が出来るように調整しました。 https://homemadegarbage.com/weather-graph3 ただこれだと、ログデータは10分毎のデータとなっているため、 日付を狭めた時に同じ日付が並んでラベルに表示されてしまい、 見づらくなってしまいました。 なのできちんと「日付」として扱えるようにグラフを調整しました。 ソースコード [crayon-62f3b7d523c5f145685245/] アダプターの追加 日付型にするにはアダプターが必要に...

Web 2022.1.7 お母ちゃん

Chart.jsで折れ線グラフのラインが表示されない

Chart.jsの折れ線グラフで、なぜかラインが表示されず困りましたが、 spanGaps: true を追加することで表示されるようになりました。 [crayon-62f3b7d523e6f668225101/]   spanGaps データに隙間があった場合に線を繋げてくれるオプションのようです。 trueの場合、データがない点またはヌルの点との間に線が描画されます。falseの場合、NaNデータ点では線が途切れます。 線グラフ · Chart.js...

Web 2022.1.5 お母ちゃん

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

HomeMadeGarbage Advent Calendar 2021 |21日目 前回 https://homemadegarbage.com/weather-graph2 ソースコード [crayon-62f3b7d524006572619058/] Chart.js の options 追加 [crayon-62f3b7d52400a778842094/] x軸の min と max を設定可能にします。 値は配列番号になります。 初期値は最小&最大値をセット。 [c...

Advent Calendar 2021.12.21 お母ちゃん

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

HomeMadeGarbage Advent Calendar 2021 |12日目 前回 前回は、Arduino で取得している気象データphpで取得し、 Chart.js で気温をグラフ表示するところまでやってみました。 https://homemadegarbage.com/weather-graph 今回は、気圧や湿度にも切り替え表示出来るようにしました。 ソースコード [crayon-62f3b7d524232977995037/] CDN で bootstrap、jQ...

Advent Calendar / Web / 電子工作 2021.12.12 お母ちゃん

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

HomeMadeGarbage Advent Calendar 2021 |6日目 ソーラー発電&Arduino で気象データの測定 ベランダで測定している気象データをいつでも見やすいようグラフ化する事にしました。 https://homemadegarbage.com/mkr-1010-01 (お父ちゃんが見ているグラフはエクセルで表示したものだった) ラズパイ2サーバに気象データのログが出力されているので、 そこで個人的に確認するためグラフ化をしました。 ラズパイ2サーバについ...

Advent Calendar / 電子工作 2021.12.6 お母ちゃん