82 lines
2.0 KiB
JavaScript
82 lines
2.0 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",
|
|
},
|
|
]);
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.humiArray,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "Humidity",
|
|
},
|
|
]);
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.eco2Array,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "eCO2",
|
|
},
|
|
]);
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.tvocArray,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "TVOC",
|
|
},
|
|
]);
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
} |