Hauptmenü

[FTUI 3] Charts

Begonnen von grossmaggul, 15 Januar 2021, 10:23:02

Vorheriges Thema - Nächstes Thema

BigGB

#150
Hallo,
hat jemand eine Erklärung/Idee warum die Markierungen der Grafen im Chart soweit auseinanderliegen?
Im Screenshot habe den Punkt mit Mauszeiger markiert, angezeigt werden mir die Werte von ganz anderen Position der anderen Grafen.
Die Definition des Charts ist hier:

    <ftui-chart title="Schlafzimmer" y-label="Heizung/Außen" y1-label="Ventil" y1-min="0" y1-max="100" y-max="35">
      <ftui-chart-data label="Außen" color="warning" log="myDbLog"  file="history" spec="myBuderus:OutdoorTemp" [update]="myBuderus:state:time"  type="line" point-radius="0"></ftui-chart-data>
      <ftui-chart-data label="Ist-Temp." fill background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog"  file="history" spec="SZ.OG.WT:temperature" [update]="SZ.OG.WT:state:time" type="line" point-radius="0"></ftui-chart-data>
      <ftui-chart-data label="Soll-Temp." fill stepped background-color="#d6305650" color="#d63056" log="myDbLog"  file="history" spec="SZ.OG.WT:desiredTemperature" [update]="SZ.OG.WT:state:time" type="line" point-radius="0"></ftui-chart-data>
      <ftui-chart-data y-axis-id="y1" label="Ventil" color="white" log="myDbLog"  file="history" spec="SZ.OG.HT:valveposition" [update]="SZ.OG.HT:state:time" type="line" point-radius="0"></ftui-chart-data>
      <ftui-chart-controls units="day, week"></ftui-chart-controls>
    </ftui-chart>

Und hier der Screenshot, ich hoffe es kommt rüber was ich meine.
Viele Grüße Gerald.
FHEM 5.8 auf NUC6CAYH, Fritzbox,
MAX-, Homematic-Komponenten, WLAN-Steckdosen mit Tasmota u. MQTT
Tablet UI3

OdfFhem

@BigGB

Hat vermutlich damit zu tun, dass es für die genutzten Readings mehr oder weniger Werte gibt.
Die Werte werden je Reading in einem Array gespeichert und angezeigt.
Klickt man beispielsweise den 10.Wert eines Readings an, liegt der 10.Wert eines anderen Readings zeitlich ganz woanders ...

Readings, die häufiger aktualisiert werden, liegen weiter links.
Readings, die seltener aktualisiert werden, liegen weiter rechts.

th0nix

Nach langem suchen schreibe ich euch mal - vermutlich gibt's irgendwo eine Antwort - finde Sie aber nicht ...  :(

Ich habe ein SVG welcher Funktioniert und würde diesen nun gerne als FTUI3 Chart einbauen.
Die Logdatei FileLog_strommesser.log sieht wie folgt aus
Zitat
2022-07-18_22:15:33 strommesser kwh_total: 60.64
2022-07-18_22:15:33 strommesser power_total: 47.02

Ich dachte das sollte als passen. Ist aber leer...

   <ftui-chart">
        <ftui-chart-data 
          log="FileLog_strommesser"
          spec="4:strommesser.power_total" >
        </ftui-chart-data>
      </ftui-chart>


Kann mir jemand einen Rat geben ?

PS: Gibt es noch eine alternative Anleitung anstelle von https://github.com/knowthelist/ftui#chart mit Beschreibung der Felder ?


OdfFhem

@th0nix


<ftui-chart"> sollte so aussehen: <ftui-chart>


Keine direkte Beschreibung, eher eine Art Nutzungsmöglichkeit:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart.html
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html
oder
einzelne Beispiele in diesem Thema

Zu einigen Attributen kann man unter chartjs.org genauere Informationen finden ...

Det20

#154
Ich hätte da mal einen Wunsch. Zusätzlich zu "24h" als Unit würde ich mir auch 12h oder 6h wünschen.

Aktuell springt meine Heizung nur für 2-3 Minuten an. Die Bar's sind aber im 24h Modus nicht sichtbar, weil sie zu schmal sind.
Stündlich sind sie sichtbar, allerdings scrolle ich mir dann nen Wolf. Mit 6h geht es gerade so (Source eben geändert, würde aber mit dem nächsten Update überschrieben).

Viele Grüße

th0nix

#155
@OdfFhem

Sorry da war ein Kopierfehler drin.


    <ftui-chart title="Power" unit="4h">
        <ftui-chart-data fill
          log="FileLog_k.sk.strommesser"
          spec="4:k.sk.strommesser.power_total.*" >
        </ftui-chart-data>
      </ftui-chart>


Sieht so aus.

Leider wird nichts angezeigt. Vermutlich was bei dem spec falsch ?

Dracolein

Hi,
gibt es Möglichkeiten, die Dichte der Gitternetzlinien und/oder die Anzahl der Achsenbeschriftungen zu beeinflussen?
Ich würde gern mehr horizontale Linien im Diagramm einfügen wollen, als es die automatische Darstellung tut.
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

OdfFhem

Zitat von: th0nix am 14 August 2022, 17:26:29
Leider wird nichts angezeigt. Vermutlich was bei dem spec falsch ?

Angenommen, log und spec sind richtig. unit="4h" ist definitiv falsch und sorgt für einen unbrauchbaren Zeitraum (eine einzige 1/1000 Sekunde).

unit akzeptiert momentan folgende Zeiträume: hour day week month year 24h 30d

OdfFhem

#158
Zitat von: Dracolein am 28 August 2022, 21:38:53
Dichte der Gitternetzlinien

momentan eher noch nicht ... erfordert z.B. die Integration der stepSize-Eigenschaft

Beispielhaft für die y-Achse:

... chart.component.js ... Zeile #103 (GitHub)
              autoSkip: true,
durch
              stepSize: this.stepSizeY,
              autoSkip: (this.stepSizeY)?false:true,
ersetzen

... chart.component.js ... Zeile #207 (GitHub)
      stackedY1: false,
durch
      stackedY1: false,
      stepSizeY: 0,
ersetzen

... ftui-chart-Tag um das Attribut step-size-y erweitern
      <ftui-chart ... step-size-y="15" ...>


s. Screenshots

OdfFhem

Zitat von: Dracolein am 28 August 2022, 21:38:53
Anzahl der Achsenbeschriftungen
momentan eher noch nicht ... callback wird aber bereits unterstützt

Beispielhaft durch Einführung eines Attributes yy (Name noch offen), das die "Lücke" festlegt (z.B. nur jedes dritte Label)

... chart.component.js ... Zeile #106 (GitHub)
              callback: val => val + this.yUnit,
durch
              callback: (val,idx) => (!this.yy || idx % this.yy === 0) ? val + this.yUnit : '',
ersetzen

... chart.component.js ... Zeile #207 (GitHub)
      stackedY1: false,
durch
      stackedY1: false,
      yy: 0,
ersetzen

... ftui-chart-Tag um das Attribut yy erweitern
      <ftui-chart ... yy="3" ...>


s. Screenshots

IT-Fuzzi

Zitat von: Det20 am 09 August 2022, 13:21:09
Ich hätte da mal einen Wunsch. Zusätzlich zu "24h" als Unit würde ich mir auch 12h oder 6h wünschen.

Ja so suche ich ebenfalls. Bzw. dass man sich dynamisch die letzten 6 Std anzeigen lassen kann. In FTUI2 ging das meines Wissens mit

data-nofulldays="true"
data-daysago_start="6h"
data-daysago_end="now"


in FTUI3 habe ich allerdings noch keine Option gesehen. Oder weiß jemand mehr?

Det20

Auch auf die Gefahr hin, dass die Frage schon mal gestellt wurde und ich sie noch nicht gefunden habe ... Kann ich im type "line" irgendwie Einfluß auf die Farbe je nach Wert nehmen?

Quasi "step('0: success, 50: warning, 80: danger')", was bei "chart-data" / "color" nicht funktioniert? Hintergrund: Ich habe meine Heizung mit einem Stromzähler / Hichi Lesekopf versehen. Wenn nun die Heizung anspringt, werden 1.8kW verbraucht, bei Warmwasser sind es 2.4kW. Alle Daten laufen in die selbe Datenbank, im Graph kann ich die Linien nur Anhand der Höhe unterscheiden. Toll wäre es, wenn ich alle Peaks < 2 kW in blau darstellen könnte und alle darüber in einer anderen Farbe. Quasi wie "step".

mr_petz

das binding [color]="Device | step('0: success, 50: warning, 80: danger')"
funktioniert an sich...
aber im canvas wird es nicht neu geschrieben/refresht/sichtbar.
Erst nach um- und zurückswitchen des Tages/ der Woche ist eine Veränderung der Farbe zu sehen...

LG

Det20

Sieht bei type line irgendwie komisch aus, hast du noch einen Tipp?


          <ftui-chart-data no-x no-y no-x1 no-y1 fill label="Heizung (Max: $max kW)" background-color="#d6305650"
     log="DB_History_Heizung"
unit="hour"
   file="history"
type="line"
spec="Heizung:S0Counter_Counter_PowerCurrent"
   [update]="Heizung:S0Counter_Counter_PowerCurrent"
[color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: green, 2: success, 3: warning')"
   >
      </ftui-chart-data>



mr_petz

#164
Du könntest noch zusätzlich im ftui-chart-data mit dem styleAttribute:

--color-base

Bsp.:
[style]="Heizung:S0Counter_Counter_PowerCurrent | step('0:`--color-base:green;`,2:`--color-base:success;`,3:`--color-base:warning;`')"
arbeiten...