Versuche mit HighCharts
This commit is contained in:
225
wetterstation.py
225
wetterstation.py
@@ -252,7 +252,9 @@ def create_html_template():
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Wetterstation</title>
|
<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>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -382,7 +384,18 @@ def create_html_template():
|
|||||||
let currentPeriod = 'day';
|
let currentPeriod = 'day';
|
||||||
const DEFAULT_CHART_HEIGHT = 360;
|
const DEFAULT_CHART_HEIGHT = 360;
|
||||||
const POLAR_CHART_HEIGHT = 420;
|
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) {
|
function switchPeriod(period) {
|
||||||
currentPeriod = period;
|
currentPeriod = period;
|
||||||
@@ -417,122 +430,120 @@ def create_html_template():
|
|||||||
const data = apiData.data;
|
const data = apiData.data;
|
||||||
const rainData = apiData.rain_hourly;
|
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
|
// Temperatur
|
||||||
Plotly.newPlot('temp-chart', [{
|
Highcharts.chart('temp-chart', {
|
||||||
x: timestamps,
|
chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
|
||||||
y: data.map(d => d.temperature),
|
title: { text: '🌡️ Temperatur (°C)' },
|
||||||
type: 'scatter',
|
xAxis: { categories: timestamps, title: { text: 'Zeit' }, labels: { step: step } },
|
||||||
mode: 'lines',
|
yAxis: { title: { text: '°C' } },
|
||||||
name: 'Temperatur',
|
legend: { enabled: true },
|
||||||
line: {color: '#ff6b6b', width: 3}
|
series: [{
|
||||||
}], {
|
name: 'Temperatur',
|
||||||
title: '🌡️ Temperatur (°C)',
|
data: data.map(d => d.temperature),
|
||||||
xaxis: {title: 'Zeit'},
|
color: '#ff6b6b',
|
||||||
yaxis: {title: '°C'},
|
lineWidth: 2
|
||||||
margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
|
}],
|
||||||
legend: {orientation: 'h', y: -0.2},
|
credits: { enabled: false }
|
||||||
height: DEFAULT_CHART_HEIGHT
|
});
|
||||||
}, plotConfig);
|
|
||||||
|
|
||||||
// Luftfeuchtigkeit
|
// Luftfeuchtigkeit
|
||||||
Plotly.newPlot('humidity-chart', [{
|
Highcharts.chart('humidity-chart', {
|
||||||
x: timestamps,
|
chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
|
||||||
y: data.map(d => d.humidity),
|
title: { text: '💧 Luftfeuchtigkeit (%)' },
|
||||||
type: 'scatter',
|
xAxis: { categories: timestamps, title: { text: 'Zeit' }, labels: { step: step } },
|
||||||
mode: 'lines',
|
yAxis: { title: { text: '%' } },
|
||||||
name: 'Luftfeuchtigkeit',
|
legend: { enabled: true },
|
||||||
line: {color: '#4ecdc4', width: 3}
|
series: [{
|
||||||
}], {
|
name: 'Luftfeuchtigkeit',
|
||||||
title: '💧 Luftfeuchtigkeit (%)',
|
data: data.map(d => d.humidity),
|
||||||
xaxis: {title: 'Zeit'},
|
color: '#4ecdc4',
|
||||||
yaxis: {title: '%'},
|
lineWidth: 2
|
||||||
margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
|
}],
|
||||||
legend: {orientation: 'h', y: -0.2},
|
credits: { enabled: false }
|
||||||
height: DEFAULT_CHART_HEIGHT
|
});
|
||||||
}, plotConfig);
|
|
||||||
|
|
||||||
// Luftdruck
|
// Luftdruck
|
||||||
Plotly.newPlot('pressure-chart', [{
|
Highcharts.chart('pressure-chart', {
|
||||||
x: timestamps,
|
chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
|
||||||
y: data.map(d => d.pressure),
|
title: { text: '🎈 Luftdruck (hPa)' },
|
||||||
type: 'scatter',
|
xAxis: { categories: timestamps, title: { text: 'Zeit' } },
|
||||||
mode: 'lines',
|
yAxis: { title: { text: 'hPa' } },
|
||||||
name: 'Luftdruck',
|
legend: { enabled: true },
|
||||||
line: {color: '#95e1d3', width: 3}
|
series: [{
|
||||||
}], {
|
name: 'Luftdruck',
|
||||||
title: '🎈 Luftdruck (hPa)',
|
data: data.map(d => d.pressure),
|
||||||
xaxis: {title: 'Zeit'},
|
color: '#95e1d3',
|
||||||
yaxis: {title: 'hPa'},
|
lineWidth: 2
|
||||||
margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
|
}],
|
||||||
legend: {orientation: 'h', y: -0.2},
|
credits: { enabled: false }
|
||||||
height: DEFAULT_CHART_HEIGHT
|
});
|
||||||
}, plotConfig);
|
|
||||||
|
|
||||||
// Regenmenge pro Stunde
|
// Regenmenge pro Stunde
|
||||||
Plotly.newPlot('rain-chart', [{
|
Highcharts.chart('rain-chart', {
|
||||||
x: rainData.map(d => d.hour),
|
chart: { type: 'column', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
|
||||||
y: rainData.map(d => d.rain),
|
title: { text: '🌧️ Regenmenge pro Stunde (mm)' },
|
||||||
type: 'bar',
|
xAxis: { categories: rainTimestamps, title: { text: 'Zeit' } },
|
||||||
name: 'Regen',
|
yAxis: { title: { text: 'mm' } },
|
||||||
marker: {color: '#3498db'}
|
legend: { enabled: false },
|
||||||
}], {
|
series: [{
|
||||||
title: '🌧️ Regenmenge pro Stunde (mm)',
|
name: 'Regen',
|
||||||
xaxis: {title: 'Zeit'},
|
data: rainData.map(d => d.rain),
|
||||||
yaxis: {title: 'mm'},
|
color: '#3498db'
|
||||||
margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
|
}],
|
||||||
legend: {orientation: 'h', y: -0.2},
|
credits: { enabled: false }
|
||||||
height: DEFAULT_CHART_HEIGHT
|
});
|
||||||
}, plotConfig);
|
|
||||||
|
|
||||||
// Windgeschwindigkeit
|
// Windgeschwindigkeit
|
||||||
Plotly.newPlot('wind-speed-chart', [{
|
Highcharts.chart('wind-speed-chart', {
|
||||||
x: timestamps,
|
chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
|
||||||
y: data.map(d => d.wind_speed),
|
title: { text: '💨 Windgeschwindigkeit (m/s)' },
|
||||||
type: 'scatter',
|
xAxis: { categories: timestamps, title: { text: 'Zeit' } },
|
||||||
mode: 'lines',
|
yAxis: { title: { text: 'm/s' } },
|
||||||
name: 'Windgeschwindigkeit',
|
legend: { enabled: true },
|
||||||
line: {color: '#f38181', width: 3}
|
series: [{
|
||||||
}, {
|
name: 'Windgeschwindigkeit',
|
||||||
x: timestamps,
|
data: data.map(d => d.wind_speed),
|
||||||
y: data.map(d => d.wind_gust),
|
color: '#f38181',
|
||||||
type: 'scatter',
|
lineWidth: 2
|
||||||
mode: 'lines',
|
}, {
|
||||||
name: 'Böen',
|
name: 'Böen',
|
||||||
line: {color: '#aa96da', width: 2, dash: 'dash'}
|
data: data.map(d => d.wind_gust),
|
||||||
}], {
|
color: '#aa96da',
|
||||||
title: '💨 Windgeschwindigkeit (m/s)',
|
lineWidth: 2,
|
||||||
xaxis: {title: 'Zeit'},
|
dashStyle: 'dash'
|
||||||
yaxis: {title: 'm/s'},
|
}],
|
||||||
margin: {t: 50, b: 60, l: 60, r: 30, pad: 0},
|
credits: { enabled: false }
|
||||||
legend: {orientation: 'h', y: -0.2},
|
});
|
||||||
height: DEFAULT_CHART_HEIGHT
|
|
||||||
}, plotConfig);
|
|
||||||
|
|
||||||
// Windrichtung (Polarplot)
|
// Windrichtung (Scatter-Plot mit Farbcodierung)
|
||||||
Plotly.newPlot('wind-dir-chart', [{
|
Highcharts.chart('wind-dir-chart', {
|
||||||
r: data.map(d => d.wind_speed),
|
chart: { type: 'scatter', height: POLAR_CHART_HEIGHT, spacingRight: 20 },
|
||||||
theta: data.map(d => d.wind_dir),
|
title: { text: '🧭 Windrichtung' },
|
||||||
mode: 'markers',
|
xAxis: { title: { text: 'Windrichtung (°)' }, min: 0, max: 360 },
|
||||||
type: 'scatterpolar',
|
yAxis: { title: { text: 'Geschwindigkeit (m/s)' } },
|
||||||
marker: {
|
legend: { enabled: true },
|
||||||
size: 8,
|
colorAxis: { min: 0, max: Math.max(...data.map(d => d.wind_speed || 0)) },
|
||||||
color: data.map(d => d.wind_speed),
|
series: [{
|
||||||
colorscale: 'Viridis',
|
name: 'Wind',
|
||||||
showscale: true,
|
data: data.map(d => ({
|
||||||
colorbar: {title: 'm/s', orientation: 'h', y: -0.25}
|
x: d.wind_dir || 0,
|
||||||
}
|
y: d.wind_speed || 0,
|
||||||
}], {
|
colorValue: d.wind_speed || 0
|
||||||
title: '🧭 Windrichtung',
|
})),
|
||||||
polar: {
|
colorByPoint: true,
|
||||||
radialaxis: {title: 'Geschwindigkeit (m/s)'},
|
marker: { radius: 4 }
|
||||||
angularaxis: {direction: 'clockwise'}
|
}],
|
||||||
},
|
credits: { enabled: false }
|
||||||
margin: {t: 50, b: 80, l: 60, r: 60, pad: 0},
|
});
|
||||||
legend: {orientation: 'h', y: -0.2},
|
|
||||||
height: POLAR_CHART_HEIGHT
|
|
||||||
}, plotConfig);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initiales Laden
|
// Initiales Laden
|
||||||
|
|||||||
Reference in New Issue
Block a user