[FTUI 3] Charts

[mr_petz]

Ich habe jetzt mit der originalen chart.component getestet.
Auf dem Bild siehst du 2 charts mit gleichen Werten.
Hier sieht man das er die charts "streckt" bzw. "auseinander schiebt".

LG

Edit: Bei dir sieht es wegen dem transparenten fill so komisch aus....

Versuche mal Bsp.( mach es 3x anders):

Code Auswählen Erweitern


background-color="rgba(255,0,0,1)"


Nochmal ein Vergleich. roter ist auch der erste der definiert wurde.
Der weiße hat in der Mitte den Wert 0.
Vielleicht auch die Reihenfolge ändern...

[Dracolein]

Hm vielleicht denke ich falsch 

Ich hatte erwartet, dass die durch die einzelnen Graphen erzeugten Flächen in einem normalen Liniendiagramm in einem Stacked-Area-Chart aufeinander aufgestapelt (aufsummiert) würden.

Also ganz simplifiziert am Beispiel (X-Koordinate/Y-Koordinate):
3 einzelne Graphen mit den Punkten (0/1), (1/1) und (2/1) bilden in einem Liniendiagramm ein Rechteck in den Farben rot, blau und gelb.
Alle 3 Graphen in einem einzigen Diagramm wären rein visuell drei Rechecke hintereinander versteckt.

In einem Stacked-Diagramm wären sie übereinander aufgestapelt zu einem insgesamt großen Diagramm mit den Punkte (0/3), (1/3) und (2/3), welches visuell aus 3 horizontalen Streifen aus den Farben rot, blau und gelb dargestellt ist.

[Dracolein]

Habs probiert, es ändert sich erwartungsgemäß nur die Farbe, nicht aber die Darstellung mit Bezug auf mein geposteten Screenshot zuvor.  Hm, vielleicht sind die Kurven zu komplex

[mr_petz]

Setze mal den 3.Chart (gelb) als erste Definition.

LG

[Dracolein]

Ändert nichts, aber ich habe nochmal genauer hingeschaut:
Die pinke und blaue Kurve werden gestacked dargestellt. Die gelbe Kurve jedoch wird nicht zusätzlich gestacked, sondern einfach parallel als overlay drübergesetzt konventionell.
Habe mit den Reihenfolgen herumgespielt, das ändert nichts.

Der technische Unterschied liegt einzig im Fakt, dass es sich bei den Datenquellen bei der gelben Linie um eine andere FileLog-Datei handelt.
Eventuell müssen die Daten in der gleichen Datei liegen.

[Dracolein]

Gibt es Optionen für "Design"-Elemente im Chart, wie zum Beispiel eine gestrichelte Linie ?

[mr_petz]

Nur wieder extra Anpassung in der chart.component in Zeile 364 von der Originalen Datei aus gesehen:

Code Auswählen Erweitern


dataset.borderDash=[5, 5];

ist dann wieder für alle lines...
https://www.chartjs.org/docs/3.0.2/samples/line/styling.html

LG

[OdfFhem]

Um möglichst viele, nicht in der FTUI3-Komponente enthaltene chart.js-Attribute bereitstellen zu können, würde ich zur Integration EINES speziellen json-Attributes tendieren. Damit hätte man dann viele (nicht zwingend alle) Möglichkeiten, ohne dass FTUI3 alle chart.js-Attribute erst als eigene Attribute durchschleusen müsste ...

borderDash wäre dabei ein praktisches Beispiel, welches mit dem EINEN speziellen json-Attribt nutzbar wäre ... und zwar pro Datenlieferant ... und nicht mit nur einer Variante ...

[mr_petz]

@OdfFhem

Hatten beide ja schon darüber diskutiert und bin ja auch dafür. Muss mal @setstate was dazu sagen ob es seinen "Ansprüchen" genügt...
Könnte man das padding und/oder min/max Ticks des grid/gitter da auch integrieren?
Noch eine Frage dazu:
https://forum.fhem.de/index.php/topic,117779.msg1241368.html#msg1241368
Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?

Danke und LG

[OdfFhem]

Hatten beide ja schon darüber diskutiert und bin ja auch dafür. Muss mal @setstate was dazu sagen ob es seinen "Ansprüchen" genügt...

Wäre sicher gut, wenn solch ein Attribut von FTUI3 bereitgestellt würde; ansonsten müsste man dafür notwendige Änderungen nach jedem Update immer wieder manuell vornehmen.

Könnte man das padding und/oder min/max Ticks des grid/gitter da auch integrieren?

Hier müsste man zwischen ftui-chart und ftui-chart-data unterscheiden - beide Komponenten bräuchten solch ein spezielles json-Attribut.

Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?

Müsste ich mir mal genauer übers WE anschauen ...

[OdfFhem]

Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?

Angenommen, ich bin nicht auf einer falschen Fährte unterwegs, dann würde ich in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:

Code Auswählen Erweitern


    if (this.xMin >= 0) this.configuration.options.scales.x.min = this.startDate;
    if (this.xMax >= 0) this.configuration.options.scales.x.max = this.endDate;

Damit kann die "erzwungene" Skalierung vorne und/oder hinten ausgeschaltet werden und funktioniert bei z.B. 24h, day, week, month, year.

Code Auswählen Erweitern


<ftui-chart ..... x-min="-1" x-max="-1"></ftui-chart>


[mr_petz]

Danke fürs Anschauen. Die Fährte ist prinzipiell Richtig.
Ich dachte mir das erst auch so, aber hier kann man dann nicht die einzelnen Tage Durchschalten im Control und startdate ist der erste Eintrag und enddate der Letzte im Log.
startdate kann natürlich mehrere Tage zurückliegen...
Des Wegen hatte ich mir die einzelnen Tages-Logeinträge filtern lassen...

LG

[OdfFhem]

aber hier kann man dann nicht die einzelnen Tage Durchschalten

Interessant, denn bei meinem "normalen" Test klappte das eigentlich wie gewünscht.

Kannst Du mal ein ftui-chart-Beispiel bereitstellen ?

[softwear]

Hallo zusammen,

wie komme ich an eine historische Anzeige von Daten? Das meint speziell den Jahressprung, wenn ich ein yearly-FileLog habe.

Mein Chart-data ist folgendermaßen definiert:

Code Auswählen Erweitern

  <ftui-chart-data label="Grundheizung"
        type="line"
        stepped
        fill
        color="danger"
        log="FileLog_struct_wz_Grundheizung"
        file="CURRENT"
        spec="4:struct_wz_Grundheizung::$fld[2]=~'on'?22:0"
        y-axis-id="y"
        point-radius=0>
  </ftui-chart-data>


Danke hier bereits für die komplette Unterstützung im fhem-Forum. Ein ungeheurer Reichtum an Ideen und Sach- und Fachverstand ist hier zu finden. Wahnsinn!

[mr_petz]

Hi @softwear,
Frage wurde hier auch schonmal gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1197915.html#msg1197915

Antwort war diese:
https://forum.fhem.de/index.php/topic,115259.msg1197917.html#msg1197917

Edit: und:
https://forum.fhem.de/index.php/topic,115259.msg1198238.html#msg1198238

LG mr_petz