makes class for graphs
This commit is contained in:
@@ -62,7 +62,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- class="nodeData" -->
|
</div> <!-- class="nodeData" -->
|
||||||
|
<!-- Make a new flexcontainer for the graphs and API request time -->
|
||||||
|
<div class="flex-graph">
|
||||||
|
<div>
|
||||||
|
<p>Live graph:</p>
|
||||||
|
<div id="liveGraph1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- class="nodeData" -->
|
||||||
<!-- Include the js file -->
|
<!-- Include the js file -->
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
87
web/main.js
87
web/main.js
@@ -1,33 +1,16 @@
|
|||||||
let data;
|
let intervalDelay = 5000;
|
||||||
let measurements;
|
let newData = true;
|
||||||
let date;
|
|
||||||
let value;
|
|
||||||
let newArrayTemp = [];
|
|
||||||
let newArrayHumid = [];
|
|
||||||
let newArrayLight = [];
|
|
||||||
let timeArray = []; // Array to store time values
|
|
||||||
let dateArray = [1, 2, 3];
|
|
||||||
let valueArray = [1, 2, 3, 4, 5];
|
|
||||||
let valueArray2 = [1, 2, 3, 4, 5];
|
|
||||||
let valueArray3 = [1, 2, 3, 4, 5];
|
|
||||||
let valueArray4 = [1, 2, 3, 4, 5];
|
|
||||||
let newValueArray = [4, 5, 6];
|
|
||||||
let myValue = 1;
|
|
||||||
let intervalDelay = 50;
|
|
||||||
|
|
||||||
|
|
||||||
class liveGraph {
|
class liveGraph {
|
||||||
|
// Constructor to initialize the graph
|
||||||
constructor() {
|
constructor(id) {
|
||||||
this.timeArray = [];
|
this.timeArray = [4, 5, 6, 7, 9];
|
||||||
this.dateArray = [];
|
this.valueArray = [1, 3, 4, 8, 10];
|
||||||
this.valueArray = [];
|
this.cnt = 0;
|
||||||
}
|
this.nodeId = id;
|
||||||
pushArray(array) {
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
array.push(Math.random() * 10);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fuction to create a graph
|
||||||
makeGraph() {
|
makeGraph() {
|
||||||
Plotly.plot("liveGraph", [
|
Plotly.plot("liveGraph", [
|
||||||
{
|
{
|
||||||
@@ -40,34 +23,34 @@ class liveGraph {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Function to update the graph with new values
|
||||||
updateGraph() {
|
updateGraph() {
|
||||||
let cnt = 0;
|
let time = new Date();
|
||||||
let interval = setInterval(function () {
|
this.timeArray.push(new Date());
|
||||||
var time = new Date();
|
this.valueArray.push(Math.random());
|
||||||
this.timeArray.push(new Date());
|
let update = {
|
||||||
this.pushArray(this.valueArray);
|
x: [[this.timeArray]],
|
||||||
var update = {
|
y: [[this.valueArray]],
|
||||||
x: [[this.timeArray]],
|
};
|
||||||
y: [[this.newValueArray]],
|
let olderTime = time.setMinutes(time.getMinutes() - 1);
|
||||||
};
|
let futureTime = time.setMinutes(time.getMinutes() + 1);
|
||||||
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
let minuteView = {
|
||||||
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
xaxis: {
|
||||||
var minuteView = {
|
type: "date",
|
||||||
xaxis: {
|
range: [olderTime, futureTime],
|
||||||
type: "date",
|
},
|
||||||
range: [olderTime, futureTime],
|
};
|
||||||
},
|
Plotly.relayout("liveGraph", minuteView);
|
||||||
};
|
if (this.cnt === 10) clearInterval(interval);
|
||||||
Plotly.relayout("liveGraph", minuteView);
|
|
||||||
if (cnt === 10) clearInterval(interval);
|
|
||||||
}, intervalDelay);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let graph = new liveGraph();
|
let graph1 = new liveGraph(1);
|
||||||
graph.makeGraph();
|
|
||||||
graph.updateGraph();
|
|
||||||
graph.pushArray();
|
|
||||||
console.log("test");
|
|
||||||
|
|
||||||
|
graph1.makeGraph();
|
||||||
|
|
||||||
|
let interval = setInterval(function () {
|
||||||
|
if (newData) {
|
||||||
|
graph1.updateGraph();
|
||||||
|
}
|
||||||
|
}, intervalDelay);
|
Reference in New Issue
Block a user