Add temperature, humidity, eCO2, and TVOC data to graph and update graph view

This commit is contained in:
sietse jonker
2024-03-31 21:19:37 +02:00
parent f803ab021c
commit ae082b53a4
2 changed files with 59 additions and 2 deletions

View File

@@ -2,6 +2,10 @@ class Graph {
constructor(id) {
this.id = "graph" + id;
this.timeArray = [];
this.tempArray = [];
this.humiArray = [];
this.eco2Array = [];
this.tvocArray = [];
}
// Function to create a graph
@@ -34,6 +38,49 @@ class Graph {
},
]);
}
updateData(type, value) {
switch (type) {
case "Temp":
this.tempArray.push(value);
break;
case "Humi":
this.humiArray.push(value);
break;
case "eCO2":
this.eco2Array.push(value);
break;
case "TVOC":
this.tvocArray.push(value);
break;
default:
console.error("Invalid type");
}
}
updateGraph() {
let time = new Date();
this.timeArray.push(time);
let update = {
x: [[this.timeArray]],
y: [
[this.tempArray],
[this.humiArray],
[this.eco2Array],
[this.tvocArray],
],
};
let olderTime = time.setMinutes(time.getMinutes() - 1);
let futureTime = time.setMinutes(time.getMinutes() + 1);
let minuteView = {
xaxis: {
type: "date",
range: [olderTime, futureTime],
},
};
Plotly.relayout(this.id, minuteView);
}
}
class LiveGraph extends Graph {
@@ -101,6 +148,17 @@ class DataProcessor {
graph.makeGraph("temp", "red", "Temperature");
graph.makeGraph("humi", "blue", "Humidity");
graph.makeGraph("eco2", "green", "eCO2");
graph.makeGraph("tvoc", "purple", "TVOC");
graph.makeGraph("tvoc", "#F5G644", "TVOC");
graph.updateData(this.data[0].Type, this.data[0].Value);
console.log(this.data[0].Type, this.data[0].Value);
graph.updateData(this.data[1].Type, this.data[1].Value);
console.log(this.data[1].Type, this.data[1].Value);
graph.updateData(this.data[2].Type, this.data[2].Value);
console.log(this.data[2].Type, this.data[2].Value);
graph.updateData(this.data[3].Type, this.data[3].Value);
console.log(this.data[3].Type, this.data[3].Value);
graph.updateGraph();
}
}

View File

@@ -120,7 +120,6 @@ function fetchData() {
createFilterContainer();
processor.update(data);
processor.graph();
})
.catch((error) => {
console.error("Error fetching data:", error);