108 lines
4.3 KiB
JavaScript
108 lines
4.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
fetch('data.json')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
const devices = {};
|
|
|
|
data.forEach(entry => {
|
|
const mac = entry.device.mac;
|
|
if (!devices[mac]) {
|
|
devices[mac] = {
|
|
temperatureData: [],
|
|
humidityData: [],
|
|
labels: [],
|
|
name: entry.device.name,
|
|
room: entry.device.room
|
|
};
|
|
}
|
|
devices[mac].labels.push(new Date(entry.data.timestamp));
|
|
devices[mac].temperatureData.push(entry.data.temperature);
|
|
devices[mac].humidityData.push(entry.data.humidity);
|
|
});
|
|
|
|
const chartsContainer = document.getElementById('chartsContainer');
|
|
|
|
Object.keys(devices).forEach(mac => {
|
|
const device = devices[mac];
|
|
|
|
const chartContainer = document.createElement('div');
|
|
chartContainer.className = 'chart-container';
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.id = `chart-${mac}`;
|
|
|
|
const title = document.createElement('h3');
|
|
title.textContent = `Device ${device.name} in ${device.room}`;
|
|
|
|
chartContainer.appendChild(title);
|
|
chartContainer.appendChild(canvas);
|
|
chartsContainer.appendChild(chartContainer);
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: device.labels,
|
|
datasets: [
|
|
{
|
|
label: 'Temperatur (°C)',
|
|
data: device.temperatureData,
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderWidth: 1,
|
|
yAxisID: 'y1'
|
|
},
|
|
{
|
|
label: 'Luftfeuchtigkeit (%)',
|
|
data: device.humidityData,
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderWidth: 1,
|
|
yAxisID: 'y2'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'minute',
|
|
tooltipFormat: 'll HH:mm'
|
|
}
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
position: 'left',
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Temperatur (°C)'
|
|
}
|
|
},
|
|
y2: {
|
|
type: 'linear',
|
|
position: 'right',
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Luftfeuchtigkeit (%)'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})
|
|
.catch(error => console.error('Error loading JSON data:', error));
|
|
});
|