Skip to content

Latest commit

 

History

History
88 lines (77 loc) · 4.34 KB

README.md

File metadata and controls

88 lines (77 loc) · 4.34 KB

Javascript Charts für FHEM mit Chart.js

Forum: https://forum.fhem.de/index.php/topic,105341.0.html

  1. Voraussetzung:

    • Funktionierendes dbLog und dbRep
    • Der Device Name des dbRep ist idealerweise logrep.

  2. update all https://raw.githubusercontent.com/MarcProe/Chart.fhem.js/master/controls_chart.txt

  3. Javascripts in dieser Reihenfolge in FHEM einbinden:

    • set WEB JavaScripts chart.js/luxon.min.js chart.js/chart.min.js chart.js/chart.fhem.js chart.js/chartjs-adapter-luxon.min.js
    • (Vorsicht: Nichts überschreiben, was eventuell schon drinsteht)

  4. Einen weblink definieren:

    • define Mein_Chart weblink htmlCode <div></div>

  5. Die DEF wie folgt ändern:

    • Syntax für createChart:
      • createChart(htmlElement, Daten, [Achsen], [von], [bis], [dbRep])
    • dbRep ist der Name der dbRep-Instanz. Standard ist logrep.
    • vonund bis definiert den Zeitraum des Charts. Standard ist "letzte 25 Stunden".
      • Die Helferfunktion getChartTime(m,h,d,m,y) gibt das aktuelle Datum zurück, abzüglich der Parameter.
      • getChartTime(0,12) ist jetzt vor 12 Stunden und 0 Minuten
    • Die Daten werden als JSON-Array definiert:
      • "d": das device
      • "r": das reading
      • "l": Label des Graphen
      • "a": Achse, auf der die Daten angezeigt werden sollen
      • "c": (optional) Die Linienfarbe im Format "rgb(128,64,64)"
      • "f" (optional) eine Funktion, die auf den auszugebenden Wert angewendet wird
    • Da Achsendefiniton wird als JSON-Objekt definiert:
      • Objektname ist die ID der Achse, die bei den Daten unter "a" verwendet wird.
      • "p": Position der Achse, links oder rechts vom Graphen
      • "l": Label der Achse
      • "min": Minimalwert auf der Achse
      • "max": Maximalwert auf der Achse
      • "smin": Vorgeschlagener Minimalwert der Achse
      • "smax": Vorgeschlagener Maximalwert der Achse
      • "o": Alle anderen Optionen aus der Dokumentation von Chart.js
    htmlCode <div>
   <canvas id="HeizungBad"></canvas>
</div>
<script>
createChart( "HeizungBad", 
              [
                { "d": "FensterBad", "r": "temperature", "a": "T", "l": "gewollte Temperatur", "c": "rgb(128,64,64)" },
                { "d": "TempBad", "r": "temperature", "a": "T", "l": "gemessene Temperatur", "c": "rgb(255,64,64)"  },
                { "d": "FensterBad", "r": "state", "a": "L", "c": "rgb(64,196,64)", "f": d => { return d === "closed"?0:1; } },
                { "d": "HumiBad", "r": "humidity", "a": "A", "l": "Feuchtigkeit", "c": "rgb(64,64,192)" }
              ],
              {
                  "T": { "p": "left", "l": "°C", "smin": "15", "smax": "25", "o": {"grid": {"color": "rgb(255,64,64)"} } },
                  "L": { "l": "on/off", "min": "0", "max": "1" },
                  "A": { "l": "pct", "smin": "40", "smax": "80" }
              }                  
            );

</script>

  6. Fertig!

  7. Mit Javascript können auch Steuerknöpfe erzeugt werden, zudem kann die Höhe und Breite des Charts angegeben werden, und ein Link auf die Chartdefinition erzeugt werden:

    htmlCode 
<div>
  <!-- Link auf die Definition -->
  <a href="/fhem?detail=chart_Heizung_Bad">Bad</a>
  <div class="chart-container" style="style=width:100%;max-width:700px;height:400px;">
    <!-- Chart Canvas -->
    <canvas id="HeizungBad"></canvas>
  </div>
  <!-- 12 Stunden zurück -->
  <button type="button" onClick="adjustTime(fhemChartjs['HeizungBad'], {'hours': '-12'})">&larr;</button>
  <!-- 25 Stunden zurück bis jetzt -->
  <button type="button" onClick="gotoTime(fhemChartjs['HeizungBad'], getChartTime(0,25), getChartTime())">Jetzt</button>
  <!-- 12 Stunden vor -->
  <button type="button" onClick="adjustTime(fhemChartjs['HeizungBad'], {'hours': '12'});">&rarr;</button>
</div>
<script>
  /* */
</script>

image