91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!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>
|