[FHEM-Tablet-UI] Chart

[Jojo11]

Hallo,

ich teste auch gerade mit den Plots in FTUI herum. Wenn ich die Schriftgröße der Achsenbeschriftung erhöhe, überschneiden sich Achsen und Text, was ziemlich unschön ausschaut. Mit welchem CSS-Parameter kann ich diesen Abstand vergrößern? Padding und margin bei .text.axes haben rein gar nichts verändert 

schöne Grüße
Jo

[RomanticBoy83]

Hallo eki und vielen Dank für die Mühen und Tips!
Hier einmal die gewünschten Infos:
1) Das funktionierenden gPlot-File für den Plot in Fhem:
2) Auszüge aus dem LogFile der Heizung (umsortiert um es besser lesen zu können):

Code Auswählen Erweitern


set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title ''
set ytics
set y2tics ("an" 100)
set grid
set ylabel "Temperatur °C"
set y2label "Pumpe"
set yrange [-25:50]
set y2range [0:1000]

#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.Aussentemperatur\x3a::
#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.HK1_Raumisttemperatur\x3a::
#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.WW_Isttemperatur\x3a:0:
#logproxy FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\x3a:0:$fld[4]=~'an'?1000:0
#logproxy FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe\x3a:0:
#logproxy FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp\x3a:0:$fld[3]=~'Ladepumpe'?100:0
#logproxy ConstY:{ReadingsVal("heizung","HK1_Raumsolltemperatur","0")}
#logproxy ConstY:{ReadingsVal("heizung","WW_Solltemperatur","0")}

plot "<IN>" using 1:2 axes x1y1 title 'aussen' ls l0 lw 1.5 with cubic,\
     "<IN>" using 1:2 axes x1y1 title 'innen' ls l1 lw 1.5 with cubic,\
     "<IN>" using 1:2 axes x1y1 title 'Wasser' ls l2 lw 1.5 with cubic,\
     "<IN>" using 1:2 axes x1y2 title 'Brenner' ls l6fill lw 0.2 with steps,\
     "<IN>" using 1:2 axes x1y2 title ' ' ls l1fill lw 0.2 with steps,\
     "<IN>" using 1:2 axes x1y2 title ' ' ls l2fill lw 0.2 with steps,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l1 lw 1 with points,\
     "<IN>" using 1:2 axes x1y1 title ' ' ls l2 lw 1 with points


Code Auswählen Erweitern


2016-03-08_09:16:17 heizung Aussentemperatur: 1
2016-03-08_09:15:29 heizung HK1_Raumisttemperatur: 20
2016-03-08_09:16:12 heizung WW_Isttemperatur: 50
2016-03-08_09:15:29 heizung HK1_Pumpe: 100
2016-03-08_20:26:36 heizung HK1_Pumpe: 0
2016-03-08_09:16:14 heizung Brenner_Ansteuerung: 1.Stufe an
2016-03-08_09:19:22 heizung Brenner_Ansteuerung: Kessel aus
2016-03-08_09:16:12 heizung WW_Pumpentyp: -
2016-03-08_20:29:21 heizung WW_Pumpentyp: Ladepumpe


Alle Zahlenwerte bekomme ich momentan über das Chart-Widget wunderbar dargestellt - es hängt bei den 'Brenner' und 'WW_Pumpentyp', welche ich über logProxy einbinden wolte:

Code Auswählen Erweitern

<div
data-type="chart"
data-logdevice="logproxy" <--das Device heißt bei mir auch so
data-columnspec='["FileLog:FileLog_heizung:4:heizung.Aussentemperatur\x3a::"]'
data-style='["ftui l2"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["außen"]'
...></div>


[h3llsp4wn]

Hallo eki,

hast Du was an der Darstellungsreihenfolge geändert? Ich musste mein gefüllten Graphen kpl. in der Reihenfolge der Definiton vertauschen, damit ich Sie wieder zu sehen bekomme. Das hat so schon mal geklappt. Allerdings ist die ist die Legende im Hintergrund ... die hätte ich eigentlich gerne über die Graphen "geplottet", also im Vordergrund - ich meine das war vor dem Update so ...

Eine Idee?

h3ll

[eki]

Hallo eki,

hast Du was an der Darstellungsreihenfolge geändert? Ich musste mein gefüllten Graphen kpl. in der Reihenfolge der Definiton vertauschen, damit ich Sie wieder zu sehen bekomme. Das hat so schon mal geklappt. Allerdings ist die ist die Legende im Hintergrund ... die hätte ich eigentlich gerne über die Graphen "geplottet", also im Vordergrund - ich meine das war vor dem Update so ...

Eine Idee?

h3ll

Ja, das war notwendig um die 3D Geschichte hin zu bekommen ohne zu viele switches in den code einbauen zu müssen, sorry. Das mit der Legende ist natürlich Geschmackssache, ich überleg mir mal was.

[eki]

...

Alle Zahlenwerte bekomme ich momentan über das Chart-Widget wunderbar dargestellt - es hängt bei den 'Brenner' und 'WW_Pumpentyp', welche ich über logProxy einbinden wolte:

Code Auswählen Erweitern

<div
data-type="chart"
data-logdevice="logproxy" <--das Device heißt bei mir auch so
data-columnspec='["FileLog:FileLog_heizung:4:heizung.Aussentemperatur\x3a::"]'
data-style='["ftui l2"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["außen"]'
...></div>


Das funktioniert grundsätzlich auch mit dem Chart. Das Problem sind nur die ineinander verschachtelten ' und " und die Maskierung der \.
In Deinem Falls müsstest Du die columnspec entsprechend zum gplot Eintrag:

Code Auswählen Erweitern


#logproxy FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\x3a:0:$fld[4]=~'an'?1000:0

in etwa folgendermaßen schreiben:

Code Auswählen Erweitern


data-columnspec='["FileLog:FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\\x3a:0:$fld[4]=~\"an\"?1000:0"]'


[eki]

Hallo,

ich teste auch gerade mit den Plots in FTUI herum. Wenn ich die Schriftgröße der Achsenbeschriftung erhöhe, überschneiden sich Achsen und Text, was ziemlich unschön ausschaut. Mit welchem CSS-Parameter kann ich diesen Abstand vergrößern? Padding und margin bei .text.axes haben rein gar nichts verändert 

schöne Grüße
Jo

Hast Du mal ein Bild wie das aussieht?

[RomanticBoy83]

Update:
Ich habe die Darstellung nun über logProxy darstellen können - Das Problem ist das Hex-Zeichen '\x3a', welches vom Widget nicht umgerechnet wird. Wenn ich dieses einfach wegfallen lasse, dann "treffe" ich noch immer die richtigen Einträge.
Nun kann ich jedoch noch immer nicht das Ergebnis manipulieren!

Der nachfolgende Code funktioniert und gibt den Wert 100 bzw. 0 im Chart wieder:

Code Auswählen Erweitern

"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe::"
Ich möchte jedoch gerne die Daten ändern/auswerten können (Notwendig bei der WW_Pumpentyp, welche keine Integer-Werte hat)

Code Auswählen Erweitern

"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp::$fld[3]=~'Ladepumpe'?100:0"

Änderung: Die Lösung wurde von Eki schon verraten "Maskierung in RegExp falsch"- ich habe den Post nur nicht gelesen!

[Jojo11]

Hast Du mal ein Bild wie das aussieht?

Hallo,

gerne, da das Forum ja gerade mal wieder erreichbar ist 

schöne Grüße
Jo

[eki]

Update:
Ich habe die Darstellung nun über logProxy darstellen können - Das Problem ist das Hex-Zeichen '\x3a', welches vom Widget nicht umgerechnet wird. Wenn ich dieses einfach wegfallen lasse, dann "treffe" ich noch immer die richtigen Einträge.
Nun kann ich jedoch noch immer nicht das Ergebnis manipulieren!

Der nachfolgende Code funktioniert und gibt den Wert 100 bzw. 0 im Chart wieder:

Code Auswählen Erweitern

"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe::"
Ich möchte jedoch gerne die Daten ändern/auswerten können (Notwendig bei der WW_Pumpentyp, welche keine Integer-Werte hat)

Code Auswählen Erweitern

"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp::$fld[3]=~'Ladepumpe'?100:0"

?! ... na lesen musst Du schon was ich Dir schreibe (siehe zwei Beiträge weiter oben).

[RomanticBoy83]

Ups!
Ich habe es echt nicht gelesen! Besten dank für die Ausführungen - genau dort war das Problem!

[no_Legend]

Hallo Leute,

ich versuche mich gerade daran eine Chart von meinem Gasverbauch zu erstellen.

Definiert habe ich chart wie folgt:

Code Auswählen Erweitern

<header>Gas Chart</header>
<div class="normal"
                data-type="chart"
                data-logdevice='["FileLog_GasVerbrauch","FileLog_GasVerbrauch"]'
                data-columnspec='["4:GasVerbrauch.countsOverall","4:GasVerbrauch.counterPerDay"]'
                data-style='["ftui l0fill","ftui l1fill"]'
                data-ptype='["lines","lines"]'
                data-uaxis='["primary","secondary"]'
                data-legend='["Zählerstand (m3)", "Heute (m3)"]'
                data-ytext="Zählerstand"
                data-minvalue="auto"
                data-maxvalue="auto"
                data-ytext_sec="Heute"
                data-yticks="auto"
                data-minvalue_sec="0"
                data-maxvalue_sec="15"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-nofulldays="true"
                data-crosshair="true"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="true"
                data-xticks="auto"
                data-height="270px">
</div>
Das Log device gibt folgendes aus:

Code Auswählen Erweitern


2016-03-21_14:16:31 GasVerbrauch countsOverall: 1240165
2016-03-21_14:16:31 GasVerbrauch countsPerDay: 502
2016-03-21_14:16:30 GasVerbrauch counterPerDay: 5.02
2016-03-21_14:16:30 GasVerbrauch counter: 12401.65
2016-03-21_14:16:30 GasVerbrauch counterPerDay: 5.02
2016-03-21_14:16:30 GasVerbrauch counter: 12401.65
2016-03-21_14:16:30 GasVerbrauch countsOverall: 1240165
2016-03-21_14:16:30 GasVerbrauch countsPerDay: 502
2016-03-21_14:16:16 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:16 GasVerbrauch counter: 12401.64
2016-03-21_14:16:16 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:16 GasVerbrauch counter: 12401.64
2016-03-21_14:16:16 GasVerbrauch countsOverall: 1240164
2016-03-21_14:16:16 GasVerbrauch countsPerDay: 501
2016-03-21_14:16:15 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:15 GasVerbrauch counter: 12401.64
2016-03-21_14:16:14 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:14 GasVerbrauch counter: 12401.64
2016-03-21_14:16:14 GasVerbrauch countsOverall: 1240164
2016-03-21_14:16:14 GasVerbrauch countsPerDay: 501
2016-03-21_14:16:00 GasVerbrauch counterPerDay: 5.00
2016-03-21_14:16:00 GasVerbrauch counter: 12401.63
2016-03-21_14:16:00 GasVerbrauch counterPerDay: 5.00
2016-03-21_14:16:00 GasVerbrauch counter: 12401.63
2016-03-21_14:16:00 GasVerbrauch countsOverall: 1240163


Allerdings bekomme ich dann immer die Fortlaufenden Zähler nicht richtig angezeigt. Siehe Screenshots.

Ich hätte in der Tablet Ui gerne die gleiche Darstellung wie in FHEM selbst.

Danke und Gruß Robert

[eki]

Sieht so aus, als ob in deinem Log die Daten in der "falschen" Reihenfolge stehen, also die Ältesten Daten am Ende und die neuesten am Anfang. Falls die Daten auch in der Reihenfolge aus dem GET den chart absetzt ankommen, unterstützt das Chart Widget dies bisher noch nicht, ist mir bisher auch noch nicht über den Weg gelaufen. Nutzt Du das Feature reverse-logs? Ich kann da natürlich noch eine Sortierung einbauen, das macht das Ganze aber wieder langsamer.

[eki]

Es gibt seit heute auch wieder eine neue Version des Chart Widgets. Details siehe https://forum.fhem.de/index.php/topic,48450.0.html

[no_Legend]

Sieht so aus, als ob in deinem Log die Daten in der "falschen" Reihenfolge stehen, also die Ältesten Daten am Ende und die neuesten am Anfang. Falls die Daten auch in der Reihenfolge aus dem GET den chart absetzt ankommen, unterstützt das Chart Widget dies bisher noch nicht, ist mir bisher auch noch nicht über den Weg gelaufen. Nutzt Du das Feature reverse-logs? Ich kann da natürlich noch eine Sortierung einbauen, das macht das Ganze aber wieder langsamer.

Also wenn ich im FHEM auf das Log klicke, dann bekomme ich den neusten Eintrag oben angezeigt.

Spielt es eine Rolle ob ich noch im LogFile Device  einen Definition für eine Log Rotation habe?

Code Auswählen Erweitern

./log/GasVerbrauch-%Y-%m.log

Allerdings beim Tagesverbrauch Funktioniert es richtig, siehe Screenshot.
Weshalb ich ja auf einen Config Fehler meinerseits tippe.

Gruß Robert

[eki]

Hallo no_Legend,

probier mal mit der zuvor erwähnten neuen Version, dort habe ich die Sortierung eingebaut. Wird mit dem Parameter

Code Auswählen Erweitern

data-dosort="true" aktiviert.