[FTUI 3] Charts

[cotecmania]

Hallo,

gibt es eine Möglichkeit, die Y-Achsenabschnitte bzw. die Teilung selbst zu bestimmen.
Aktuell kann man ja nur min/max angeben und der Rest passiert automatisch ...

Gruss
Joe

[Kai-Alfonso]

Hi Leute,

ich habe da 2 Fragen.

Folgendes Chart

Code Auswählen Erweitern

<ftui-view-item>
  <ftui-chart width="100%" unit="year" prefetch="86400" extend>
    <ftui-chart-data label="kWh" fill color="#27ae60" log="DbLog" file="history" type="bar"
      spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"></ftui-chart-data>
  </ftui-chart>
</ftui-view-item>

So sieht es dann aus:

Du darfst diesen Dateianhang nicht ansehen.


Oft wenn ich die Seite neu lade kommen aber gar keine Daten. Weiß einer wieso? Das sieht dann so aus:

Du darfst diesen Dateianhang nicht ansehen.


Bonusfragen: Wie komme ich die Gridlinien ausgeblendet und wie kann ich statt Year sowas wie Last 12 Month nutzen

Vielen Dank schonmal

[Kai-Alfonso]

Ich hab noch mal nachgeschaut.

Wenn keine Daten kommen ruft FTUI nur die URL auf:

http://fhem:8083/fhem/?cmd=get+DbLog+history+-+2025-07-04_12%3A59%3A14+2025-07-04_12%3A59%3A14+StromVerbrauchsZaehler%3AStromzaehler_total_consumption_EnergyMonthLast&asyncCmd=0&fwcsrf=null&XHR=1

repsonse ist:

Code Auswählen Erweitern

#StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast:::

wenn es funktioniert ruf er zusätzlich die URL auf

http://fhem:8083/fhem/?cmd=get+DbLog+history+-+2024-12-31_00%3A00%3A00+2026-01-02_00%3A00%3A00+StromVerbrauchsZaehler%3AStromzaehler_total_consumption_EnergyMonthLast&asyncCmd=0&fwcsrf=null&XHR=1

und da kommen die Daten:

Code Auswählen Erweitern

2024-12-31_23:59:00 390.000
2025-01-31_23:59:56 394.964
2025-02-28_23:59:56 222.046
2025-03-31_23:59:56 125.741
2025-04-30_23:59:59 89.463
2025-06-01_23:59:59 22.582
2025-06-30_23:59:57 31.845
#StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast:::

Ich kann nur nicht reproduzieren, wieso er die Url nicht ständig aufruft. Ich weiß nur, das es selten passiert nach einem Reload

Jemand eine Idee, was da falsch sein könnte? Er schein da im ersten Aufruf den Zeitrahmen total falsch zu wählen

[Kai-Alfonso]

Hat denn keiner eine Idee oder ist das ein $PEBCAK error?

[tobi01001]

Probier mal mit

Code Auswählen Erweitern

<ftui-chart width="100%" unit="year" prefetch="86400" extend>
    <ftui-chart-data label="kWh" fill color="#27ae60" log="DbLog" file="history" type="bar"
      spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
      [update]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
    ></ftui-chart-data>
  </ftui-chart>


[Kai-Alfonso]

Probier mal mit

Code Auswählen Erweitern

<ftui-chart width="100%" unit="year" prefetch="86400" extend>
    <ftui-chart-data label="kWh" fill color="#27ae60" log="DbLog" file="history" type="bar"
      spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
      [update]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
    ></ftui-chart-data>
  </ftui-chart>


Hey, vielen Dank - das hat tatsächlich geholfen. Wenn ich das richtig sehe hast du nur das  [update] Statement hinzugefügt.

Was macht denn das? Auf der Github Doku sehe ich keine nähere Erklärung dazu

[tobi01001]

Probier mal mit

Code Auswählen Erweitern

<ftui-chart width="100%" unit="year" prefetch="86400" extend>
    <ftui-chart-data label="kWh" fill color="#27ae60" log="DbLog" file="history" type="bar"
      spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
      [update]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
    ></ftui-chart-data>
  </ftui-chart>


Hey, vielen Dank - das hat tatsächlich geholfen. Wenn ich das richtig sehe hast du nur das  [update] Statement hinzugefügt.

Was macht denn das? Auf der Github Doku sehe ich keine nähere Erklärung dazu

Vermutlich hielt das der Autor für selbsterklärend. Ich meine das aber irgendwo mal gelesen zu haben.
Es macht ein Update (Aktualisierung des Charts) wenn das angegebene Device:Reading ein Event erzeugt.

[Kai-Alfonso]

Probier mal mit

Code Auswählen Erweitern

<ftui-chart width="100%" unit="year" prefetch="86400" extend>
    <ftui-chart-data label="kWh" fill color="#27ae60" log="DbLog" file="history" type="bar"
      spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
      [update]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonthLast"
    ></ftui-chart-data>
  </ftui-chart>


Hey, vielen Dank - das hat tatsächlich geholfen. Wenn ich das richtig sehe hast du nur das  [update] Statement hinzugefügt.

Was macht denn das? Auf der Github Doku sehe ich keine nähere Erklärung dazu

Vermutlich hielt das der Autor für selbsterklärend. Ich meine das aber irgendwo mal gelesen zu haben.
Es macht ein Update (Aktualisierung des Charts) wenn das angegebene Device:Reading ein Event erzeugt.

klingt für mich einleuchtend - allerdings hätte ich vermutet, das es auch ohne Update klappt, halt nur einmalig ohne Aktualisierung. Falsch vermutet denke ich mal

[Kai-Alfonso]

noch eine kleine letzte Frage: wie stelle ich denn Werte dar, die nur einmal jährlich anfallen, wie zum Beispiel die jährliche Stromrechnung? Wenn ich unit="year" nehme nimmt er logischerweise nur die Monate für das aktuelle Jahr, wenn ich Units weglasse, dann nimmer er wohl per default "day" und mehr als "year" gibt es nicht laut charts.js

Time Units
The following time measurements are supported. The names can be passed as strings to the time.unit config option to force a certain unit.

'millisecond'
'second'
'minute'
'hour'
'day'
'week'
'month'
'quarter'
'year'

Meine DB Werte haben immer als Timestamp 23:59:59 am letzten Tag des Jahres