Add temperature, humidity, eCO2, and TVOC data to graph and update graph view
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
|
@@ -120,7 +120,6 @@ function fetchData() {
|
||||
createFilterContainer();
|
||||
processor.update(data);
|
||||
processor.graph();
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching data:", error);
|
||||
|
Reference in New Issue
Block a user