Frontend weiterarbeit, Client Server datenaustausch und sync, fertiggestellt.

2024-04-19 16:48:23 +02:00
parent 04ad35a91f
commit cd2f302eb1
11 changed files with 228 additions and 112 deletions
--- a/server/hey.html
+++ b/server/hey.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Highcharts Beispiel</title>
+  <!-- Highcharts CDN -->
+  <script src="https://code.highcharts.com/highcharts.js"></script>
+  <script src="https://code.highcharts.com/modules/exporting.js"></script>
+  <script src="https://code.highcharts.com/modules/export-data.js"></script>
+  <script src="https://code.highcharts.com/modules/accessibility.js"></script>
+</head>
+<body>
+  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Laden der JSON-Daten
+      fetch('Data/BasToken.json')
+        .then(response => response.json())
+        .then(data => {
+          const seriesData = [];
+
+          // Iteration über die Daten, um die Serien zu erstellen
+          Object.keys(data).forEach(date => {
+            const producerValues = data[date].producer_values;
+            const meterValues = data[date].meter_values;
+            const userValues = data[date].user_values;
+
+            seriesData.push({
+              name: date,
+              data: [
+                producerValues.day_energy,
+                producerValues.pac,
+                producerValues.total_energy,
+                producerValues.year_energy,
+                meterValues.Current_AC_Phase_1,
+                meterValues.Current_AC_Phase_2,
+                meterValues.Current_AC_Phase_3,
+                meterValues.PowerReal_P_Sum,
+                userValues.Current_Power,
+                userValues.Used_Energy,
+                userValues.Current_Prio,
+                userValues.Current_deltaPower,
+                userValues.measured_Temp
+              ]
+            });
+          });
+
+          // Erstellen des Diagramms
+          Highcharts.chart('container', {
+            chart: {
+              type: 'line'
+            },
+            title: {
+              text: 'Daten'
+            },
+            xAxis: {
+              categories: [
+                'producer_values.day_energy',
+                'producer_values.pac',
+                'producer_values.total_energy',
+                'producer_values.year_energy',
+                'meter_values.Current_AC_Phase_1',
+                'meter_values.Current_AC_Phase_2',
+                'meter_values.Current_AC_Phase_3',
+                'meter_values.PowerReal_P_Sum',
+                'user_values.Current_Power',
+                'user_values.Used_Energy',
+                'user_values.Current_Prio',
+                'user_values.Current_deltaPower',
+                'user_values.measured_Temp'
+              ],
+              title: {
+                text: 'Attribute'
+              }
+            },
+            yAxis: {
+              title: {
+                text: 'Wert'
+              }
+            },
+            series: seriesData
+          });
+        })
+        .catch(error => console.error('Fehler beim Laden der Daten:', error));
+    });
+  </script>
+</body>
+</html>