Skip to content

MarcProe/Chart.fhem.js

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Chart.js meets FHEM

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published