47 lines
1.1 KiB
HTML
47 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="margin: 0; height: 100%;">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Sensoren grafiek</title>
|
|
</head>
|
|
<body style="margin: 0; height: 100%;">
|
|
<div style="position: relative; height: 100%; width: 100%;">
|
|
<canvas id="sensorChart"></canvas>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
|
|
|
<script>
|
|
(async () => {
|
|
const ctx = document.getElementById("sensorChart");
|
|
|
|
const now = Math.floor(Date.now() / 1000)
|
|
|
|
const jsonData = (await (await fetch(`/api/data/${now-60*10}/${now}`)).json());
|
|
|
|
const data = {
|
|
datasets: Object.entries(jsonData).map(
|
|
x => ({
|
|
label: x[0],
|
|
data: x[1]["data"].map(dataPoint => ({x: dataPoint.time*1000, y: dataPoint.value}))
|
|
})
|
|
)
|
|
}
|
|
|
|
new Chart(ctx, {
|
|
type: "line",
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: 'time'
|
|
}
|
|
},
|
|
responsive: true,
|
|
}
|
|
});
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html> |