113 lines
15 KiB
HTML
113 lines
15 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 Line Chart</title>
|
|
<!-- Include jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Include Highcharts -->
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
<select id="select-data">
|
|
<option value="Producer_sum">Producer Day Energy</option>
|
|
<option value="Fronius_15kW">Fronius 15kW Day Energy</option>
|
|
<option value="Fronius_20kW">Fronius 20kW Day Energy</option>
|
|
<!-- Add more options for other data if needed -->
|
|
</select>
|
|
<br>
|
|
<input type="checkbox" id="pac-checkbox" value="pac"> PAC Values
|
|
<br>
|
|
<input type="checkbox" id="success-checkbox" value="success"> Success Values
|
|
<!-- Add more checkboxes for other data if needed -->
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
var jsonData = {"timestamps": ["2024-04-12 15:43", "2024-04-12 15:44", "2024-04-12 15:45", "2024-04-12 15:46", "2024-04-12 15:47", "2024-04-12 15:48", "2024-04-12 15:49", "2024-04-12 15:50", "2024-04-12 15:51", "2024-04-12 15:52", "2024-04-12 15:53", "2024-04-12 15:54", "2024-04-12 15:55", "2024-04-12 15:56", "2024-04-12 15:57", "2024-04-12 15:58", "2024-04-12 15:59", "2024-04-12 16:00", "2024-04-12 16:01", "2024-04-12 16:02", "2024-04-12 16:03", "2024-04-12 16:04", "2024-04-12 16:05", "2024-04-12 16:06", "2024-04-12 16:07", "2024-04-12 16:08", "2024-04-12 16:09", "2024-04-12 16:10", "2024-04-12 16:11"], "Producer_sum": {"values": {"success": [false, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true], "day_energy": [76450, 185850, 186140, 186430, 186750, 187010, 187260, 187570, 187890, 188260, 188600, 188940, 189330, 189710, 190080, 190450, 190870, 191250, 191630, 192010, 192390, 192750, 193200, 193580, 194020, 194430, 194770, 195100, 195450], "pac": [9092, 18212, 16840, 19010, 16547, 14897, 17489, 18699, 20811, 21277, 21773, 20936, 23143, 22798, 23125, 21859, 24533, 23820, 22657, 22707, 22598, 24981, 24223, 24880, 25590, 23621, 18219, 22802, 20691], "total_energy": [30935398, 58857902, 58858198, 58858504, 58858802, 58859102, 58859300, 58859596, 58860000, 58860302, 58860702, 58860998, 58861398, 58861704, 58862200, 58862504, 58862900, 58863300, 58863700, 58864100, 58864504, 58864800, 58865300, 58865700, 58866002, 58866500, 58866900, 58867200, 58867502], "year_energy": [3138175, 7772149, 7772455, 7772733, 7773044, 7773306, 7773564, 7773883, 7774193, 7774557, 7774904, 7775253, 7775632, 7776020, 7776386, 7776754, 7777171, 7777559, 7777925, 7778318, 7778690, 7779060, 7779492, 7779885, 7780332, 7780726, 7781062, 7781409, 7781755]}}, "Fronius_15kW": {"values": {"success": [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true], "day_energy": [76450, 76610, 76730, 76850, 76990, 77090, 77200, 77330, 77460, 77620, 77760, 77900, 78060, 78220, 78380, 78540, 78710, 78870, 79030, 79190, 79350, 79500, 79690, 79850, 80030, 80210, 80350, 80490, 80640], "pac": [9092, 7631, 7040, 7942, 7004, 6290, 7323, 7804, 8713, 8862, 9121, 8765, 9708, 9544, 9684, 9165, 10256, 9990, 9521, 9518, 9442, 10493, 10189, 10451, 10763, 9920, 7628, 9564, 8679], "total_energy": [30935398, 30935502, 30935600, 30935802, 30935902, 30936000, 30936100, 30936198, 30936400, 30936500, 30936702, 30936800, 30936998, 30937102, 30937300, 30937402, 30937600, 30937798, 30937902, 30938100, 30938302, 30938400, 30938598, 30938800, 30938900, 30939102, 30939300, 30939398, 30939502], "year_energy": [3138175, 3138329, 3138455, 3138574, 3138702, 3138812, 3138922, 3139056, 3139186, 3139335, 3139480, 3139626, 3139788, 3139948, 3140101, 3140259, 3140430, 3140597, 3140750, 3140915, 3141068, 3141227, 3141405, 3141570, 3141758, 3141927, 3142068, 3142214, 3142356]}}, "Fronius_20kW": {"values": {"success": [false, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true], "day_energy": [null, 109240, 109410, 109580, 109760, 109920, 110060, 110240, 110430, 110640, 110840, 111040, 111270, 111490, 111700, 111910, 112160, 112380, 112600, 112820, 113040, 113250, 113510, 113730, 113990, 114220, 114420, 114610, 114810], "pac": [null, 10581, 9800, 11068, 9543, 8607, 10166, 10895, 12098, 12415, 12652, 12171, 13435, 13254, 13441, 12694, 14277, 13830, 13136, 13189, 13156, 14488, 14034, 14429, 14827, 13701, 10591, 13238, 12012], "total_energy": [null, 27922400, 27922598, 27922702, 27922900, 27923102, 27923200, 27923398, 27923600, 27923802, 27924000, 27924198, 27924400, 27924602, 27924900, 27925102, 27925300, 27925502, 27925798, 27926000, 27926202, 27926400, 27926702, 27926900, 27927102, 27927398, 27927600, 27927802, 27928000], "year_energy": [null, 4633820, 4634000, 4634159, 4634342, 4634494, 4634642, 4634827, 4635007, 4635222, 4635424, 4635627, 4635844, 4636072, 4636285, 4636495, 4636741, 4636962, 4637175, 4637403, 4637622, 4637833, 4638087, 4638315, 4638574, 4638799, 4638994, 4639195, 4639399]}}, "Meter_Sum": {"values": {"success": [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true], "Current_AC_Phase_1": [-21.5, -17.35, -15.85, -18.45, -15.4, -13.5, -16.9, -18.45, -21.7, -22.3, -22.45, -21.5, -16.1, -24.25, -24.9, -22.7, -21.85, -20.35, -19.2, -18.4, -18.8, -21.6, -20.35, -13.3, -22.1, -19.7, -12.9, -18.95, -16.15], "Current_AC_Phase_2": [-23.1, -22.85, -20.85, -23.55, -20, -17.9, -21.6, -24, -27.45, -28.25, -28.85, -27.7, -30.95, -30.1, -30.7, -28.8, -16.9, -15.3, -14.3, -13.85, -14.2, -17.1, -16, -17, -17.65, -14.7, -6.7, -12.95, -10.05], "Current_AC_Phase_3": [-23.8, -19.5, -17.75, -20.35, -16.85, -14.8, -18.4, -19.95, -24.1, -24.35, -25.1, -23.9, -27.25, -26.5, -27.1, -25.1, -18.6, -17.45, -16.35, -15.8, -16.2, -19.05, -17.95, -18.9, -19.65, -16.75, -9.85, -15.75, -13], "PowerReal_P_Sum": [-15685.7, -13797.2, -12576.8, -14475.2, -12076.8, -10571.7, -13191.1, -14492.9, -17078.4, -17453, -17795.3, -17011.7, -17296.8, -18853.4, -19273.5, -17901.4, -12867, -11916.9, -10995.5, -10642.7, -10879.8, -13029.3, -12191.6, -12131.8, -13475.3, -11513.7, -6138.7, -10649.2, -8548.6]}}, "Meter_Fronius": {"values": {"success": [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true], "Current_AC_Phase_1": [-21.5, -17.35, -15.85, -18.45, -15.4, -13.5, -16.9, -18.45, -21.7, -22.3, -22.45, -21.5, -16.1, -24.25, -24.9, -22.7, -21.85, -20.35, -19.2, -18.4, -18.8, -21.6, -20.35, -13.3, -22.1, -19.7, -12.9, -18.95, -16.15], "Current_AC_Phase_2": [-23.1, -22.85, -20.85, -23.55, -20, -17.9, -21.6, -24, -27.45, -28.25, -28.85, -27.7, -30.95, -30.1, -30.7, -28.8, -16.9, -15.3, -14.3, -13.85, -14.2, -17.1, -16, -17, -17.65, -14.7, -6.7, -12.95, -10.05], "Current_AC_Phase_3": [-23.8, -19.5, -17.75, -20.35, -16.85, -14.8, -18.4, -19.95, -24.1, -24.35, -25.1, -23.9, -27.25, -26.5, -27.1, -25.1, -18.6, -17.45, -16.35, -15.8, -16.2, -19.05, -17.95, -18.9, -19.65, -16.75, -9.85, -15.75, -13], "PowerReal_P_Sum": [-15685.7, -13797.2, -12576.8, -14475.2, -12076.8, -10571.7, -13191.1, -14492.9, -17078.4, -17453, -17795.3, -17011.7, -17296.8, -18853.4, -19273.5, -17901.4, -12867, -11916.9, -10995.5, -10642.7, -10879.8, -13029.3, -12191.6, -12131.8, -13475.3, -11513.7, -6138.7, -10649.2, -8548.6]}}, "User_data": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Current_Prio": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod1": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod3": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod2.0": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod2.1": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod2.2": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Umod2.3": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Usta2.0": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}, "Usta2.1": {"values": {"Current_Power": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "Used_Energy": [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4], "Current_Prio": [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "Current_deltaPower": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}}}
|
|
|
|
// Function to render chart
|
|
function renderChart(selectedData, includePac, includeSuccess) {
|
|
var chartData = [];
|
|
var timestamps = jsonData.timestamps;
|
|
|
|
// Format data for Highcharts
|
|
for (var i = 0; i < timestamps.length; i++) {
|
|
var dataPoint = [new Date(timestamps[i]).getTime()];
|
|
if (includePac) {
|
|
dataPoint.push(jsonData[selectedData].values.pac[i]);
|
|
}
|
|
if (includeSuccess) {
|
|
dataPoint.push(jsonData[selectedData].values.success[i] ? 1 : 0);
|
|
}
|
|
if (dataPoint.length > 1) {
|
|
chartData.push(dataPoint);
|
|
}
|
|
}
|
|
|
|
// Render Highcharts chart
|
|
Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'line'
|
|
},
|
|
title: {
|
|
text: 'Data from API'
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
dateTimeLabelFormats: {
|
|
hour: '%H:%M'
|
|
}
|
|
},
|
|
yAxis: [{
|
|
title: {
|
|
text: 'PAC Value'
|
|
},
|
|
opposite: false
|
|
}, {
|
|
title: {
|
|
text: 'Success'
|
|
},
|
|
opposite: true
|
|
}],
|
|
series: [{
|
|
name: 'PAC',
|
|
data: chartData.map(function (point) {
|
|
return [point[0], point[1]];
|
|
}),
|
|
yAxis: 0
|
|
}, {
|
|
name: 'Success',
|
|
type: 'column',
|
|
data: chartData.map(function (point) {
|
|
return [point[0], point[2]];
|
|
}),
|
|
yAxis: 1
|
|
}]
|
|
});
|
|
}
|
|
|
|
// Initial render with default selected data
|
|
renderChart($('#select-data').val(), false, false);
|
|
|
|
// Handle select change event
|
|
$('#select-data').change(function () {
|
|
var selectedData = $(this).val();
|
|
var includePac = $('#pac-checkbox').is(':checked');
|
|
var includeSuccess = $('#success-checkbox').is(':checked');
|
|
renderChart(selectedData, includePac, includeSuccess);
|
|
});
|
|
|
|
// Handle checkbox change event
|
|
$('#pac-checkbox, #success-checkbox').change(function () {
|
|
var selectedData = $('#select-data').val();
|
|
var includePac = $('#pac-checkbox').is(':checked');
|
|
var includeSuccess = $('#success-checkbox').is(':checked');
|
|
renderChart(selectedData, includePac, includeSuccess);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|