You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
HTML
65 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Temperature Chart</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<meta http-equiv="refresh" content="60">
|
|
</head>
|
|
|
|
<body>
|
|
<select id="hours" onchange="fetchData()">
|
|
<option value="1" selected>Last 1 hour</option>
|
|
<option value="12">Last 12 hours</option>
|
|
<option value="24">Last 24 hours</option>
|
|
</select>
|
|
<canvas id="chart"></canvas>
|
|
<script>
|
|
const ctx = document.getElementById('chart').getContext('2d');
|
|
const hoursSelect = document.getElementById('hours');
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Temperature',
|
|
data: [],
|
|
fill: false,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Time (UTC)'
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Temperature'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
async function fetchData() {
|
|
const hours = hoursSelect.value;
|
|
const response = await fetch(`/data?hours=${hours}`);
|
|
const data = await response.json();
|
|
chart.data.labels = data.times.map(time => new Date(time).toLocaleString());
|
|
chart.data.datasets[0].data = data.temperatures;
|
|
chart.update();
|
|
}
|
|
|
|
fetchData();
|
|
setInterval(fetchData, 60000);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|