


<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Highcharts Sensorwerte</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <style>
    body { font-family: sans-serif; margin: 10px; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
    #chart { width: 100%; height: 60vh; }
    @media (max-width: 600px) { .controls { flex-direction: column; } }
	<link rel='stylesheet' type='text/css' href='styles.css' />
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  </style>
  
  <link rel='stylesheet' type='text/css' href='styles.css' />
  
  
</head>
<body>

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.php'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Charts</span></a>
      <ul>
         <li><a href='highchart_sht.html'><span>Temp/Hum/Druck</span></a></li>
         <li><a href='highchart_sht2.html'><span>Regen/UV/Lux</span></a></li>
         <li><a href='highchart_wind.html'><span>Wind</span></a></li>
         <li><a href='/windrose/windrose.html'><span>Windrose</span></a></li>
        <li class='last'><a href='highchart_strom.html'><span>Strom</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Zusatzdaten</span></a>
      <ul>
         <li><a href='/moon2/moon.html'><span>Mond</span></a></li>
          <li class='last'><a href='uvforecast.php'><span>UV-Index</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Statistik</span></a>
      <ul>
         <li><a href='data_temp_druck.html'><span>Statistik Temperaturen und Luftdruck</span></a></li>
         <li><a href='data_temp_hz.html'><span>Statistik Heizung</span></a></li>
         <li><a href='data_strom.html'><span>Statistik Strom</span></a></li>
         <li class='last'><a href='data_rest.html'><span>Statistik Wind, UV, Lux, Regen</span></a></li>
      </ul>
   </li>
</ul>
</div>

<h2>📊 eHZ Stromzähler</h2>
<div class="controls">
  <label for="von_datum">Von Datum:</label>
  <input type="date" id="von_datum">
  <label for="von_zeit">Von Zeit:</label>
  <input type="time" id="von_zeit" value="00:00">

  <label for="bis_datum">Bis Datum:</label>
  <input type="date" id="bis_datum">
  <label for="bis_zeit">Bis Zeit:</label>
  <input type="time" id="bis_zeit" value="23:59">

  <label for="wert">Werte:</label>
  <select id="wert" multiple size="6">
    <option value="DJ_TPWRIN">🌡️ Bezug</option>
    <option value="DJ_TPWROUT">💧 Einspeisung</option>
    <option value="DJ_TPWRCURR">🌡️ Aktueller Verbrauch (10-Minuten)</option>
    <option value="DJ_TPWRCURR_AVG5MIN">📈 Aktueller Verbrauch (5-Minuten Ø)</option>
  </select>
  <button onclick="ladeDaten()">🔍 Anzeigen</button>
  <label><input type="checkbox" id="live"> 🔁 Live</label>
</div>
<div id="chart"></div>
<script>
let chart;

function ladeDaten() {
  const vonDatum = document.getElementById("von_datum").value;
  const vonZeit = document.getElementById("von_zeit").value;
  const bisDatum = document.getElementById("bis_datum").value;
  const bisZeit = document.getElementById("bis_zeit").value;

  if (!vonDatum || !bisDatum) return;

  const vonDateTimeBerlin = new Date(`${vonDatum}T${vonZeit}:00`);
  const bisDateTimeBerlin = new Date(`${bisDatum}T${bisZeit}:00`);

  const vonUTC = vonDateTimeBerlin.toISOString().slice(0, 19).replace('T', ' ');
  const bisUTC = bisDateTimeBerlin.toISOString().slice(0, 19).replace('T', ' ');

  const selected = Array.from(document.getElementById("wert").selectedOptions).map(opt => opt.value);
  if (selected.length === 0) return;

  fetch(`daten_highchart_strom.php?von=${vonUTC}&bis=${bisUTC}&werte=${selected.join(",")}`)
    .then(res => res.json())
    .then(json => {
      const einheiten = json.units;
      const daten = json.data;
      
      const zeitstempel = json.labels.map(d => {
          return new Date(d + 'Z').getTime(); // Append 'Z' to treat as UTC
      });

      const yAchsenZuordnung = {
        "DJ_TPWRIN": "watt1",
        "DJ_TPWROUT": "watt2",
        "DJ_TPWRCURR": "watt3",
        "DJ_TPWRCURR_AVG5MIN": "watt3" // Map the new series to the existing DJ_TPWRCURR Y-axis
      };

      const serien = Object.keys(daten).map(key => ({
        name: `${key} (${einheiten[key]})`,
        data: daten[key].map((y, i) => [zeitstempel[i], parseFloat(y)]),
        tooltip: { valueSuffix: ` ${einheiten[key]}` },
        yAxis: yAchsenZuordnung[key] || 'watt1'
      }));

      if (chart) chart.destroy();

      Highcharts.setOptions({
          time: {
              timezone: 'Europe/Berlin'
          }
      });

      chart = Highcharts.chart('chart', {
        chart: { type: 'spline' },
        title: { text: null },
        xAxis: { type: 'datetime', title: { text: 'Zeit' } },
        yAxis: [{
          id: 'watt1',
          title: { text: 'Watt (W)' },
          min: 0, max: 20000,
          opposite: false
        }, {
          id: 'watt2',
          title: {  text: 'Watt (W)' },
          min: 0, max: 2000,
          opposite: true
        }, {
          id: 'watt3',
          title: {  text: 'Watt (W)' },
          min: -800, max: 8000,
          opposite: true
        }],
        tooltip: {
          shared: true,
          crosshairs: true,
          xDateFormat: '%Y-%m-%d %H:%M'
        },
        series: serien,
        credits: { enabled: false }
      });
    });
}

setInterval(() => {
  if (document.getElementById("live").checked) ladeDaten();
}, 10000);

window.onload = () => {
  const heute = new Date();
  const heuteISO = heute.toISOString().split("T")[0];
  document.getElementById("von_datum").value = heuteISO;
  document.getElementById("bis_datum").value = heuteISO;

  document.getElementById("von_zeit").value = "00:00";
  document.getElementById("bis_zeit").value = "23:59";

  // Initial load when page loads
  ladeDaten(); 
};
</script>
</body>
</html>