79 lines
2.2 KiB
JavaScript
79 lines
2.2 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() {
|
|
// Create a new line for temperature
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.tempArray,
|
|
mode: "lines",
|
|
line: { color: "#FF0000" },
|
|
name: "Temperature",
|
|
},
|
|
]);
|
|
// Create a new line for humidity
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.humiArray,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "Humidity",
|
|
},
|
|
]);
|
|
// Create a new line for eCO2
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.eco2Array,
|
|
mode: "lines",
|
|
line: { color: "#FFA500" },
|
|
name: "eCO2 / 10",
|
|
},
|
|
]);
|
|
// Create a new line for TVOC
|
|
Plotly.plot(this.nodeId, [
|
|
{
|
|
x: this.timeArray, // Use timeArray as x values
|
|
y: this.tvocArray,
|
|
mode: "lines",
|
|
line: { color: "#000000" },
|
|
name: "TVOC / 10",
|
|
},
|
|
]);
|
|
}
|
|
|
|
// Function to update the graph with new values got from updateData function
|
|
updateGraph(temperature, humidity, eCO2, TVOC) {
|
|
// Update the graph
|
|
this.tempArray.push(temperature);
|
|
this.humiArray.push(humidity);
|
|
this.eco2Array.push(eCO2 / 10);
|
|
this.tvocArray.push(TVOC / 10);
|
|
|
|
let time = new Date();
|
|
this.timeArray.push(new Date());
|
|
|
|
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);
|
|
}
|
|
// function to get the new data for graph
|
|
} |