64 lines
1.2 KiB
JavaScript
64 lines
1.2 KiB
JavaScript
// Make lines in the graph of the live data
|
|
Plotly.plot("liveGraph", [
|
|
{
|
|
x: timeArray, // Use timeArray as x values
|
|
y: newArrayTemp,
|
|
mode: "lines",
|
|
line: { color: "#80CAF6" },
|
|
name: "Temperature",
|
|
},
|
|
{
|
|
x: timeArray, // Use timeArray as x values
|
|
y: newArrayHumid,
|
|
mode: "lines",
|
|
line: { color: "#FFA500" },
|
|
name: "Humidity",
|
|
},
|
|
{
|
|
x: timeArray, // Use timeArray as x values
|
|
y: newArrayLight,
|
|
mode: "lines",
|
|
line: { color: "#00FF00" },
|
|
name: "Light / 100",
|
|
},
|
|
]);
|
|
|
|
let cnt = 0;
|
|
|
|
// Update the graph every 1 ms
|
|
let interval = setInterval(function () {
|
|
var time = new Date();
|
|
|
|
var update = {
|
|
x: [[time]],
|
|
y: [[newArrayTemp], [newArrayHumid], [newArrayLight]],
|
|
};
|
|
|
|
var olderTime = time.setMinutes(time.getMinutes() - 1);
|
|
var futureTime = time.setMinutes(time.getMinutes() + 1);
|
|
|
|
var minuteView = {
|
|
xaxis: {
|
|
type: "date",
|
|
range: [olderTime, futureTime],
|
|
},
|
|
};
|
|
Plotly.relayout("liveGraph", minuteView);
|
|
|
|
apiGraph = document.getElementById("apiGraph");
|
|
Plotly.newPlot(
|
|
apiGraph,
|
|
[
|
|
{
|
|
x: dateArray,
|
|
y: valueArray,
|
|
},
|
|
],
|
|
{
|
|
margin: { t: 0 },
|
|
}
|
|
);
|
|
|
|
if (cnt === 100) clearInterval(interval);
|
|
}, 1);
|