From 2907f5de18768f5490172f70446d818bc39889c5 Mon Sep 17 00:00:00 2001
From: rxf <rexfue@gmail.com>
Date: Sat, 24 Jan 2026 20:42:04 +0100
Subject: [PATCH] Versuche mit HighCharts

---
 wetterstation.py | 225 +++++++++++++++++++++++++----------------------
 1 file changed, 118 insertions(+), 107 deletions(-)

diff --git a/wetterstation.py b/wetterstation.py
index 33aa7d7..687c8c4 100644
--- a/wetterstation.py
+++ b/wetterstation.py
@@ -252,7 +252,9 @@ def create_html_template():
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wetterstation</title>
-    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    <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>
     <style>
         * {
             margin: 0;
@@ -382,7 +384,18 @@ def create_html_template():
         let currentPeriod = 'day';
         const DEFAULT_CHART_HEIGHT = 360;
         const POLAR_CHART_HEIGHT = 420;
-        const plotConfig = { responsive: true, displayModeBar: false };
+        
+        // HighCharts globale Einstellungen
+        Highcharts.setOptions({
+            lang: {
+                months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+                         'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+                shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
+                              'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+                weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+                shortWeekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+            }
+        });
         
         function switchPeriod(period) {
             currentPeriod = period;
@@ -417,122 +430,120 @@ def create_html_template():
             const data = apiData.data;
             const rainData = apiData.rain_hourly;
             
-            const timestamps = data.map(d => d.datetime);
+            // Formatiere Timestamps: nur Uhrzeit ohne Datum und Sekunden (HH:MM)
+            const timestamps = data.map(d => d.datetime.substring(11, 16));
+            const rainTimestamps = rainData.map(d => d.hour.substring(11, 16));
+            
+            // Berechne step für x-Achsen Labels: zeige nur alle 30 Minuten eine Zeit
+            // Bei 48 Labels pro Tag (alle 30 Min) ergibt sich der step aus der Datenmenge
+            const step = Math.max(1, Math.ceil(data.length / 48));
+            const rainStep = Math.max(1, Math.ceil(rainData.length / 48));
             
             // Temperatur
-            Plotly.newPlot('temp-chart', [{
-                x: timestamps,
-                y: data.map(d => d.temperature),
-                type: 'scatter',
-                mode: 'lines',
-                name: 'Temperatur',
-                line: {color: '#ff6b6b', width: 3}
-            }], {
-                title: '🌡️ Temperatur (°C)',
-                xaxis: {title: 'Zeit'},
-                yaxis: {title: '°C'},
-                margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: DEFAULT_CHART_HEIGHT
-            }, plotConfig);
+            Highcharts.chart('temp-chart', {
+                chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '🌡️ Temperatur (°C)' },
+                xAxis: { categories: timestamps, title: { text: 'Zeit' }, labels: { step: step } },
+                yAxis: { title: { text: '°C' } },
+                legend: { enabled: true },
+                series: [{
+                    name: 'Temperatur',
+                    data: data.map(d => d.temperature),
+                    color: '#ff6b6b',
+                    lineWidth: 2
+                }],
+                credits: { enabled: false }
+            });
             
             // Luftfeuchtigkeit
-            Plotly.newPlot('humidity-chart', [{
-                x: timestamps,
-                y: data.map(d => d.humidity),
-                type: 'scatter',
-                mode: 'lines',
-                name: 'Luftfeuchtigkeit',
-                line: {color: '#4ecdc4', width: 3}
-            }], {
-                title: '💧 Luftfeuchtigkeit (%)',
-                xaxis: {title: 'Zeit'},
-                yaxis: {title: '%'},
-                margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: DEFAULT_CHART_HEIGHT
-            }, plotConfig);
+            Highcharts.chart('humidity-chart', {
+                chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '💧 Luftfeuchtigkeit (%)' },
+                xAxis: { categories: timestamps, title: { text: 'Zeit' }, labels: { step: step } },
+                yAxis: { title: { text: '%' } },
+                legend: { enabled: true },
+                series: [{
+                    name: 'Luftfeuchtigkeit',
+                    data: data.map(d => d.humidity),
+                    color: '#4ecdc4',
+                    lineWidth: 2
+                }],
+                credits: { enabled: false }
+            });
             
             // Luftdruck
-            Plotly.newPlot('pressure-chart', [{
-                x: timestamps,
-                y: data.map(d => d.pressure),
-                type: 'scatter',
-                mode: 'lines',
-                name: 'Luftdruck',
-                line: {color: '#95e1d3', width: 3}
-            }], {
-                title: '🎈 Luftdruck (hPa)',
-                xaxis: {title: 'Zeit'},
-                yaxis: {title: 'hPa'},
-                margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: DEFAULT_CHART_HEIGHT
-            }, plotConfig);
+            Highcharts.chart('pressure-chart', {
+                chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '🎈 Luftdruck (hPa)' },
+                xAxis: { categories: timestamps, title: { text: 'Zeit' } },
+                yAxis: { title: { text: 'hPa' } },
+                legend: { enabled: true },
+                series: [{
+                    name: 'Luftdruck',
+                    data: data.map(d => d.pressure),
+                    color: '#95e1d3',
+                    lineWidth: 2
+                }],
+                credits: { enabled: false }
+            });
             
             // Regenmenge pro Stunde
-            Plotly.newPlot('rain-chart', [{
-                x: rainData.map(d => d.hour),
-                y: rainData.map(d => d.rain),
-                type: 'bar',
-                name: 'Regen',
-                marker: {color: '#3498db'}
-            }], {
-                title: '🌧️ Regenmenge pro Stunde (mm)',
-                xaxis: {title: 'Zeit'},
-                yaxis: {title: 'mm'},
-                margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: DEFAULT_CHART_HEIGHT
-            }, plotConfig);
+            Highcharts.chart('rain-chart', {
+                chart: { type: 'column', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '🌧️ Regenmenge pro Stunde (mm)' },
+                xAxis: { categories: rainTimestamps, title: { text: 'Zeit' } },
+                yAxis: { title: { text: 'mm' } },
+                legend: { enabled: false },
+                series: [{
+                    name: 'Regen',
+                    data: rainData.map(d => d.rain),
+                    color: '#3498db'
+                }],
+                credits: { enabled: false }
+            });
             
             // Windgeschwindigkeit
-            Plotly.newPlot('wind-speed-chart', [{
-                x: timestamps,
-                y: data.map(d => d.wind_speed),
-                type: 'scatter',
-                mode: 'lines',
-                name: 'Windgeschwindigkeit',
-                line: {color: '#f38181', width: 3}
-            }, {
-                x: timestamps,
-                y: data.map(d => d.wind_gust),
-                type: 'scatter',
-                mode: 'lines',
-                name: 'Böen',
-                line: {color: '#aa96da', width: 2, dash: 'dash'}
-            }], {
-                title: '💨 Windgeschwindigkeit (m/s)',
-                xaxis: {title: 'Zeit'},
-                yaxis: {title: 'm/s'},
-                margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: DEFAULT_CHART_HEIGHT
-            }, plotConfig);
+            Highcharts.chart('wind-speed-chart', {
+                chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '💨 Windgeschwindigkeit (m/s)' },
+                xAxis: { categories: timestamps, title: { text: 'Zeit' } },
+                yAxis: { title: { text: 'm/s' } },
+                legend: { enabled: true },
+                series: [{
+                    name: 'Windgeschwindigkeit',
+                    data: data.map(d => d.wind_speed),
+                    color: '#f38181',
+                    lineWidth: 2
+                }, {
+                    name: 'Böen',
+                    data: data.map(d => d.wind_gust),
+                    color: '#aa96da',
+                    lineWidth: 2,
+                    dashStyle: 'dash'
+                }],
+                credits: { enabled: false }
+            });
             
-            // Windrichtung (Polarplot)
-            Plotly.newPlot('wind-dir-chart', [{
-                r: data.map(d => d.wind_speed),
-                theta: data.map(d => d.wind_dir),
-                mode: 'markers',
-                type: 'scatterpolar',
-                marker: {
-                    size: 8,
-                    color: data.map(d => d.wind_speed),
-                    colorscale: 'Viridis',
-                    showscale: true,
-                    colorbar: {title: 'm/s', orientation: 'h', y: -0.25}
-                }
-            }], {
-                title: '🧭 Windrichtung',
-                polar: {
-                    radialaxis: {title: 'Geschwindigkeit (m/s)'},
-                    angularaxis: {direction: 'clockwise'}
-                },
-                margin: {t: 50, b: 80, l: 60, r: 60, pad: 0},
-                legend: {orientation: 'h', y: -0.2},
-                height: POLAR_CHART_HEIGHT
-            }, plotConfig);
+            // Windrichtung (Scatter-Plot mit Farbcodierung)
+            Highcharts.chart('wind-dir-chart', {
+                chart: { type: 'scatter', height: POLAR_CHART_HEIGHT, spacingRight: 20 },
+                title: { text: '🧭 Windrichtung' },
+                xAxis: { title: { text: 'Windrichtung (°)' }, min: 0, max: 360 },
+                yAxis: { title: { text: 'Geschwindigkeit (m/s)' } },
+                legend: { enabled: true },
+                colorAxis: { min: 0, max: Math.max(...data.map(d => d.wind_speed || 0)) },
+                series: [{
+                    name: 'Wind',
+                    data: data.map(d => ({
+                        x: d.wind_dir || 0,
+                        y: d.wind_speed || 0,
+                        colorValue: d.wind_speed || 0
+                    })),
+                    colorByPoint: true,
+                    marker: { radius: 4 }
+                }],
+                credits: { enabled: false }
+            });
         }
         
         // Initiales Laden