[GELÖST (fast...)] Balkengrafik mehrerer Jahre mit <ftui-chart>

[DocCyber]

Hallo 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>Du darfst diesen Dateianhang nicht ansehen.

bei Monatswerten funktioniert das analog:

Code Auswählen Erweitern

<ftui-chart unit="year">
  <ftui-chart-data log="FileLog_Months" file="CURRENT" spec="4:pvData.eTest" type="bar"></ftui-chart-data>
</ftui-chart>Du darfst diesen Dateianhang nicht ansehen.

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.

Code Auswählen Erweitern

<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?

[Kai-Alfonso]

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

[DocCyber]

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.

Code Auswählen Erweitern

<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>
Du darfst diesen Dateianhang nicht ansehen.

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 zu sehen:
Du darfst diesen Dateianhang nicht ansehen.
Nur habe ich leider viel zu wenig JS-Kenntnisse, wie ich den zugehörigen Code bei chart.component.js einbauen kann.

[DocCyber]

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):

Code Auswählen Erweitern

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

Code Auswählen Erweitern

<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):

Code Auswählen Erweitern

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

Code Auswählen Erweitern

<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.

[Kai-Alfonso]

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

[DocCyber]

Leider kenn ich mich mit JS nicht aus

Prima, da sind wir schon zwei... 

[DocCyber]

@setstate

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

[Kai-Alfonso]

Leider 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.

[DocCyber]

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.

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.

[Kai-Alfonso]

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

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

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

[DocCyber]

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.

Code Auswählen Erweitern

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.

[Kai-Alfonso]

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

[DocCyber]

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.

[Kai-Alfonso]

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.

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

cat teYears.log

Code Auswählen Erweitern

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

Code Auswählen Erweitern

<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?