added charts

2024-06-23 00:42:26 +02:00
parent 961fba65be
commit 72762340ce
10 changed files with 518 additions and 12 deletions
--- a/Charts/index.html
+++ b/Charts/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Geräte-Diagramme</title>
+  <style>
+    body {
+      background-color: #121212;
+      color: #ffffff;
+      font-family: Arial, sans-serif;
+    }
+    .chart-container {
+      width: 80%;
+      margin: 0 auto;
+      padding: 20px;
+      background: #1e1e1e;
+      padding: 10px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
+    .chart {
+      padding: 10px;
+    }
+    .device-info {
+      margin-bottom: 10px;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <h1>Geräte-Diagramme</h1>
+  <div id="charts"></div>
+
+  <script>
+    fetch('data.json')
+      .then(response => response.json())
+      .then(jsonData => {
+        const deviceDataMap = new Map();
+        jsonData.forEach(entry => {
+          const deviceMac = entry.device.mac;
+          if (!deviceDataMap.has(deviceMac)) {
+            deviceDataMap.set(deviceMac, {info: entry.device, data: []});
+          }
+          deviceDataMap.get(deviceMac).data.push(entry.data);
+        });
+
+        deviceDataMap.forEach((deviceData, deviceMac) => createChart(deviceData));
+      })
+      .catch(error => console.error('Error loading data:', error));
+
+    function createChart(deviceData) {
+      const labels = deviceData.data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
+      const temperatures = deviceData.data.map(entry => entry.temperature);
+      const humidities = deviceData.data.map(entry => entry.humidity);
+
+      const container = document.createElement('div');
+      container.className = 'chart-container';
+
+      const deviceInfo = document.createElement('div');
+      deviceInfo.className = 'device-info';
+      deviceInfo.innerHTML = `<strong>${deviceData.info.name}</strong> (${deviceData.info.room})`;
+      container.appendChild(deviceInfo);
+
+      const ctx = document.createElement('canvas');
+      ctx.className = 'chart';
+      container.appendChild(ctx);
+
+      document.getElementById('charts').appendChild(container);
+
+      new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: 'Temperatur (°C)',
+              data: temperatures,
+              borderColor: 'rgba(75, 192, 192, 1)',
+              backgroundColor: 'rgba(75, 192, 192, 0.2)',
+              yAxisID: 'y-axis-temp'
+            },
+            {
+              label: 'Feuchtigkeit (%)',
+              data: humidities,
+              borderColor: 'rgba(153, 102, 255, 1)',
+              backgroundColor: 'rgba(153, 102, 255, 0.2)',
+              yAxisID: 'y-axis-humidity'
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          scales: {
+            yAxes: [
+              {
+                id: 'y-axis-temp',
+                type: 'linear',
+                position: 'left',
+                ticks: {
+                  beginAtZero: true,
+                  fontColor: 'white'
+                },
+                scaleLabel: {
+                  display: true,
+                  labelString: 'Temperatur (°C)',
+                  fontColor: 'white'
+                }
+              },
+              {
+                id: 'y-axis-humidity',
+                type: 'linear',
+                position: 'right',
+                ticks: {
+                  beginAtZero: true,
+                  fontColor: 'white'
+                },
+                scaleLabel: {
+                  display: true,
+                  labelString: 'Feuchtigkeit (%)',
+                  fontColor: 'white'
+                }
+              }
+            ],
+            xAxes: [
+              {
+                ticks: {
+                  fontColor: 'white'
+                }
+              }
+            ]
+          },
+          legend: {
+            labels: {
+              fontColor: 'white'
+            }
+          }
+        }
+      });
+    }
+  </script>
+</body>
+</html>