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);
});