Refactor graph creation and update methods
This commit is contained in:
@@ -136,29 +136,32 @@ class DataProcessor {
|
|||||||
// You can add more filtering methods based on different criteria if needed
|
// You can add more filtering methods based on different criteria if needed
|
||||||
update(data) {
|
update(data) {
|
||||||
this.data = data;
|
this.data = data;
|
||||||
|
this.graph;
|
||||||
console.log("Data updated");
|
console.log("Data updated");
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
graph() {
|
makeGraph() {
|
||||||
let div = document.createElement("div");
|
let div = document.createElement("div");
|
||||||
div.setAttribute("id", "graph1");
|
div.setAttribute("id", "graph1");
|
||||||
document.body.appendChild(div);
|
document.body.appendChild(div);
|
||||||
let graph = new Graph(1);
|
this.graph = new Graph(1);
|
||||||
graph.makeGraph("temp", "red", "Temperature");
|
this.graph.makeGraph("temp", "red", "Temperature");
|
||||||
graph.makeGraph("humi", "blue", "Humidity");
|
this.graph.makeGraph("humi", "blue", "Humidity");
|
||||||
graph.makeGraph("eco2", "green", "eCO2");
|
this.graph.makeGraph("eco2", "green", "eCO2");
|
||||||
graph.makeGraph("tvoc", "#F5G644", "TVOC");
|
this.graph.makeGraph("tvoc", "#F5G644", "TVOC");
|
||||||
|
}
|
||||||
|
|
||||||
graph.updateData(this.data[0].Type, this.data[0].Value);
|
updateGraph() {
|
||||||
|
this.graph.updateData(this.data[0].Type, this.data[0].Value);
|
||||||
console.log(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);
|
this.graph.updateData(this.data[1].Type, this.data[1].Value);
|
||||||
console.log(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);
|
this.graph.updateData(this.data[2].Type, this.data[2].Value);
|
||||||
console.log(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);
|
this.graph.updateData(this.data[3].Type, this.data[3].Value);
|
||||||
console.log(this.data[3].Type, this.data[3].Value);
|
console.log(this.data[3].Type, this.data[3].Value);
|
||||||
|
|
||||||
graph.updateGraph();
|
this.graph.updateGraph();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -119,17 +119,12 @@ function fetchData() {
|
|||||||
.then((data) => {
|
.then((data) => {
|
||||||
createFilterContainer();
|
createFilterContainer();
|
||||||
processor.update(data);
|
processor.update(data);
|
||||||
processor.graph();
|
processor.makeGraph();
|
||||||
|
processor.updateGraph();
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("Error fetching data:", error);
|
console.error("Error fetching data:", error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
|
|
||||||
// Function to create the graph
|
|
||||||
function createGraph() {
|
|
||||||
const graph = new Graph("graph");
|
|
||||||
graph.updateGraph();
|
|
||||||
}
|
|
Reference in New Issue
Block a user