116 lines
3.7 KiB
HTML
116 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<script src="static/Chart.bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="chart-container" style="position: relative; height:40vh; width:80vw; margin: auto">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
<script type="application/javascript">
|
|
const humidityColor = 'rgb(45,141,45)';
|
|
const tempColor = 'rgb(0,134,222)';
|
|
const co2Color = 'rgb(194,30,30)';
|
|
|
|
async function initChart() {
|
|
const ctx = document.getElementById('myChart').getContext('2d');
|
|
const data = await fetch("data/");
|
|
console.log(data);
|
|
const {humidity, temp, co2} = transformData(await data.json());
|
|
const myChart = Chart.Line(ctx, {
|
|
data: {
|
|
datasets: [{
|
|
label: 'Humidity',
|
|
data: humidity,
|
|
borderColor: humidityColor,
|
|
fill: false,
|
|
yAxisID: 'y-axis-3',
|
|
}, {
|
|
label: 'Temperature',
|
|
data: temp,
|
|
borderColor: tempColor,
|
|
fill: false,
|
|
yAxisID: 'y-axis-2',
|
|
}, {
|
|
label: 'Co2 Concentration',
|
|
data: co2,
|
|
borderColor: co2Color,
|
|
fill: false,
|
|
yAxisID: 'y-axis-1',
|
|
}]
|
|
},
|
|
options: {
|
|
stacked: false,
|
|
title: {
|
|
display: true,
|
|
text: 'Ledda\'s Room Climate',
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
unit: 'second'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
id: 'y-axis-1',
|
|
ticks: {
|
|
fontColor: co2Color,
|
|
min: 300,
|
|
max: 1200,
|
|
},
|
|
}, {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
id: 'y-axis-2',
|
|
ticks: {
|
|
fontColor: tempColor,
|
|
min: 5,
|
|
max: 40,
|
|
},
|
|
gridLines: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}, {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
id: 'y-axis-3',
|
|
ticks: {
|
|
fontColor: humidityColor,
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
gridLines: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}],
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
function transformData(json) {
|
|
const humidity = [];
|
|
const co2 = [];
|
|
const temp = [];
|
|
for (const snapshot of json.snapshots) {
|
|
co2.push({x: snapshot.time, y: snapshot.co2});
|
|
temp.push({x: snapshot.time, y: snapshot.temp});
|
|
humidity.push({x: snapshot.time, y: snapshot.humidity});
|
|
}
|
|
return {humidity, co2, temp};
|
|
}
|
|
|
|
initChart();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |