80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
class Graph{
|
|
constructor(id) {
|
|
this.id = "graph" + id;
|
|
this.timeArray = [];
|
|
}
|
|
|
|
// Function to create a graph
|
|
makeGraph(line, lineColor, name) {
|
|
let lineArray;
|
|
switch (line) {
|
|
case "temp":
|
|
lineArray = this.tempArray;
|
|
break;
|
|
case "humi":
|
|
lineArray = this.humiArray;
|
|
break;
|
|
case "eco2":
|
|
lineArray = this.eco2Array;
|
|
break;
|
|
case "tvoc":
|
|
lineArray = this.tvocArray;
|
|
break;
|
|
default:
|
|
console.error("Invalid line");
|
|
}
|
|
this.timeArray.push(new Date());
|
|
Plotly.plot(this.id, [
|
|
{
|
|
x: this.timeArray,
|
|
y: lineArray,
|
|
mode: "lines",
|
|
line: { color: lineColor },
|
|
name: name,
|
|
},
|
|
]);
|
|
}
|
|
}
|
|
|
|
class LiveGraph extends Graph{
|
|
// Constructor to initialize the graph
|
|
constructor(id){
|
|
super(id);
|
|
this.tempArray = [];
|
|
this.humiArray = [];
|
|
this.eco2Array = [];
|
|
this.tvocArray = [];
|
|
this.cnt = 0;
|
|
}
|
|
// Function to update the graph with new values got from updateData function
|
|
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.id, minuteView);
|
|
if (this.cnt === 10) clearInterval(interval);
|
|
}
|
|
// function to get the new data for graph
|
|
updateData(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);
|
|
}
|
|
}
|
|
|