54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
class liveGraph {
|
|
// Constructor to initialize the graph
|
|
constructor(id) {
|
|
this.timeArray = [];
|
|
this.tempArray = [];
|
|
this.humiArray = [];
|
|
this.eco2Array = [];
|
|
this.tvocArray = [];
|
|
this.cnt = 0;
|
|
this.nodeId = "liveGraph" + id;
|
|
}
|
|
|
|
// Fuction to create a graph
|
|
makeGraph() {
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.tempArray,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "Temperature",
|
|
},
|
|
]);
|
|
}
|
|
|
|
// Function to update the graph with new values
|
|
updateGraph() {
|
|
let time = new Date();
|
|
this.timeArray.push(new Date());
|
|
|
|
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.nodeId, minuteView);
|
|
if (this.cnt === 10) clearInterval(interval);
|
|
}
|
|
|
|
updateData(temperature, humidity, eCO2, TVOC) {
|
|
// Update the graph
|
|
this.tempArray.push(temperature);
|
|
this.humiArray.push(humidity);
|
|
this.eco2Array.push(eCO2);
|
|
this.tvocArray.push(TVOC);
|
|
}
|
|
} |