FTUI Neue Version chart_widget

Begonnen von eki, 31 Januar 2016, 00:17:26

Vorheriges Thema - Nächstes Thema

c-moll

Hi,

bei meinem Plot der Dieselpreise der letzten 3 Tage werden einfach keine Nachkommastellen an der y-Achse angezeigt. Meine Definition:
<div data-type="chart" data-device="OUT.Spritpreis" data-logdevice="DBLogging" data-logfile="HISTORY" data-columnspec="OUT.Spritpreis:Diesel" data-legend="Literpreis"
                  data-daysago_start="3" data-height="240px" data-maxvalue="1.3" data-minvalue="1.00" data-ytext="Literpreis (EUR)" data-yticks="0.05" data-xticks="240" data-style="ftui l2fill"></div>
müsste doch eigentlich richtig sein, oder? Wenn ich die data-yticks auf auto wird wird nur 1.2 (mit Nachkommastelle) als einzige Gridlinie angezeigt. Gebe ich die Werte in einem Array oder mit 0.05 vor, erscheint an der Y-Achse nur jeweils die 1 ohne Nachkommastellen .

Hat da jemand eine Idee?

Gruss. Chris

eki

War leider noch ein Fehler in der aktuellen Version (Seiteneffekt der Anpassung der y-Texte), bitte versuchs mal mit der Neuen (im ersten Beitrag dieses Threads).

c-moll


HugoM

Hallo,
ist es denn auch möglich ein Balkendiagramm zu erstellen?
Gruß Hugo

eki

Sollte mit logproxy und den bisherigen Möglichkeiten von Chart eigentlich gehen. Erklär mal etwas genauer wie die Daten, aus denen Du das Diagramm erstellen willst in FHEM vorliegen.

HugoM

Hallo eki,
es soll ein monatliches und ein jährliches Balkendiagramm von meiner fotovoltaikanlage werden.
Habe die tagesdaten mit Hilfe eines  userreadings aufsummiert und in der dblog geloggt.
An logproxy hab ich mich noch nicht rangetraut.
Gruss Hugo

eki

Kannst Du mir mal ein Beispiel schicken, wie Deine Daten aussehen (get Ausgabe des dblog devices).

HugoM

Hallo eki,

meine Datenbank sieht wie folgt aus:


2017-12-12 16:10:12|PVTag|DUMMY|Ertrag: 6.277|Ertrag|6.277|
2017-12-12 16:10:12|PVTag|DUMMY|Einnahmen: 2.0921241|Einnahmen|2.0921241|
2017-12-12 16:10:12|PVMonat|DUMMY|Tagesertrag: 6.277|Tagesertrag|6.277|
2017-12-12 16:10:12|PVMonat|DUMMY|Ertrag: 23.064|Ertrag|23.064|
2017-12-12 16:10:12|PVMonat|DUMMY|Einnahmen: 7.68723119999999|Einnahmen|7.68723119999999|
2017-12-12 16:10:12|PVJahr|DUMMY|Tagesertrag: 6.277|Tagesertrag|6.277|
2017-12-12 16:10:12|PVJahr|DUMMY|Ertrag: 23.064|Ertrag|23.064|
2017-12-12 16:10:12|PVJahr|DUMMY|Einnahmen: 7.68723119999999|Einnahmen|7.68723119999999|
2017-12-12 16:10:12|PVGesamt|DUMMY|Tagesertrag: 6.277|Tagesertrag|6.277|
2017-12-12 16:10:12|PVGesamt|DUMMY|Ertrag: 23.064|Ertrag|23.064|
2017-12-12 16:10:12|PVGesamt|DUMMY|Einnahmen: 7.68723119999999|Einnahmen|7.68723119999999|
2017-12-12 16:12:12|PVTag|DUMMY|Ertrag: 6.278|Ertrag|6.278|
2017-12-12 16:12:12|PVTag|DUMMY|Einnahmen: 2.0924574|Einnahmen|2.0924574|
2017-12-12 16:12:12|PVMonat|DUMMY|Tagesertrag: 6.278|Tagesertrag|6.278|
2017-12-12 16:12:12|PVMonat|DUMMY|Ertrag: 23.065|Ertrag|23.065|
2017-12-12 16:12:12|PVMonat|DUMMY|Einnahmen: 7.68756449999999|Einnahmen|7.68756449999999|
2017-12-12 16:12:12|PVJahr|DUMMY|Tagesertrag: 6.278|Tagesertrag|6.278|
2017-12-12 16:12:12|PVJahr|DUMMY|Ertrag: 23.065|Ertrag|23.065|
2017-12-12 16:12:12|PVJahr|DUMMY|Einnahmen: 7.68756449999999|Einnahmen|7.68756449999999|
2017-12-12 16:12:12|PVGesamt|DUMMY|Tagesertrag: 6.278|Tagesertrag|6.278|
2017-12-12 16:12:12|PVGesamt|DUMMY|Ertrag: 23.065|Ertrag|23.065|
2017-12-12 16:12:12|PVGesamt|DUMMY|Einnahmen: 7.68756449999999|Einnahmen|7.68756449999999|


Dabei wird der Ertrag des Monats bei Monatsanfang wieder auf Null gestellt. Der Ertrag des Jahres analog am Jahresanfang.
Habe mal ein Bild des Charts angehängt.

Gruß Hugo


eki

#233
Wenn ich das richtig sehe, dann erzeugst Du bei jeder Änderung der Ertragswerte einen neuen Eintrag für alle Werte (Tag, Monat, Jahr) in Deiner Datenbank, der dann über den entsprechenden Zeitraum in kleinen Schritten ansteigt und beim Übergang auf den nächsten neuen Zeitraum (Tag, Monat, Jahr) wieder auf 0 gesetzt wird.
Wie ich weiter annehme, möchtest Du in Deinem Plot einen Balken pro Zeitraum (Tag, Monat, Jahr) sehen, der dann den jeweiligen Wert darstellt. Also z.B. eine Darstellung, die Dir einen Monat als Zeitraum zeigt, und darin jeweils einen Balken pro Tag enthält, der den aufgesammelten Tageswert für diesen Tag darstellt.
Falls das so ist, ist das, was Du logst, nicht so ganz das Richtige. Ich würde Dir raten, das Statistik-Modul zu verwenden. Damit kannst Du aus Deinen Ertragswerten automatisch Statistiken für verschiedene Zeiträume machen, die dann auch genau einmal pro Periode in die Datenbank geschrieben werden (mache ich für den Stromverauch genauso). Aus den so erzeugten Logs lässt sich mit dem Plottyp "bars" oder 'fsteps' ganz leicht das machen was Du möchtest.

Hier mal ein Beispiel von meiner Stromverbrauchsmessung:

Mein Device "Haus_Stromverbrauch", welches den Verbrauch aufnimmt erzeugt z.B. einen Wert 'power', der den Mittelwert der aktuell abgenommene Leistung in Watt aufzeichnet (1 mal alle 3 Minuten). Mit dem folgenden Code:

define homeStatistics statistics Haus_Stromverbrauch
attr homeStatistics ignoreDefaultAssignments 1
attr homeStatistics minAvgMaxReadings power
attr homeStatistics singularReadings Haus_Stromverbrauch:power:Avg:(Hour|Day)

erzeuge ich zusätzliche Readings (werden als readings im Device Haus_Stromverbrauch angelegt und beginnen alle mit stat.
Zum Plotten verwende ich dann z.B. das Reading statPowerDayAvg welches mir den Mittelwert des Verbrauchs des letzten Tages ergibt und welches genau einmal pro Tag geloggt wird. Dadurch erhalte ich im Plot dann eben auch genau einen Wert und mit den genannten Plottypen 'bars' oder 'fsteps' genau die genannten Balken pro Tag. In Deinem Fall müsstest Du wahrscheinlich bei singularReadings nicht 'Avg' nehmen sondern 'Max', da Du ja über den Tag aufsummierst und dann eben der Maximalwert Deiner gewünschten Information entspricht.

HugoM

Hallo eki,
vielen dank für die schnelle und vor allem ausführliche Antwort (Das was ich als Neuling auch benötige).
Das Statistic-Modul für dies zu verwenden wär ich nicht drauf gekommen. Ich werde heute abend versuchen es entsprechend umzusetzen. Vielen Dank.
Gruss

Ulm32b

#235
Zitat von: eki am 11 Dezember 2017, 08:30:55
Man merkt dass Weihnachten ist, der Wunschzettel ist ja ganz schön groß  ;)

Zum Thema Diagrammtitel: Das kann ich relativ leicht anpassen (Vorschlag: Ich lasse zu, dass bei der Angabe des Titels eine Klasse angegeben werden kann, dann kann man über die fhem-tablet-ui-user.css Datei für diese Klasse das Aussehen anpassen. In dem man für verschiedene Charts verschiedene Klassen festlegt, kann man dann auch unterschiedliche Header Formatierungen für unterschiedliche Charts realisieren.)

Bezüglich der Achsenbeschriftung kann ich natürlich auch noch eine Möglichkeit einbauen, dass das Format der Achsenbeschriftung gewählt werden kann (ist ein bisschen Aufwand, aber machbar). Dass jemand den yunit Parameter so "kreativ" einsetzten könnte darauf bin ich nicht gekommen.

Mit der Sprache hast Du natürlich recht, und auch damit, dass man das initial Value ja selbst mit dazu packen kann. Ich werde es raus nehmen.

Tja, das mit der x-Achsen Formattierung ist so eine Sache und bei data-nofulldays auch aktuell noch so, dass die Zwischenwerte komisch aussehen. Ich bin da noch dran, ist aber ein ziemliches Gefummel mal schauen.

Mir war und ist schon klar, dass die Achsenformatierung erheblichen Gehirnschmalz erfordert, und ich habe hinsichtlich des Fertigstellungstermins auch keinerlei Erwartungen. Vermutlich ist es sinnvoll, diese Sache zunächst sehr konzeptionell zu behandeln, reifen zu lassen und erst später mit der Codierung zu beginnen. Letztlich wäre fast jeder mit einer festen Achsenformatierung zufrieden gewesen, wenn der Entwickler keine Möglichkeit zum Stauchen, Dehnen und Verschieben der Zeiträume vorgesehen hätte. So schaukeln wir uns nach oben.

Titelzeile und Menü sind demgegenüber wahrscheinlich Quick Wins. An dieser Stelle ein herzlicher Dank für die großartigen Leistungen im abgelaufenen Jahr und alles Gute zu den kommenden Festtagen. 8)

slowfinger

Hallo zusammen,
erstmal DICKES Lob für die tolle Chart-Visualisierung !
Ich gebe zu ich bin noch eher am Anfang meiner Experimente. Ich würde gerne meine (Buderus) Heizung plotten. In Fhem habe ich dazu folgendes SVG erstellt, das auch genau das anzeigt was ich will


#FileLog_heizung 4:heizung./system/sensors/temperatures/outdoor_t1\x3a::
#FileLog_heizung 4:heizung./heatingCircuits/hc1/roomtemperature\x3a::
#FileLog_heizung 4:heizung./system/sensors/temperatures/supply_t1\x3a::
#FileLog_heizung 4:heizung./system/appliance/actualSupplyTemperature\x3a::
#FileLog_heizung 4:heizung./system/sensors/temperatures/hotWater_t2\x3a::
#FileLog_heizung 4:heizung./heatSources/hs1/supplyTemperatureSetpoint\x3a::
#FileLog_heizung 4:heizung./heatSources/hs1/supplyTemperatureSetpoint\x3a::
#FileLog_heizung 4:heizung./system/sensors/temperatures/switch\x3a::
#FileLog_heizung 4:heizung./heatingCircuits/hc1/currentRoomSetpoint\x3a::


nun habe ich etwas herumgespielt und dies in TabletUI erstellt
<div data-type="chart"
data-device="heizung"
data-logdevice='["FileLog_heizung","FileLog_heizung","FileLog_heizung"]'
data-legend='["Strom","Solar"]'
data-columnspec='["4:/dhwCircuits/dhw1/actualTemp","4:/heatingCircuits/hc1/roomtemperature","4:/system/sensors/temperatures/outdoor"]'
data-logfile="-"
data-get="/system/sensors/temperatures/outdoor"

das geht auch irgendwie ... nur wenn ich jetzt wie im SVG outdoor_t1 angebe wird nichts mehr geplotet.
Das selbe bei anderen readings die kurz vor Ende "_" haben.
Frage(n):

  • ist meine columnspec so richtig ?
  • muss ich wie im SVG x3a:: angeben (kA was das macht)?
Vielen Dank !

MrJackBlack

Hallo Gemeinde,

seit dem letzten Update leidet mein TabletUI, besser gesagt alle Charts an einem kleinen Problem: In y-Richtung füllt das Chart nicht mehr das Widget aus. Als Beispiel habe ich euch einen Screenshot angehängt.

Hier der passende Code:
<div data-type="chart"
         data-device="WZ.Temp"
         data-logdevice="FileLog_WZ.Temp"
         data-columnspec='["WZ.Temp:temperature","WZ.Temp:humidity"]'
         data-style='["ftui l2","ftui l4dot"]'
         data-minvalue="0"
         data-maxvalue="100"
         data-minvalue_sec="10"
         data-maxvalue_sec="30"
         data-xticks="180"
         data-ytext="Humidity"
         data-yunit="%"
         data-yunit_sec="°C"
         data-ytext_sec="Temperature"
         data-legend='["Temperature","Humidity"]'
         data-uaxis='["secondary","primary"]'
         data-ptype='["lines","lines"]'
         data-showlegend="true"
         class="fullsize nobuttons">
</div>
FHEM 5.8 mit Homebridge auf Intel NUC
HUE, LIGHTIFY, JeeLink, CC1101, haufen Lampen und Sensoren. Interface via TabletUI auf einem Android Tablet. Seit Neuestem auch ein Landroid S über FHEM  angesteuert

eki

Zitat
...
das geht auch irgendwie ... nur wenn ich jetzt wie im SVG outdoor_t1 angebe wird nichts mehr geplotet.
Das selbe bei anderen readings die kurz vor Ende "_" haben.
Frage(n):

  • ist meine columnspec so richtig ?
  • muss ich wie im SVG x3a:: angeben (kA was das macht)?
Vielen Dank !

Poste bitte mal ein paar Zeilen des Files, das du verwendest, dann kann ich vielleicht helfen.

eki

Zitat von: MrJackBlack am 17 Dezember 2017, 21:06:47
Hallo Gemeinde,

seit dem letzten Update leidet mein TabletUI, besser gesagt alle Charts an einem kleinen Problem: In y-Richtung füllt das Chart nicht mehr das Widget aus. Als Beispiel habe ich euch einen Screenshot angehängt.

Hier der passende Code:
<div data-type="chart"
         data-device="WZ.Temp"
         data-logdevice="FileLog_WZ.Temp"
         data-columnspec='["WZ.Temp:temperature","WZ.Temp:humidity"]'
         data-style='["ftui l2","ftui l4dot"]'
         data-minvalue="0"
         data-maxvalue="100"
         data-minvalue_sec="10"
         data-maxvalue_sec="30"
         data-xticks="180"
         data-ytext="Humidity"
         data-yunit="%"
         data-yunit_sec="°C"
         data-ytext_sec="Temperature"
         data-legend='["Temperature","Humidity"]'
         data-uaxis='["secondary","primary"]'
         data-ptype='["lines","lines"]'
         data-showlegend="true"
         class="fullsize nobuttons">
</div>


Kannst Du mal bitte bei der Klasse noch fitsize hinzufügen, dann reagiert das Chart auf Veränderungen des umgebenden <div> und macht sich so groß wie möglich. Vielleicht hilft das.