From e465f7c1dba34581f8a2866b29c5bfc1f80aa9c7 Mon Sep 17 00:00:00 2001 From: parMaster Date: Wed, 29 Nov 2023 14:45:39 +0200 Subject: [PATCH] convert strings to numbers and minor grooming --- web/chart.html | 37 ++++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/web/chart.html b/web/chart.html index fad170c..f7e0fdd 100755 --- a/web/chart.html +++ b/web/chart.html @@ -1,5 +1,6 @@ RPId Charts + @@ -16,11 +17,6 @@
-
-
-
-
-
Dark/Light @@ -49,8 +45,13 @@ } } -var tempDiv = document.getElementById('TempRpmChart'); -var loadDiv = document.getElementById('LoadAvg'); +function createChartElement(chartId) { + if (document.getElementById(chartId) == null) { + var chartDiv = document.createElement('div'); + chartDiv.id = chartId; + document.body.appendChild(chartDiv); + } +} async function loadChart() { let data = await getData(); @@ -91,10 +92,13 @@ } plots.push(rpm); } - Plotly.newPlot(tempDiv, plots, TempRPMLayout); + Plotly.newPlot('TempRpmChart', plots, TempRPMLayout); // LoadAvg chart configuration if (data["Modules"] && data["Modules"]["system"] && data["Modules"]["system"]["LoadAvg"]) { + + createChartElement('LoadAvg'); + var LoadAvg1m = { x: data["Dates"], y: data["Modules"]["system"]["LoadAvg"]["1m"], @@ -131,13 +135,15 @@ visible: false } }; - Plotly.newPlot(loadDiv, [LoadAvg1m, LoadAvg5m, LoadAvg15m], LoadAvgLayout); + Plotly.newPlot('LoadAvg', [LoadAvg1m, LoadAvg5m, LoadAvg15m], LoadAvgLayout); } // check if there is object with name "Modules" and if it has "bmp280" and "htu21" keys if (data["Modules"] && data["Modules"]["bmp280"] && data["Modules"]["htu21"] && data["Modules"]["bmp280"]["temp"] && data["Modules"]["htu21"]["humidity"]) { + createChartElement('AmbTempChart'); + var amb_temp = { x: data["Dates"], y: data["Modules"]["bmp280"]["temp"], @@ -173,6 +179,9 @@ // check if module bmp280 is loaded and has pressure data if (data["Modules"] && data["Modules"]["bmp280"] && data["Modules"]["bmp280"]["pressure"]) { + + createChartElement('PressureChart'); + var press = { x: data["Dates"], y: data["Modules"]["bmp280"]["pressure"], @@ -189,6 +198,9 @@ // check if there is object with name "Modules" and if it has "system" key if (data["Modules"] && data["Modules"]["system"] && data["Modules"]["system"]["TimeInState"]) { + + createChartElement('TimeInState'); + var TimeInState = { type:"pie", values: Object.values(data["Modules"]["system"]["TimeInState"]), @@ -213,7 +225,10 @@ && data["Modules"]["smc768"]["TC0C"] && data["Modules"]["smc768"]["Exhaust"] ) { - // data["Modules"]["smc768"]["Exhaust"] is array of strings, convert it to array of numbers + createChartElement('Smc768Chart'); + + // convert strings to numbers + data["Modules"]["smc768"]["TC0C"] = data["Modules"]["smc768"]["TC0C"].map(Number); data["Modules"]["smc768"]["Exhaust"] = data["Modules"]["smc768"]["Exhaust"].map(Number); var cpu_temp = { @@ -250,7 +265,7 @@ } tempDiv.on('plotly_relayout', function(eventdata){ - Plotly.relayout(loadDiv, eventdata); + Plotly.relayout('LoadAvg', eventdata); Plotly.relayout('AmbTempChart', eventdata); });