eCharts in FHEM (Version 0.0.12.4)

[andies]

https://forum.fhem.de/index.php?msg=1302859
ganz vorn (immer)

[FhemPiUser]

Danke für das Modul, das klingt spannend.

Eine Frage zu der Möglichkeit in der Zeitschiene mit dem Symbol oben rechts hin- und herzugehen: Beim SVG konnte man größere Zeitspannen auf ein Mal (z.B. 1 Jahr bei einem Tagesgraph) zurückgehen, in dem man in der URL ein offset von z.B. "-365" für 365 Tage eingibt anstatt 300x den Button "zurück" zu drücken. Gibt es beim echarts auch die Möglichkeit größere Zeitspannen auf ein Mal zurückzuspringen?

[andies]

Da ich (wie SVG) aus der URL die Zeitspanne auslesen lasse, sollte das eigentlich gehen. Ich habe den Code von Rudi ja nur kopiert. Probier es doch mal aus, viel schief gehen kann eigentlich nicht.

[FhemPiUser]

Da ich (wie SVG) aus der URL die Zeitspanne auslesen lasse, sollte das eigentlich gehen. Ich habe den Code von Rudi ja nur kopiert. Probier es doch mal aus, viel schief gehen kann eigentlich nicht.

Habs probiert, zurückgehen über URL geht.

Allerdings sieht bei mir der Graph kaum leserlich aus (siehe Screenshot): Höhe ist viel zu gering und Schrift zu groß. Habe es nach Anleitung gemacht. Woran kann das liegen und wie kann man es korrigieren?

Auch konnte ich keine markerline machen, da die Zeile ein Leerzeichen enthält ("Batterie Level")

[MadMax]

Hast du das Attribut plotsize definiert?

[FhemPiUser]

Hast du das Attribut plotsize definiert?

Danke, damit klappt es mit der Größe. Aber marker geht noch nicht, wegen dem Leerzeichen in dem Namen der Line (Batterie Level)?

Und Legende und Titel sind übereinander. Mit position legend/title kann man scheinbar nur horizonzal die Position ändern, aber nicht vertikal.

[andies]

Danke, damit klappt es mit der Größe. Aber marker geht noch nicht, wegen dem Leerzeichen in dem Namen der Line (Batterie Level)?

Und Legende und Titel sind übereinander. Mit position legend/title kann man scheinbar nur horizonzal die Position ändern, aber nicht vertikal.

Was markerline angeht, das liegt daran:

places lines with constant values (markerlines) at data. The value of the attribut is a list with the title/name of the data (this is typically shown in the legend) and the values, **separated by spaces**

Ich könnte ein Attribut definieren, dass für diese Dinge den Separator übernimmt. Und wenn der nicht definiert ist, nimmt man ein Leerzeichen. Wäre das eine Idee?

Den zweiten Punkt kapiere ich noch nicht. Kannst Du mir einen Screenshot schicken oder das ausführlicher erklären?

[FhemPiUser]

Danke erstmal für die Hinweise. Für den marker würde es reichen, wenn man den Namen mit Leerzeichen in Häkchen setzen kann oder z.B. mit %20 escapen kann und das funktionieren würde, also z.B.

Code Auswählen Erweitern

attr eCharts_FileLog_SH10rt_Sum_1 marker "Batterie Level":min,max

oder

Code Auswählen Erweitern

attr eCharts_FileLog_SH10rt_Sum_1 marker Batterie%20Level:min,max

Das andere Problem ist, dass Titel und Legende bei mir übereinander sind (siehe Screenshot) und ich dies offenbar nicht mit attr position_legend und position_title lösen kann.

Des Weiteren wäre es super, wenn man bei plotsize auch relative Breite angeben kann zur Screenbreite, also z.B. 100% statt fix 800pixel, da dies bei verschieden breiten Anzeigen / Bildschirmen (Handy oder PC) dann mit absoluten Werten nicht optimal ist.

[andies]

Für den marker würde es reichen, wenn man den Namen mit Leerzeichen in Häkchen setzen kann.

Des Weiteren wäre es super, wenn man bei plotsize auch relative Breite angeben kann zur Screenbreite, also z.B. 100% statt fix 800pixel, da dies bei verschieden breiten Anzeigen / Bildschirmen (Handy oder PC) dann mit absoluten Werten nicht optimal ist.

Ich habe im ersten Post jetzt Version 0.0.12.2, die die beiden hier zitierten Dinge lösen sollte (Details siehe in der Hilfedatei, die quotes sind "). Da ich das selbst nicht umfangreich getestet habe, bitte unbedingt vorher ein update machen, ich hatte da manchmal Abstürze.

Das mit dem Titel und der Legende scheint problematischer zu sein. Nimm mal die aktuelle Version 0.0.12.3 aus dem ersten Post und setze das Attribut

Code Auswählen Erweitern

attr TemperaturPlot position_legend_top 20eventuell geht das dann?

[FhemPiUser]

Vielen Dank für die schnelle Umsetzung!

Also das position_legend_top löst das Problem mit dem Titel, vielen Dank!

Kann es sein, dass das Häkchen um Sapces zu erlauben nur bei markerline umgesetzt ist und nicht bei marker? Jedenfalls klappt es bei mir nicht mit marker und da steht es auch nicht im Hilfetext. Bei markerline steht es im Hilfetext.

Die Breite des Bildschirms auszunutzen klappt bei mir nicht. Mit "plotsize width 100%,400" bekomme ich einen sehr schmalen Graph.

[FhemPiUser]

Danke nochmal für das Modul! Ich finde ja die eCharts klasse, super wenn das in fhem unterstützt wird.

Ist eigentlich noch die Unterstützung weiterer eCharts Typen geplant?

Ich denke z.B. stacked area charts (siehe hier)?

Cool wäre auch die Unterstützung von stacked bar charts, das geht meines Wissens nach bei fhem noch garnicht (nicht einmal mit doif uiTable).

Das wäre z.B. für die Darstellung von PV Statistiken oder Stromverbrauch nach Erzeugern (Wärmepumpe, Wallbox,...) interessant.

[andies]

Kann es sein, dass das Häkchen um Sapces zu erlauben nur bei markerline umgesetzt ist und nicht bei marker?

Die Breite des Bildschirms auszunutzen klappt bei mir nicht. Mit "plotsize width 100%,400" bekomme ich einen sehr schmalen Graph.

Sorry für die lange Leitung, lag gestern krank im Bett. marker habe ich schlicht übersehen und sollte jetzt gehen; ich habe das auch gleich für opacity mit gemacht.

Bei plotsize habe ich jetzt ein neues vorgehen, probiere das mal. Bitte vorher unbedingt backup, ich teste das zwar bei mir, aber ich nutze sehr wenig der features und das Ding stürzt wirklich gern ab.

Datei ist (wie immer) im ersten Post.

[andies]

Ist eigentlich noch die Unterstützung weiterer eCharts Typen geplant?

Ich denke z.B. stacked area charts (siehe hier)?

Darüber habe ich in der Tat nicht nachgedacht. Technisch ist das aber wahrscheinlich sehr einfach, weil man in der Javascript nur wenige Zeilen ersetzen müsste (wahrscheinlich).

Bei der Umsetzung habe ich zwei Probleme, das erste anscheinend lösbar:

• Ich kann gar nicht programmieren. Und ich mache das tatsächlich so, dass ich ChatGPT sage, was ich brauche (vor allem bei RegEx ist das extrem hilfreich) und dann schreibt der den Code und ich probiere, bis es klappt. Schwierig wird es, wenn ich keinen use-case habe, weil ich dann nicht so lange testen kann, bis ich die Fehler gefunden habe.
• Das ist kritischer, weil KI nicht helfen kann. Wenn man so etwas wie eine neue Art von Graphiken einführen will, braucht man eine Art Konzept, wie man das einführt: Soll das mit Attributen/Readings/WasAucHImmer gekennzeichnet werden, wie ruft der Anwender das auf, wie bindet man das in das gesamte Objekt ein? An solchen Stellen habe ich massive Defizite, weil ich das nie gelernt habe. Also da bräuchte ich Hilfe.

[andies]

Ist technisch doch nicht so einfach:

Notice: stack only supports stacking on value and log axis for now. time and category axis are not supported.

und ich habe x-Axis als time, siehe hier
Siehe nächsten Post. Können wir ja mal probieren.

[andies]

Hmm, jetzt quatsche ich hier ständig und anscheinend geht es doch einfach. Ich habe das jetzt mal ausprobiert, bin mir aber nicht sicher, ob das richtig läuft. Ich habe zu wenig Beispiele, um das sicher zu testen. Daher hänge ich die Version mal ausnahmsweise hier an und bitte um Prüfung, in jedem Fall bitte vorher backup. Wenn es geht, dann stelle ich die vorne ein.

Bisher stacked man Linien, ich weiß aber noch nicht, wie auch gefüllte Linien etc gehen.

PS Man muss ein Attribut "stacked" setzen und dann stapelt er die Daten. In meinem Beispiel sind das Temperaturen, das ist jetzt (etwas) sinnfrei.