FHEM Forum

Hallo zusammen.

das Anzeigen von Tagesdaten in einem Chart funktioniert so:
<ftui-chart unit="month">
  <ftui-chart-data log="FileLog_Days" file="CURRENT" spec="4:pvData.Wert" type="bar"></ftui-chart-data>
</ftui-chart>hc 2025-10-06 18-38-36 001.png

bei Monatswerten funktioniert das analog:
<ftui-chart unit="year">
  <ftui-chart-data log="FileLog_Months" file="CURRENT" spec="4:pvData.eTest" type="bar"></ftui-chart-data>
</ftui-chart>hc 2025-10-06 18-38-50 001.png

Aber wie funktioniert es bei Jahreswerten?
Auf der x-Achse hätte ich dann gern 2019, 2020, 2021, 2022, ...
Ich habe schon vieles ausprobiert, aber ich bekomme es nicht hin.
Ohne ´unit´ wird eine Stundenachse verwendet, ´years´ gibt es nicht.
Hier wäre etwa ´decade´ wünschenswert, um die letzten 10 Jahre dazustellen.
<ftui-chart unit="decade">
  <ftui-chart-data log="FileLog_Years" file="CURRENT" spec="4:pvData.eTest" type="bar"></ftui-chart-data>
</ftui-chart>
Ich kann mir nicht vorstellen, dass es mit chart.js nicht funktioniert.
Vermutlich müsste man hierfür den Code in chart.component.js anpassen (@setstate)
Leider habe ich kaum Kenntnisse von JS...

Hat jemand eine Lösung?

ich beobachte mal das Thema, weil das Problem habe ich vor Monaten auch schon mal erfolglos gepostet

Weil ich mit JS so gut wie keine Erfahrung habe, musste ich mich erst mal einen Tag durch den Code von chart.component.js durchquälen, bevor ich darin ein paar kleine Ergänzungen (keine Änderungen!) machen konnte.
Es ist nicht so, dass ich mit dem Ergebnis wirklich zufrieden bin, aber ich kann damit vorläufig leben.

Das Problem ist, dass in chart.component.js eine Zeitachse als Standard vorgegeben ist.
Damit die Balken zentriert über den Jahreslabeln angezeigt werden, muss der Timestamp der X-Achse immer das Neujahr des Jahres sein, also z.B. 2023-01-01_00:00:00.
Meine Code-Ergänzung ist eine neue unit namens '10y'. In Verbindung mit den anderen Ergänzungen  bewirkt das die Darstellung der letzten 10 Jahre.
<ftui-chart y-min="0" unit="10y">
  <ftui-chart-data log="FileLog_teYears" file="CURRENT" spec="4:pvData.eTest" type="bar">
  </ftui-chart-data>
</ftui-chart>
hc 2025-10-08 19-27-21 001.png

Meine Änderungen an chart.component.js sind im angehängten PDF zu sehen (grün kommentiert)



Es wäre aber natürlich besser, wenn für die Jahreszahlen Kategorien verwenden könnte, denn dann ist das Datum des Timestamp egal; nur das Jahr müsste natürlich ausgelesen werden.
Das, was mir vorschwebt, ist bei Chart.js (https://www.chartjs.org/docs/latest/getting-started/usage.html) zu sehen:
hc 2025-10-08 19-51-53 001.png
Nur habe ich leider viel zu wenig JS-Kenntnisse, wie ich den zugehörigen Code bei chart.component.js einbauen kann.

nach einem weiteren Tag des Lernens bin ich einige Schritte weiter.

Für die Darstellung von Monats- und Jahreswerten wird nun keine Zeitachse mehr verwendet, sondern eine Kategorie-Achse.
Mit dem neu definierten Parameter unit="12m" werden die Werte der vergangenen 12 Monate dargestellt. Analog gilt das für die Werte der vergangenen 10 Jahre und dem neuen Parameter unit="10y".
Die Logfiles mit den Werten müssten dann natürlich nur einen Wert pro Monat bzw. pro Jahr beinhalten.
Aus einem beliebigen Timestamp mit dem Standardformat "YYY-mm-YYYY_HH:MM:SS" extrahiert der Code nun die Beschriftung für die Monats- bzw Jahresbalken im Format "mm.YYYY" bzw. "YYYY".

So sieht es aus:
1.) Monats-Chart
LogFile aus FileLog_teMonths (ein Wert für jeden Monat):
2023-01-31_23:59:54 pvData eTest: 44
2023-02-28_23:59:54 pvData eTest: 28
..
2023-12-31_23:59:54 pvData eTest: 35
2024-01-31_23:59:54 pvData eTest: 31
2024-02-28_23:59:54 pvData eTest: 41
...
2024-11-30_23:59:54 pvData eTest: 36
2024-12-31_23:59:54 pvData eTest: 32
2025-01-31_23:59:54 pvData eTest: 31
2025-02-28_23:59:54 pvData eTest: 39
...
2025-08-31_23:59:54 pvData eTest: 39
2025-09-30_23:59:54 pvData eTest: 37

HTML
<ftui-chart unit="12m" y-min="0">
  <ftui-chart-data
    log="FileLog_teMonths" file="CURRENT"
    spec="4:pvData.eTest" type="bar">
  </ftui-chart-data>
  <!--<ftui-chart-controls units="12m"></ftui-chart-controls>-->
</ftui-chart>



2.) Jahres-Chart
LogFile aus FileLog_teYears(ein Wert für jedes Jahr):
2014-12-31_00:00:00 pvData eTest: 368
2015-12-31_23:59:06 pvData eTest: 421
2016-12-31_23:59:06 pvData eTest: 366
...
2022-12-31_23:59:06 pvData eTest: 342
2023-12-31_23:59:06 pvData eTest: 366
2024-12-31_23:59:06 pvData eTest: 391

HTML
<ftui-chart y-min="0" unit="10y">
  <ftui-chart-data
    log="FileLog_teYears" file="CURRENT"
    spec="4:pvData.eTest" type="bar">
  </ftui-chart-data>
  <!--<ftui-chart-controls units="12y"></ftui-chart-controls>-->
</ftui-chart>


<ftui-chart-controls> ist auskommentiert, weil das noch nicht läuft und ich die Ursache dafür noch nicht gefunden habe. Ich vermute sie in chart.components.js unter static get observedAttributes() und dort bei get StartDate() bzw getDate()

Ich kenne mich mit JS eben nicht aus.  :-[



Die vorgenommenen Ergänzung am Code lade ich gleich als kommentiertes PDF hoch.

Ahh cool - vielen Dank. Leider kenn ich mich mit JS nicht aus und Codex konnte auch nicht wirklich helfen. Ich werde es gleich mal testen

Zitat von: Kai-Alfonso am 09 Oktober 2025, 19:31:47Leider kenn ich mich mit JS nicht aus

Prima, da sind wir schon zwei...  :)

@setstate

Es wäre toll, wenn du meine Ergänzungen prüfen und dann dauerhaft einbauen könntest.
Du bist garantiert fit in JS.

Zitat von: DocCyber am 09 Oktober 2025, 19:39:54

Zitat von: Kai-Alfonso am 09 Oktober 2025, 19:31:47Leider kenn ich mich mit JS nicht aus

Prima, da sind wir schon zwei...  :)

Zumindest scheint du die relevanten Teile gefunden und verstanden zu haben ;-) Verstehe auch irgendwie nicht, dass das bei chart.js nicht von Hause aus geht.

Zitat von: Kai-Alfonso am 09 Oktober 2025, 19:48:52Zumindest scheint du die relevanten Teile gefunden und verstanden zu haben ;-) Verstehe auch irgendwie nicht, dass das bei chart.js nicht von Hause aus geht.

gefunden ja, verstanden: naja...

Aber chart.js kann das schon. Darin habe ich auch nichts geändert.
Es war halt nur noch nicht in chart...component.js implementiert.

Ich hab das jetzt mal versucht nachzuvollziehen und habe Deine Änderungen eingepflegt. Aber leider scheint es bei mir nicht zu klappen. Ich nutze allerdings auch Dblog

<ftui-view-section>
  <ftui-label slot="header">Jahresverbrauch</ftui-label>
  <ftui-view-item>
    <ftui-chart width="100%">
      <ftui-chart-data fill color="red" log="DbLog" file="history" type="bar" unit="10y" y-min="0"
        spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMeterLast"
        [update]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMeterLast">
      </ftui-chart-data>
    </ftui-chart>
  </ftui-view-item>
</ftui-view-section>

Die
Daten dazu:

TIMESTAMP DEVICE READING VALUE
01.12.2017 00:00 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 3188
01.12.2018 00:00 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 4957
01.12.2019 00:00 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 3933
01.12.2020 00:00 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 4816
31.12.2021 23:59 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 5061
31.12.2022 23:59 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 4909.453
31.12.2023 23:59 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 5572.840
31.12.2024 23:59 StromVerbrauchsZaehler Stromzaehler_total_consumption_EnergyMeterLast 5008


und so so sieht es dann aus - vielleicht habe ich auch was bei den Änderungen verhauen. Zumindest vscode meldete keinen Syntax Error

was mir auffällt, ist der Unterschied bei spec. Das sieht bei mir anders aus, aber das mag mit dbLog zusammenhängen. Das nutze und kenne ich daher nicht, und kann also nicht sagen, was das bewirkt.
spec="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMeterLast"

Außerdem ist das Format des Timestamp völlig anders.
Ich nutze ein FileLog-Device für die Logdateien, und dessen Zeitformat ist anders als bei dir, nämlich YYYY-mm-DD_HH:MM:SS.
Ich könnte mir vorstellen, dass das einen Unterschied macht.

Du kannst aber mal ausprobieren, ob es GRUNDSÄTZLICH (ohne Nutzung von dbLog) funktioniert, indem du dir mal ein FileLog bastelst und damit arbeitest.
fileLogDummy brauche ich nur, um das FileLog-Device anlegen zu können. Ansonsten ist der Dummy völlig nutzlos, weil ich meine Daten in prozedural reinschreiben lasse.
define fileLogDummy dummy
define FileLog_teMonths FileLog ./log/teMonths.log fileLogDummy:.*
Dann schreibst du eine Textdatei (bei mir heißt sie teMonths.log) mit den Monats- oder Jahreswerten (wie in meinem Beispiel) und speicherst sie unter ./log/teMonths.log ab.
Anschließend müsste es wie in meinem Beispiel-HTML laufen.

So, hab ich mal gemacht. Zumindest bekomme ich einen Jahresbalken von 2024 aus dem Filelog, aber keine Daten davor

schicke mir doch bitte mal die Daten aus deiner log-Datei, und deinen HTML-Code für <ftui-chart>.
Für heute melde ich mich zwar ab, aber morgen kann ich mal reinschauen.

Zitat von: DocCyber am 09 Oktober 2025, 21:56:28schicke mir doch bitte mal die Daten aus deiner log-Datei, und deinen HTML-Code für <ftui-chart>.
Für heute melde ich mich zwar ab, aber morgen kann ich mal reinschauen.

klar, vielen Dank. Ich hab das von dir übernommen.

cat teYears.log

2014-12-31_00:00:00 pvData eTest: 368
2015-12-31_23:59:06 pvData eTest: 421
2016-12-31_23:59:06 pvData eTest: 366
2017-12-31_23:59:06 pvData eTest: 342
2018-12-31_23:59:06 pvData eTest: 733
2019-12-31_23:59:06 pvData eTest: 467
2020-12-31_23:59:06 pvData eTest: 111
2021-12-31_23:59:06 pvData eTest: 222
2022-12-31_23:59:06 pvData eTest: 342
2023-12-31_23:59:06 pvData eTest: 366
2024-12-31_23:59:06 pvData eTest: 391

und das HTML

<ftui-view-section>
  <ftui-label slot="header">Monatsverbrauch</ftui-label>
  <ftui-view-item>
    <ftui-chart y-min="0" unit="10y">
      <ftui-chart-data log="FileLog_teYears" file="CURRENT" spec="4:pvData.eTest" type="bar">
      </ftui-chart-data>
      <!--<ftui-chart-controls units="12y"></ftui-chart-controls>-->
    </ftui-chart>
  </ftui-view-item>
</ftui-view-section>

Vielleicht schickst du mir auch die *.js Files. Vielleicht ist beim c/p aus dem pdf was schief gelaufen?

So, danke DocCybers Hilfe geht es auch bei mir - auch mit Dblog. War wohl gestern zu spät für mich für die c/p Aktionen  :o

darf ich mich hier dranhängen?
Gibt es eine Möglichkeit, mehrere Werte übereinander zu legen? Bei PV z.b. Ertrag,Eigenverbrauch/Einspeisung z.b.? wenn nicht, dann nebeneinander
?

[edit]

bin gerade drauf gekommen, das dieser eintrag " type="bar" " bei mir die anzeige unterdrückt, es klappt nur so
<ftui-chart-data label="Bezug" color="red" log=" _FileLog_SmartMeter" spec="4:statGesamt_Bezug_kWhDay"></ftui-chart-data>
        <ftui-chart-data label="Einspeisung" color="yellow" log=" _FileLog_SmartMeter" spec="4:statGesamt_Einspeisung_kWhDay"></ftui-chart-data>
<ftui-chart-controls units="week, year"></ftui-chart-controls>
       
aber wie schaffe ich es das sofort die Tagesauswertung angezeigt wird, statt die stundenauswertung?

Normalerweise erreicht man das indem man in <ftui-chart> z.B. unit="day" setzt.
Dann wird direkt der Tagesverlauf angezeigt. Entsprechend dann mit weeks, month, 30d, year. Steht aber auch im ersten Post.

Also so:
<ftui-chart unit="day">
   <ftui-chart-data label="Bezug" color="red" log=" _FileLog_SmartMeter" spec="4:statGesamt_Bezug_kWhDay"></ftui-chart-data>
        <ftui-chart-data label="Einspeisung" color="yellow" log=" _FileLog_SmartMeter" spec="4:statGesamt_Einspeisung_kWhDay"></ftui-chart-data>
   <ftui-chart-controls units="week, year"></ftui-chart-controls>
</ftui-chart>

Siehe auch:
https://github.com/knowthelist/ftui?tab=readme-ov-file#chart

aha, danke. hatte nur das eingetragen

<ftui-chart-controls units="week, month"></ftui-chart-controls>

Hallo,

Ich bräuchte auch die Darstellung über mehrere Jahre.
Wird die Änderung von DocCyber eingepflegt ?
Bei händischer Anpassung ist beim nächsten Update ja wieder alles weg ...

Gruss
Joe

meinst du das hier ? habe einfach year eingetragen. und original ftui, ohne patches.

Zitat von: satprofi am 07 November 2025, 09:58:36meinst du das hier ? habe einfach year eingetragen. und original ftui, ohne patches.

Nein, siehe Threadtitel und Beitrag #2
X-Achse nur ganze Jahre und 1 Eintrag pro Jahr im Logfile

achso, ok.

Zitat von: DocCyber am 06 Oktober 2025, 18:43:06Hallo zusammen.

das Anzeigen von Tagesdaten in einem Chart funktioniert so:

Code Auswählen Erweitern

<ftui-chart unit="month">
  <ftui-chart-data log="FileLog_Days" file="CURRENT" spec="4:pvData.Wert" type="bar"></ftui-chart-data>
</ftui-chart>

Frage dazu, habt ihr anderes FTUI ? wenn ich type="bar" einfüge, sehe ich nichts, ohne die Balken aber als Strich. bei mir klappts nur so

<ftui-chart y-label="kWh" y1-label="Smartmeter" y1-unit="%" data-yunit="auto" unit="year">
 
    <ftui-chart-data log="_FileLog_SmartMeter" spec="4:statGesamt_Bezug_kWhMonth" data-yunit="auto"></ftui-chart-data>
   <ftui-chart-controls units="year"></ftui-chart-controls>
</ftui-chart>