Hauptmenü

[FTUI 3] Charts

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

Vorheriges Thema - Nächstes Thema

Det20

Nur den den einen Chart? Wie meinst du das?

mr_petz

Nur ein test im data:

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

+ color step

LG

Det20

#167
Danke dir. Aber leider auch nicht besser. Werden falsch gezeichet. Bis 2 sollte grün sein; wird im Peak aber überall grün gezeichnet.
Und gefüllt werden sie irgendwie immer mit rot.

mr_petz

Ok, dann kann nur setstate oder OdfFhem helfen...

Det20

#169
Ok, dann warte ich mal ab, vielleicht gibt's ja bald ein Update.

Etwas anderes: Laut Doku soll als Typ "Doughnut" bzw "Pie" möglich sein, nur: wie? Hat das mal jemand realisiert? Ich finde leider keine Beispiele und meine Tests (type=pi, type=pie, type=piechart, type=doughnut usw) bleiben immer leer. Die Volltext-Suche im Ordner "components\chart\" ergab bei "pie" oder "doughnut" auch 0 Treffer, Begriffe sind also in der JS nicht enthalten.

Ich tracke aktuell alles an Strom, was ich irgendwie messen/abgreifen kann (und das ist schon fast alles > 100 Watt). Nun möchte ich gerne in einem Pie-Chart die Verteilung darstellen. Wieviel % des Gesamtverbrauchs hat die Heizung verursacht, wieviel Warmwasser, wieviel die Fernseher, wievel Waschmaschine usw ...

mr_petz

Hast du mal diese Demo studiert?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html
Da steht als Beispiel type="bubble".
In der Onlinedemo sieht es dann so aus:
https://knowthelist.github.io/ftui/www/ftui/examples/chart2.html

Hast du es so probiert mit""
type="pie"
oder
type="doughnut"


Wenn du was über den Chart suchen willst dann hier in der chart.js:
https://github.com/knowthelist/ftui/tree/master/www/ftui/modules/chart.js
setstate liest/importiert diese Daten.

Det20

Zitat von: mr_petz
Hast du es so probiert mit""
type="pie"
oder
type="doughnut"

Klar. Kam nix.


Det20

Zitat von: mr_petz
Hast du mal diese Demo studiert?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html
Da steht als Beispiel type="bubble".
In der Onlinedemo sieht es dann so aus:
https://knowthelist.github.io/ftui/www/ftui/examples/chart2.html

Öhm ... Ok, da bin ich dann mal raus:

spec="4:EingangstuerRiegel::$fld[2]=~'closed'?1:0"

Wie bilde ich das mit "2.43" (Warmwasser) und "1.8" (Heizung) ab, dazwischen 0 (nix)?


Det20

Danke dir, aber da bin ich tatsächlich raus, finde meine Ansicht eigentlich garnicht so übel.
Konzentriere mich dann eher mal auf Pie


mr_petz

#177
Zitat von: Det20 am 29 September 2022, 11:51:17
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".

Ich habe mal eine Testumgebung erstellt. Mit Bsp. im data type="bar":

[color]="Device | step('0: green, 2: warning, 3: danger')"
[background-color]="Device | step('0: --green, 2: warning, 3: danger')"
[update]="Device"


funktioniert dein Wunsch des Farbumschaltens.
Durch [update] wird der chart neu gezeichnet und die Farbe umgeswitcht.

Bei type="pie" und type="doughnut" im chart kommt bei mir eine Fehlermeldung:
Zitat
chart.min.js:1
TypeError: Cannot read properties of undefined (reading 'x')
und im chart-data:
Zitat
chart.min.js:5
TypeError: o._getRotation is not a function

LG

Det20

#178
Sieht auf jeden Fall mal besser aus, aber so ganz klappt das leider immer noch nicht. Die 1.8 (Mauszeiger) müssten ja ne andere Farbe haben also die restlichen.
Nur wenn ich den ersten Wert (green) gegen zb red ändere, ist plötzlich alles rot. Er scheint alle Werte in < 2 einzusortieren.


        <ftui-chart y-label="kW">
          <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: warning, 3: danger')"
[background-color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: --green, 2: warning, 3: danger')"
   >
      </ftui-chart-data>
          <ftui-chart-controls units="month, week, day, 12h, 6h, hour"></ftui-chart-controls>


Ja und wegen Pie ... Schade, scheint wohl nicht zu gehen.

OdfFhem

@mr_petz, @Det20

War das gewünschte Feature so gedacht, dass die komplette Darstellung einer Linie eine Farbe hat ?