FTUI Neue Version chart_widget

[dirk.k]

Hallo,
@eki: erst mal danke für deine tolle Arbeit.
Wurde diese Version in der letzten Zeit schon mal irgendwann eingecheckt?
Ich fahre immer noch einen manuell installierten Release und würde die Updatesperre gern rausnehmen.

[amenomade]

Das ist keine Update-Geschichte. Du musst einfach deine Definition in der HTML Datei von FTUI anpassen

[dirk.k]

Zumindest war es ein Update-Thema...
Ich hatte Mitte letzten Jahres ein Thema wegen diverser Darstellungsprobleme geöffnet, was von EKI zügig und zu vollster Zufriedenheit gelöst wurde.
Damals hatte ich die "Beta" manuell eingespielt, die in diesem Beitrag hier verlinkt ist/war...
https://forum.fhem.de/index.php/topic,100412.0.html
Anfang dieses Jahres hatte ich due Update-Sperre herausgenommen und prompt wurde die "alte" Version wieder installiert und ich musste das update wieder manuell installieren und vom Update ausschliessen. Die "neue" Version war noch nicht eingecheckt.
https://forum.fhem.de/index.php/topic,101750.msg1013239.html#msg1013239

Da ich bei der Versionierung nicht durchsehe, kann ich ohne Installation nicht feststellen, ob die gefixte Version eingecheckt ist.
Kann mir da jemand helfen?

[amenomade]

Zu deine Frage: man kann hier sehen, dass das chart widget immer noch 2 Jahre alt ist: https://github.com/knowthelist/fhem-tablet-ui/tree/master/www/tablet/js

Aber das Problem, das Du hier darstellst, ist eigentlich ein anderes, das durch deinen Html Code gelöst werden kann:

Code Auswählen Erweitern

data-columnspec='["4:temperature","4:humidity","4:pm25\\x3a","4:pm25_average"]'

[eki]

Ich habe jetzt mal endlich die aktuelle Version in das FTUI von setstate weiter gegeben. Sobald er meinen Pull Request annimmt, sollte das dann auch mit dem normalen Update mitkommen.

[desyer]

Hallo zusammen,

zum aktuellen chart widget habe im Moment noch ein offenes Problem. Ich höffe Ihr könnt mir dabei helfen.
Ich möchte gerne den Spirtverlauf meiner Tankstellen über das Chart anzeigen lassen. Dies funktioniert auch soweit.
Nur zeigt es mir für jede Tankstelle zwei Lininen an (siehe Bild im Anhang)

[eki]

Bitte bei solchen Fragen immer 2 Informationen mit posten (sonst kann man da gar nichts dazu sagen bzw. gar nicht helfen):
1. Die Chart Definition im HTML (<div data-type="chart"...)
2. Ein Auszug aus dem Logfile (oder ein List der LogDB) welches möglichst representative logs enthält (am Besten für den im Beispiel gezeigten Zeitraum)

[desyer]

Bitte bei solchen Fragen immer 2 Informationen mit posten (sonst kann man da gar nichts dazu sagen bzw. gar nicht helfen):
1. Die Chart Definition im HTML (<div data-type="chart"...)
2. Ein Auszug aus dem Logfile (oder ein List der LogDB) welches möglichst representative logs enthält (am Besten für den im Beispiel gezeigten Zeitraum)

Vielen Dank für deine Rückmeldung. Anbei habe ich die fehlenden Informationen hinzugefügt.

<div
         data-type="chart"
         data-device="Spritpreis.Avia"
         data-logdevice='["FileLog.Spritpreise.Avia","FileLog.Spritpreise.FT","FileLog.Spritpreise.Shell","FileLog.Spritpreise.Mangold"]'
         data-columnspec='["4:Spritpreis.Avia SuperE5","4:Spritpreis.FT SuperE5","4:Spritpreis.Shell SuperE5","4:Spritpreis.Mangold SuperE5"]'
         data-style='["ftui l0dot","ftui l1dot","ftui l2dot","ftui l3dot"]'
         data-ptype='["lines"]'
         data-uaxis='["primary"]'
         data-legend='["Avia","FT","Shell","Mangold"]'
         data-yunit=" EUR"
         data-minvalue="1,00"
         data-maxvalue="1.50"
         data-yticks_format="#.##"
         data-height="300"
         data-daysago_start="24h"
           data-daysago_end="0h"
         data-crosshair="true"
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0"
         data-daysago_end="-1"
         data-showlegend="true"
         data-yunit_sec="EUR"         
></div>

2020-05-04_11:42:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_11:52:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:02:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:12:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:22:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:32:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:42:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_12:52:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_13:02:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_13:12:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_13:22:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_13:32:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_13:42:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_13:52:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_14:02:56 Spritpreis.Shell SuperE5: 1.16
2020-05-04_14:12:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_14:22:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_14:32:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_14:42:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_14:52:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_15:02:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_15:12:56 Spritpreis.Shell SuperE5: 1.12
2020-05-04_15:22:56 Spritpreis.Shell SuperE5: 1.12

[eki]

Mach mal statt der Leerzeichen Punkte in die Columnspec. Also:

Code Auswählen Erweitern


data-columnspec='["4:Spritpreis.Avia,SuperE5","4:Spritpreis.FT,SuperE5","4:Spritpreis.Shell,SuperE5","4:Spritpreis.Mangold.SuperE5"]'


[desyer]

Mach mal statt der Leerzeichen Punkte in die Columnspec. Also:

Code Auswählen Erweitern


data-columnspec='["4:Spritpreis.Avia,SuperE5","4:Spritpreis.FT,SuperE5","4:Spritpreis.Shell,SuperE5","4:Spritpreis.Mangold.SuperE5"]'


Vielen Dank, durch die Änderung wurde das Problem gelöst.

[somansch]

Hallo eki,

ich nutze die Charts sehr erfolgreich, danke an dieser Stelle 

Seit dem letzten Update habe ich jedoch zwei Probleme festgestellt.

1. Der Wert per Cursor entspricht nicht dem tatsächlichen Wert des Readings bzw. der Skala beim Spritpreis (siehe "Spritpreis.jpg" im Anhang)
Definition:

Code Auswählen Erweitern

<div class="fullsize showbusy"
data-type="chart"
data-device="BK"
data-logdevice="FileLog_Spritpreise"
data-columnspec='["4:BK.SuperPlus\\x3a:","4:SIT.SuperPlus\\x3a:","4:BK.SuperE5\\x3a:","4:SIT.SuperE5\\x3a:","4:Gruber.SuperE5\\x3a:"]'
data-style='["ftui l18","ftui l14","ftui l13","ftui l12","ftui l10"]'
data-ptype='["lines","lines","lines"]'
data-legend='["BK-Plus","SIT-Plus","BK-E5","SIT-E5","Gruber-E5"]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-uaxis='["primary","primary"]'
data-xticks="auto"
data-xticks_round="auto"
data-yticks="0.03"
data-yticks_prio="primary"
data-show_both_axes="false"
data-ytext="Preis pro Liter"
data-yunit="€"
data-y_margin="20"
data-width="100%"
data-height="300px"
data-nofulldays="true"
data-daysago_start="144h"
data-daysago_end="0h"
data-timeformat="hh:mm\LF\dd.MM.."
data-prefetch="true"
data-timeranges='[
["Aktueller Monat","0M","-1M"],
["Letzter Monat","1M","0M"],
["Letzte 3 Monate","3M","0M"],
["Aktuelle Woche","0W","-1W"],
["Letzte Woche","1W","0W"],
["Heute","0D","-1D"],
["Gestern","1D","0D"]
]'
></div>

Log:

Code Auswählen Erweitern

2020-05-11_08:35:06 BK SuperPlus: 1.18
2020-05-11_08:35:06 BK SuperE5: 1.10
2020-05-11_08:38:04 Gruber SuperE5: 1.10
2020-05-11_08:38:20 SIT SuperPlus: 1.29
2020-05-11_08:38:20 SIT SuperE5: 1.21
2020-05-11_08:45:07 BK SuperPlus: 1.18
2020-05-11_08:45:07 BK SuperE5: 1.10
2020-05-11_08:48:04 Gruber SuperE5: 1.10
2020-05-11_08:48:20 SIT SuperPlus: 1.27
2020-05-11_08:48:20 SIT SuperE5: 1.19
2020-05-11_08:55:06 BK SuperPlus: 1.18
2020-05-11_08:55:06 BK SuperE5: 1.10
2020-05-11_08:58:04 Gruber SuperE5: 1.10

2. Der zweite Graph für BMI wird nicht mehr dargestellt (siehe "Waage.jpg" im Anhang)
Definition:

Code Auswählen Erweitern

<div class="nobuttons"
data-type="chart"
data-logdevice='["FileLog_Waage_Peggy","FileLog_Waage_Peggy"]'
data-columnspec='["4:weight\\x3a:","4:bmi\\x3a:"]'
data-style='["ftui l10","ftui l12"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-xticks="auto"
data-xticks_round="auto"
data-yticks="auto"
data-yticks_sec="auto"
data-yticks_format="##.#"
data-yticks_format_sec="##.#"
data-yticks_prio="primary"
data-y_margin="20"
data-y_margin_sec="20"
data-ytext="Gewicht"
data-ytext_sec="BMI"
data-yunit="kg"
data-show_both_axes="true"
data-crosshair="true"
data-showlegend="false"
data-width="100%"
data-height="130px"
data-nofulldays="true"
data-daysago_start="12w"
data-daysago_end="now"
data-timeformat="dd.MM.."></div>
</div>
Log:

Code Auswählen Erweitern

2020-05-02_09:52:11 withings_U18349058 pulseWave: 7.547
2020-05-02_09:52:11 withings_U18349058 heartPulse: 102
2020-05-02_09:52:11 withings_U18349058 pulseWaveRaw: 7.838
2020-05-02_09:52:11 withings_U18349058 weight: 50.842
2020-05-02_09:55:26 withings_U18349058 bmi: 18.67
2020-05-02_09:52:11 withings_U18349058 fatRatio: 18.154
2020-05-02_09:52:11 withings_U18349058 muscleRatio: 77.672
2020-05-02_09:52:11 withings_U18349058 boneRatio: 4.15
2020-05-02_09:52:11 withings_U18349058 hydration: 55.82
2020-05-07_07:47:51 withings_U18349058 pulseWave: 7.313
2020-05-07_07:47:51 withings_U18349058 heartPulse: 110
2020-05-07_07:47:51 withings_U18349058 pulseWaveRaw: 9.906
2020-05-07_07:47:51 withings_U18349058 weight: 50.705
2020-05-07_07:52:49 withings_U18349058 bmi: 18.62
2020-05-07_07:47:51 withings_U18349058 fatRatio: 18.539
2020-05-07_07:47:51 withings_U18349058 muscleRatio: 77.29
2020-05-07_07:47:51 withings_U18349058 boneRatio: 4.122
2020-05-07_07:47:51 withings_U18349058 hydration: 55.517

PS: Auch hier fällt mir auf, dass der Wert bei Cursor nicht dem tatsächlichen Wert entspricht.

Viele Grüße
Andreas

[Dracolein]

Grüße zusammen,
ich bräuchte Hilfe bei der Darstellung des monatlichen Gasverbrauchs, d.h. Zielsetzung sind zum Jahresende insgesamt 12 Balken, die den monatlichen Gasverbrauch darstellen. Für die jeweils letzten 30 Tage habe ich dies problemlos hinbekommen.

Als Basis dient ein FileLog, wo zu jedem Ende des Monats ein Eintrag mit der Gesamtsumme eingetragen wird, als Beispiel hier:

2020-03-31_23:59:00 Gaszaehler EnergyCostMonth2359: 170.124

Für die Monate Januar - einschl. April existieren bereits Werte. Der zweite Graph zeigt die Durchschnittstemperatur an und kann hier erstmal nbis auf Weiteres ignoriert werden.

Code Auswählen Erweitern

<div data-type="chart"
                                data-device="Gaszaehler"
                                data-logdevice='["Log_Durchschnittstemp","Log_Gaszaehler2359"]'
                                data-logfile="CURRENT"
                                data-columnspec='["4:Tagesdurchschnittstemperatur:","4:EnergyCostMonth2359:"]'
                                data-style='["ftui l4","ftui l3fill"]'
                                data-ptype='["lines","bars"]'
                                data-uaxis='["primary","secondary"]'
                                data-legend='["Außentemp [°C]","Gaskosten [EUR]"]'
                                data-legendpos='["left","top"]'
                                data-showlegend="true"
                                data-yunit="°C"
                                data-ytext=""
                                data-minvalue="auto"
                                data-maxvalue="auto"
                                data-yunit_sec="€"
                                data-ytext_sec=""
                                data-height="200"
                                data-yticks="auto"
                                data-yticks_sec="auto"
                                data-yticks_prio='secondary'
                                data-minvalue_sec="auto"
                                data-maxvalue_sec="auto"
                                data-nofulldays="true"
                                data-daysago_start="12m"
                                data-daysago_end="-1"
                                data-cursorgroup="1"
                                data-scrollgroup="1"
                                data-xticks="auto">
                                </div>

Mein Problem ist, dass
1.) der April nicht im Diagramm dargestellt wird, obwohl der Messwert vorhanden ist
2.) die Beschriftung der X-Achse fehlt. Dort hätte ich gern irgendwas wie 01, 02 ...12 oder Jan, Feb, Mrz....

Im FHEM-Wiki habe ich den Abschnitt "Zeitformat der X-Achse" gelesen, aber nicht wirklich kapiert, wo diese Formatierungsvorgabe eingegeben werden soll.

Anbei ein Screenshot, wie obige Konfiguration derzeit aussieht:

[eki]

wie hoch ist denn der Verbrauch im April (etwa ca. 117 Euro?).

Falls ich mit den ca. 117 Euro recht habe, dann ist alles OK, denn soweit ich das sehe, ist der April schon dargestellt, aber eben identisch mit dem Minimalwert aller Werte. Wenn Du data-minvalue_sec auf 'auto' hast, dann ist das genau das geplante Verhalten. Falls Du das nicht möchtest, musst Du da einen konkreten Wert eingeben.

[Dracolein]

wie hoch ist denn der Verbrauch im April (etwa ca. 117 Euro?).

Falls ich mit den ca. 117 Euro recht habe, dann ist alles OK, denn soweit ich das sehe, ist der April schon dargestellt, aber eben identisch mit dem Minimalwert aller Werte. Wenn Du data-minvalue_sec auf 'auto' hast, dann ist das genau das geplante Verhalten. Falls Du das nicht möchtest, musst Du da einen konkreten Wert eingeben.

Au backe, Du hast vollkommen recht. Das hatte ich komplett übersehen.

Jetzt fehlt mir nur noch eine sinnvolle Beschriftung der X-Achse

[eki]

probiers mal mit:

Code Auswählen Erweitern


data-xticks="auto"
data-xticks_round="auto"