adds class for graph
This commit is contained in:
167
web/main.js
167
web/main.js
@@ -5,7 +5,7 @@ let value;
|
|||||||
let newArrayTemp = [];
|
let newArrayTemp = [];
|
||||||
let newArrayHumid = [];
|
let newArrayHumid = [];
|
||||||
let newArrayLight = [];
|
let newArrayLight = [];
|
||||||
let timeArray = []; // Array to store time values`
|
let timeArray = []; // Array to store time values
|
||||||
let dateArray = [1, 2, 3];
|
let dateArray = [1, 2, 3];
|
||||||
let valueArray = [1, 2, 3, 4, 5];
|
let valueArray = [1, 2, 3, 4, 5];
|
||||||
let valueArray2 = [1, 2, 3, 4, 5];
|
let valueArray2 = [1, 2, 3, 4, 5];
|
||||||
@@ -15,77 +15,43 @@ let newValueArray = [4, 5, 6];
|
|||||||
let myValue = 1;
|
let myValue = 1;
|
||||||
let intervalDelay = 50;
|
let intervalDelay = 50;
|
||||||
|
|
||||||
//const timeArray = [1,2,3,4];
|
|
||||||
//const dateArray = [5,6,7,8];
|
class liveGraph {
|
||||||
//const valueArray = [1,1,1,3];
|
|
||||||
function pushArray(array) {
|
constructor() {
|
||||||
|
this.timeArray = [];
|
||||||
|
this.dateArray = [];
|
||||||
|
this.valueArray = [];
|
||||||
|
}
|
||||||
|
pushArray(array) {
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
array.push(Math.random() * 10);
|
array.push(Math.random() * 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Make lines in the graph of the live data
|
makeGraph() {
|
||||||
Plotly.plot("liveGraph", [
|
Plotly.plot("liveGraph", [
|
||||||
{
|
{
|
||||||
x: timeArray, // Use timeArray as x values
|
x: this.timeArray, // Use timeArray as x values
|
||||||
y: valueArray,
|
y: this.valueArray,
|
||||||
mode: "lines",
|
mode: "lines",
|
||||||
line: { color: "#80CAF6" },
|
line: { color: "#80CAF6" },
|
||||||
name: "Temperature",
|
name: "Temperature",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
// Make lines in the graph of the live data
|
updateGraph() {
|
||||||
Plotly.plot("liveGraph2", [
|
let cnt = 0;
|
||||||
{
|
let interval = setInterval(function () {
|
||||||
x: timeArray, // Use timeArray as x values
|
|
||||||
y: valueArray2,
|
|
||||||
mode: "lines",
|
|
||||||
line: { color: "#80CAF6" },
|
|
||||||
name: "Temperature",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Make lines in the graph of the live data
|
|
||||||
Plotly.plot("liveGraph3", [
|
|
||||||
{
|
|
||||||
x: timeArray, // Use timeArray as x values
|
|
||||||
y: valueArray3,
|
|
||||||
mode: "lines",
|
|
||||||
line: { color: "#80CAF6" },
|
|
||||||
name: "Temperature",
|
|
||||||
},
|
|
||||||
]);// Make lines in the graph of the live data
|
|
||||||
Plotly.plot("liveGraph4", [
|
|
||||||
{
|
|
||||||
x: timeArray, // Use timeArray as x values
|
|
||||||
y: valueArray4,
|
|
||||||
mode: "lines",
|
|
||||||
line: { color: "#80CAF6" },
|
|
||||||
name: "Temperature",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Make lines in the graph of the live data
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let cnt = 0;
|
|
||||||
|
|
||||||
// Update the graph every 1 ms
|
|
||||||
let interval = setInterval(function () {
|
|
||||||
var time = new Date();
|
var time = new Date();
|
||||||
timeArray.push(new Date());
|
this.timeArray.push(new Date());
|
||||||
|
this.pushArray(this.valueArray);
|
||||||
pushArray(valueArray);
|
|
||||||
|
|
||||||
var update = {
|
var update = {
|
||||||
x: [[timeArray]],
|
x: [[this.timeArray]],
|
||||||
y: [[newValueArray]],
|
y: [[this.newValueArray]],
|
||||||
};
|
};
|
||||||
|
|
||||||
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
||||||
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
||||||
|
|
||||||
var minuteView = {
|
var minuteView = {
|
||||||
xaxis: {
|
xaxis: {
|
||||||
type: "date",
|
type: "date",
|
||||||
@@ -93,84 +59,15 @@ let interval = setInterval(function () {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
Plotly.relayout("liveGraph", minuteView);
|
Plotly.relayout("liveGraph", minuteView);
|
||||||
|
|
||||||
if (cnt === 10) clearInterval(interval);
|
if (cnt === 10) clearInterval(interval);
|
||||||
}, intervalDelay);
|
}, intervalDelay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Update the graph every 1 ms
|
let graph = new liveGraph();
|
||||||
let interval2 = setInterval(function () {
|
graph.makeGraph();
|
||||||
var time = new Date();
|
graph.updateGraph();
|
||||||
timeArray.push(new Date());
|
graph.pushArray();
|
||||||
|
console.log("test");
|
||||||
|
|
||||||
pushArray(valueArray2);
|
|
||||||
|
|
||||||
var update = {
|
|
||||||
x: [[time]],
|
|
||||||
y: [[newValueArray]],
|
|
||||||
};
|
|
||||||
|
|
||||||
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
|
||||||
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
|
||||||
|
|
||||||
var minuteView = {
|
|
||||||
xaxis: {
|
|
||||||
type: "date",
|
|
||||||
range: [olderTime, futureTime],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Plotly.relayout("liveGraph2", minuteView);
|
|
||||||
|
|
||||||
if (cnt === 1000) clearInterval(interval2);
|
|
||||||
}, intervalDelay);
|
|
||||||
|
|
||||||
// Update the graph every 1 ms
|
|
||||||
let interval3 = setInterval(function () {
|
|
||||||
var time = new Date();
|
|
||||||
timeArray.push(new Date());
|
|
||||||
|
|
||||||
pushArray(valueArray3);
|
|
||||||
|
|
||||||
var update = {
|
|
||||||
x: [[time]],
|
|
||||||
y: [[newValueArray]],
|
|
||||||
};
|
|
||||||
|
|
||||||
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
|
||||||
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
|
||||||
|
|
||||||
var minuteView = {
|
|
||||||
xaxis: {
|
|
||||||
type: "date",
|
|
||||||
range: [olderTime, futureTime],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Plotly.relayout("liveGraph3", minuteView);
|
|
||||||
|
|
||||||
if (cnt === 1000) clearInterval(interval3);
|
|
||||||
}, intervalDelay);
|
|
||||||
|
|
||||||
// Update the graph every 1 ms
|
|
||||||
let interval4 = setInterval(function () {
|
|
||||||
var time = new Date();
|
|
||||||
timeArray.push(new Date());
|
|
||||||
|
|
||||||
pushArray(valueArray4);
|
|
||||||
|
|
||||||
var update = {
|
|
||||||
x: [[time]],
|
|
||||||
y: [[newValueArray]],
|
|
||||||
};
|
|
||||||
|
|
||||||
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
|
||||||
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
|
||||||
|
|
||||||
var minuteView = {
|
|
||||||
xaxis: {
|
|
||||||
type: "date",
|
|
||||||
range: [olderTime, futureTime],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Plotly.relayout("liveGraph4", minuteView);
|
|
||||||
|
|
||||||
if (cnt === 1000) clearInterval(interval4);
|
|
||||||
}, intervalDelay);
|
|
Reference in New Issue
Block a user