Hallo,
ein paar Fragen zu Chart.
Ist es bei Chart im Moment möglich auch andere Darstellungen als Linien zu verwenden?
Und kann man auf der zweiten Y Achse auch andere Werte anzeigen lassen. Hintergrund ist das Chart eines Heizkörperthermostats, dessen Ventil Werte von 0-100 annehmen kann. Lässt man das zusammen mit der Temperatur anzeigen, wird die Temperaturkurve sehr flach. Bei ftui 2 konnte man den Y Achsen verschiedene Wertebereiche zuweisen.
gm
Ich packe mal noch ein "Must have" dazu (WAF), Meteogram.
Gruß
Eisix
Das ist ja mal richtig cool. Auf einen Blick erfasst man alles sofort.
PS.: erwartet keine Antworten zu Charts von mir. Da bin ich nullwissend Mangels Beschäftigung damit.
Ist eigentlich aus dem Wiki von Chart.
eki ist da glaube ich der richtige Ansprechpartner bzgl. portierung des chart_widgets von FTUI2.
Gruß
Eisix
Ich habe es fast schon befürchtet :-\, lese hier schon immer mit, habe aber bisher noch nicht entschieden ob ich meine Oberfläche portiere.
Das Chart in FTUI3 (basiert auf einem bestehenden externen js chart modul) ist aktuell etwas ganz anderes als in FTUI2 (das habe ich über die Jahre zusammengebaut). Das was da alles im FTUI2 Chart enthalten ist, nach FTUI3 zu portieren wäre ziemlich viel Aufwand. Auf der anderen Seite wäre es auch mal eine Möglichkeit das Design vom FTUI2 Chart mal wieder zu überarbeiten, das ist inzwischen ein ziemlicher Moloch geworden.
Ich lasse mir mal durch den Kopf gehen, was da möglich wäre (eventuell wieder klein anfangen, oder das aus FTUI3 entsprechend erweitern).
P.S.: Gleiches gilt auch für das Kartenwidget.
Man könnte natürlich das Chart Widget auch ganz rauswerfen und macht die Charts mit Grafana. ::)
Glaube nicht das du mit Grafana so ein Meteogram hinkriegst. Ein anderes Feature wie das stapeln von Linien gibt es vielleicht noch (praktisch zum aufsummieren der Stromverbraucher unter dem Gesamtverbrauch).
Gruß
Eisix
Keine Ahnung, so tief stecke ich in Grafana nicht drin.
<seufzt>
Die @eki -Widgets will ich eigentlich nicht verlieren.
Zwischenfrage:
Kann man FTUI2 und FTU3 quasi-parallel betreiben? Also eine Seite FTUI3 und eine Unterseite FTUI2?
Denke ein Iframe sollte funktionieren. Ob das Sinn macht :-\
Und ja, chart ist auch bei mir momentan einer von 2 Gründen warum ich noch nicht produktiv auf FTUI3 gewechselt bin. Aber ist ja auch alles noch neu und nicht fertig.
Gruß
Eisix
So, jetzt bin ich hier auch gestrandet, bei meiner Suche nach Balkendiagrammen für das FTUI3. :(
Hat das mit dem Iframe schon mal jemand gemacht?
Das scheint mir die einzige Variante zu sein für einen eleganten Chart.
Entdeckt habe ich noch diese Varianten, um Standard-SVGs zu exportieren.
https://forum.fhem.de/index.php/topic,16106.0.html
https://forum.fhem.de/index.php?topic=17130.0
Schade, dass bei den FTUI3-Charts noch nicht so viel geht. Die Performance vom FTUI3 finde ich super.
Hallo,
mache ich mit iframe. Hab in FTUI2 jeweils den html code liegen den ich dann in FTUI3 einblende.
Momentan habe ich einen mix aus FTUI3, FTUI2 und Grafana ::)
Gruß
Eisix
Achtung: In diesem Thema wurde seit 120 Tagen nichts mehr geschrieben....
schade:-) Bin auch dafür, dass das Chart-Widget wieder etwas mächtiger wird. Portierung hab ich mich auch vor gesträubt (und bin erst zu 50% durch) aber es lohnt sich ganz klar. Es ist wesentlich schneller und kommt auch etwas moderner daher. Dazu kann man die vorher gewachsene Landschaft etwas aufräumen und stimmiger gestalten.
Also: Chart-Widget +1
Mir fehlt leider im Moment etwas die Zeit, diese große Baustelle wirklich schnell voran zu treiben. Werde mich aber dran machen (im Herbst/Winter habe ich ja vielleicht etwas mehr Zeit). Also etwas Geduld bitte.
Das FTUI3 Chart habe ich jetzt um eine zweite Y-Skala erweitert. Und man kann für y Min und Max vorgeben.
https://github.com/knowthelist/ftui#chart
Zum Beispiel mit
<ftui-chart-data y-axis-id="y1"
setzt man eine Datenreihe auf die zweite Y-Achse (rechts)
Mit
<ftui-chart y-label="Heizung" y1-label="Außen"
kann man die Achsen beschriften.
Chart.js ist sehr mächtig und man könnte im FTUi3-Chart noch viel "freischalten". Schaut mal hier: https://www.chartjs.org/docs/master/ was alles noch möglich ist.
Darf ich den Code zu diesem Beispiel mal sehen ?
Wenn ich das so hinkriegen wuerde, waere ich schon sehr weit.
Das sieht ja anders aus als auf GitHub.
das klappt soweit schon alles super. Danke dafür!
ich möchte jetzt gerne für bestimmte Charts noch folgendes einstellen, weiß aber nicht wie:
- Navigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag
- Die Farbe der Achsenbeschriftung etc. auf weiß ändern
Gibt es dafür Attribute?
edit (hier noch zwei Bugs?):
- wenn ich Attribut fill setze dann füllt er immer von 0 aus... bei dem Gefrierschrank lasse ich mir von -30 bis -10 anzeigen. Die Füllung kommt dann von oben was komisch aussieht. Kann das geändert werden? Bei FTUI2 war das anders
- wenn in dem Log-Device zum Beispiel %Y-%m-%d definiert habe wird in dem Device jeden Tag eine neue Log-Datei geschrieben. Es wird im Chart dann immer nur die aktuelle angezeigt. Wenn ich einen Tag zurückgehe hat er die Daten nicht
@StephanFHEM
ZitatNavigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag
Vermutlich reicht der Verzicht auf
ftui-chart-controls ...
Farben werden per Theme festgelegt. Man sollte vermeiden, Farben direkt auf die Elemente zu setzen. Wenn man dann Tag/Nacht Umschaltung realisieren will oder den Style ändern möchte, würde man anfangen, alles wieder von Hand zu suchen und zu ersetzen.
Für eine gute Usability sollte man eh nur wenige Grundfarben benutzen, sonnst leidet die Übersichtlichkeit.
Im Theme-File gibt es dafür
--primary-color:
--secondary-color:
--success-color:
--info-color:
--warning-color:
--danger-color:
--light-color:
--medium-color:
--dark-color:
Light, Medium, Dark sind Grauabstufungen
Diese 9 Grundfarben werden dann auf die Funktions-Variablen angewendet:
--checkbox-off-color: var(--dark-color);
Dort sollten dann keine zusätzlichen Farben benutzt werden.
Für Chart kann man im Theme-File folgende Variablen benutzen:
--chart-legend-font-size
--chart-legend-color
--chart-title-color
--chart-title-font-style
--chart-text-color
--chart-grid-line-color
--chart-tick-font-size
--chart-font-style
--chart-font-family
Man kann die Variablen auch nur in einem HTML File direkt per style Tag setzen:
<style>
#mychart1 {
--chart-text-color: #ffdd44;
}
</style>
Das gilt dann für ein Chart mit ID=mychart1
<ftui-chart id="mychart1"
Oder mit
<style>
ftui-chart {
--chart-text-color: #ffdd44;
}
</style>
für alle Charts auf der Seite.
Danke für die ersten Antworten:
- den Tag ftui-control wegzulassen sorgt tatsächlich dafür, dass die komplette Navigation nicht mehr angezeigt wird. Super!
- Farbe funktioniert für alle Charts wenn ich es in style/body packe. Wenn ich das mit der Chart-ID versuche geht es leider nicht. Da ich es auch nur für einen sehr kleinen Anteil meiner Charts gebraucht hätte und es bei den anderen bescheiden aussieht lass ich es jetzt wie es ist:-)
@setstate: ich arbeite auch mit wenigen Farben damit es stimmig ist aber es sind halt nicht die selben die du bei dir benutzt hast... halt ein anderes Design:-) schaust du dir die von mir genannten Probleme/Bugs auch noch an? Gerade der Fill im Minus-Bereich ist zwar mathematisch richtig, sieht aber komisch aus.. die Tages-Logs könnte ich notfalls FHEM-seitig auch auf wöchentliche Log-Dateien umstellen. Ich glaube auch so ein Thema gab es damals schonmal bei FTUI2
Gibt es Möglichkeiten, die Bezüge z.B. zur X-Achse zu konfigurieren?
Beispielsweise möchte ich meinen Gasverbrauch über die letzten 30 Tage darstellen.
In FTUI 2 lief das über
data-daysago_start="30d"
data-daysago_end="-1"
Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.
<ftui-chart unit="month">
<ftui-chart-data>....</ftui-chart-data>
<ftui-chart-control>...</ftui-chart-control>
</ftui-chart>
Ich probiere gerade eine unit="30d" einzubauen
<ftui-chart unit="30d">
<ftui-chart-data>....</ftui-chart-data>
</ftui-chart>
Teste noch etwas und laden das dann hoch.
Edit: unit=30d und 24h ist jetzt verfügbar.
Zitat von: grossmaggul am 05 November 2021, 08:58:23
Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.
<ftui-chart unit="month">
<ftui-chart-data>....</ftui-chart-data>
<ftui-chart-control>...</ftui-chart-control>
</ftui-chart>
Prima, das funktioniert. Zwar ist das Diagramm jetzt zum Monatsbeginn erstmal leer, aber ich könnte die "Vorspulen / Zurückspulen"-Knöpfe unter dem Diagramm einbinden, um rückwirkenden Content zu betrachten. Ich probier das später sofort nochmal aus.
Ansonsten sehen meine ersten "Prototypen" schon zufriedenstellend und hübsch aus.
by the way:
Wie wärs mit einem Thread über FTUI3, wo jeder mal ein paar Screenshots seiner eigenen Schöpfungen zeigt? Ich wäre total gespannt, um coole Ideen zu übernehmen. (oder gibts so einen Thread vll. schon?)
ZitatIch probiere gerade eine unit="30d" einzubauen
Jetzt sehen "week" und "month" aber ein wenig seltsam aus.
Ich habe Probleme mit den Charts und hoffe auf eure Hilfe.
Immer wenn ich meine FTUI3 Seite mit Charts öffne, erhalte ich folgende Logeinträge:
2021.11.05 19:40:01 1: PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 28.
2021.11.05 19:40:01 1: PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 33.
2021.11.05 19:40:01 1: PERL WARNING: Argument "eg_wz_Klima_2_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 31.
2021.11.05 19:40:01 1: PERL WARNING: Argument "eg_wz_Klima_1_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 33.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 26.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 27.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 29.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 30.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887, line 34.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1: PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
Wenn ich <ftui-chart> ... </ftui-chart> lösche, ist im Log wieder alles ok.
Hier das Konstrukt für die Seite:
<ftui-chart title="Temperatur (Innen)" height="250px" prefetch="86400" extend>
<ftui-chart-data label="Flur" point-radius="0" color="green" log="FileLog_eg_th_Heizung" spec="eg_th_Heizung_HM:actTemp"></ftui-chart-data>
<ftui-chart-data label="WC" point-radius="0" color="blue" log="FileLog_eg_wc_Heizung" spec="eg_wc_Heizung_HM:actTemp"></ftui-chart-data>
<ftui-chart-data label="Küche" point-radius="0" color="red" log="FileLog_eg_ku_Heizung" spec="eg_ku_Heizung_HM:actTemp"></ftui-chart-data>
<ftui-chart-data label="Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Heizung_2" spec="eg_wz_Heizung_2_HM:actTemp"></ftui-chart-data>
<ftui-chart-data label="Wohnen" point-radius="0" color="violet" log="FileLog_eg_wz_Heizung_1" spec="eg_wz_Heizung_1_HM:actTemp"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Die gleichen Filelogs benutze ich auch in fhem für Plots. Dort gibt es keine Logeiträge.
Ich hoffe mich kann jemand in die richtige Richtung schubben!
Gruß Lutz
Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.
Beispiel, im Logfile hat man folgende Zeile:
2021-01-01_00:02:02 wz.heizkoerper desired-temp: 16.0
Position 1 ist die Timestamp
Position 2 das Device
Position 3 desired-temp
Position 4 ist der Wert den Du darstellen möchtest.
Zitat von: grossmaggul am 05 November 2021, 22:51:07
Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.
Danke grossmoggul,
das hat gepasst. Wieder was gelernt. ;-)
Gruß Lutz
Zitat von: grossmaggul am 05 November 2021, 20:29:17
Jetzt sehen "week" und "month" aber ein wenig seltsam aus.
week ist jetzt wieder gut, bei month sehe ich keinen Fehler
Klappt perfekt, dankeschön 8)
Zitatbei month sehe ich keinen Fehler
Ich schon, der saß vor dem Monitor. ::)
Aktuell kriege ich einen Bar-Chart hin, auch mit mehreren Datenreihen. Die Breite z.B. wird stets automatisch formatiert. Bei langen Zeiträumen wird's dann etwas dünn / linienhaft (z.B. Zwei Datenreihen, mit Monats- und Tageswerten)
Also sind die Einstellungen beim Bar-Chart noch relativ überschaubar oder habe ich etwas übersehen?
(Kein Druck auf den Entwickler, habe keine dringende Not, will nur meine Fähigkeiten verifizieren. :) )
Kann ich dem Chart beibringen, einen bestimmten Anfangsmodus zu honorieren ?
Egal, was ich bei Chart-control als Moeglichkeiten angebe, es faengt immer mit einer Tagesdarstellung an.
Einmal auf was anderes geklickt und alles ist ok.
Es wuerde doch sicher Sinn machen, die erste der bei Chart-control angegebenen Moeglichkeiten als Startdarstellung zu nehmen
@Wolfgang Hochweller
In chart-controls gibt man die möglichen Modi an.
In chart gibt man mit Attribut unit den gewünschten (Start)Modus an - vorbelegt mit "day".
Super, danke !
Gibts eine Möglichkeit die "Darstellungsbreite" der X-Achse zu beeinflussen?
Derzeit wird mir defaultmäßig der aktuelle gesamte Tag von 00:00 - 23:59 Uhr vollständig dargestellt, obwohl zwischen ca. 20:00 - 07:00 Uhr keine einzigen Daten im FileLog hinterlegt werden.
Könnte ich die X-Achsendarstellung begrenzen auf 06:00 - 20:00 Uhr ? Dann sähe das Diagramm weniger "zusammengeschoben" aus.
Irgendwie wird mir bei den Charts die Beschriftung der zweiten y-Achse nicht angezeigt.
So sieht das bei mir aus:
<ftui-grid-tile row="3" col="2" height="2" width="8" shape="round" class="semitransparent">
<!-- Chart Radiator -->
<ftui-content file="content/heizung_charts.html" titel="Radiator"
y_label="Temperatur" y1_label="Ventil" label1="Ist" label2="Soll" label3="Ventil"
geraet="wz.radiator" ist="temperature" soll="desiredTemperature" ventil="valveposition"
farbe_ist="#d63056" hg-farbe_ist="#d6305650" farbe_soll="#d67054" hg-farbe_soll="#d6407650" farbe_ventil="rgba(75,192,192,1)" hg-farbe_ventil="rgba(75,192,192,0.2)" punkt_radius="0">
</ftui-content>
</ftui-grid-tile>
Das contentfile dazu:
<ftui-chart title="{{titel}}" y-label="{{y_label}}" y1-label="{{y1_label}}" unit="week">
<ftui-chart-data fill label="{{label1}}"
background-color="{{hg-farbe_ist}}"
color="{{farbe_ist}}"
log="logdb"
file="history"
spec="{{geraet}}:{{ist}}"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-data fill label="{{label2}}"
background-color="{{hg-farbe_soll}}"
color="{{farbe_soll}}"
log="logdb"
file="history"
spec="{{geraet}}:{{soll}}"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-data fill label="{{label3}}"
background-color="{{hg-farbe_ventil}}"
color="{{farbe_ventil}}"
log="logdb"
file="history"
spec="{{geraet}}:{{ventil}}"
y-axis-id="y1"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-controls units="day,week,month"></ftui-chart-controls>
</ftui-chart>
Was mache ich da falsch?
Sieht so aus, als würde das in einem Contentfile nicht funktionieren, wenn ich das o.a. Beispiel direkt einbinde, gehtˋs.
Zitat von: Dracolein am 18 November 2021, 20:49:25
Gibts eine Möglichkeit die "Darstellungsbreite" der X-Achse zu beeinflussen?
Derzeit wird mir defaultmäßig der aktuelle gesamte Tag von 00:00 - 23:59 Uhr vollständig dargestellt, obwohl zwischen ca. 20:00 - 07:00 Uhr keine einzigen Daten im FileLog hinterlegt werden.
Könnte ich die X-Achsendarstellung begrenzen auf 06:00 - 20:00 Uhr ? Dann sähe das Diagramm weniger "zusammengeschoben" aus.
ich habe jetzt x-min und x-max eingebaut. Das wirkt aber nur bei unit="day" (was Default ist)
<ftui-grid-tile row="3" col="1" height="2" width="3">
<header>6am-8pm</header>
<ftui-chart title="Power 6am-8pm" y-label="Power in VA" x-min="6" x-max="20" y-max="600">
<ftui-chart-data fill background-color="#d6305650" color="#d63056"
log="FileLog_MQTT2_PV_GROWATT_GAH0A4406L"
spec="4:MQTT2_PV_GROWATT_GAH0A4406L.Pac1">
</ftui-chart-data>
<ftui-chart-controls></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
Herzlichen Dank, ist eingebaut und funktioniert einwandfrei
Ich habe das jetzt nochmal überprüft, charts in contentfiles funktionieren leider nicht richtig, wie ich schon vermutet hatte. Die y-axis-id wird da scheinbar nicht richtig übergeben.
Die auch schon gemeldete Fehlermeldung hängt wohl auch mit dem Chart in einem Contentfile zusammen, zumindest verschwindet sie, wenn man das Chart direkt einbindet.
Habe mal eine Frage: Gibt es einen Trick wie man z.B. textbasierte Felde wie z.B. den Status (on/off) darstellen kann.
Würde mir gerne den Zustand eines Schalters als Rechteckkurve anzeigen lassen. ::)
Zitat von: muma am 30 November 2021, 23:06:05
Habe mal eine Frage: Gibt es einen Trick wie man z.B. textbasierte Felde wie z.B. den Status (on/off) darstellen kann.
Würde mir gerne den Zustand eines Schalters als Rechteckkurve anzeigen lassen. ::)
Moin muma,
ich habe es über ein userReadings gelöst. z.B. für den Actuator der Fußbodenheizung. Geht bestimmt einfacher, aber so funktioniert es.
attr eg_wz_Heizung_2_HM userReadings actuator\
{if (ReadingsVal($name,"9.STATE","") eq "on") {return "1"} elsif (ReadingsVal($name,"9.STATE","") eq "off") {return "0"} else {return "Error"}}
Gruß LuGu
Diese Funktion bietet FHEM beim Log-abrufen out of the box.
die Spec-Angabe ist so aufgebaut: Column:Regexp:DefaultValue:Function
log="FileLog_WCLuefter" spec="4:WCLuefter.status-get:0:$fld[3]=~'on'?1:0"
Nachtrag: Bei dieser Art von Chart ist es sinnvoll, stepped zu setzen, damit man Rechteckkurven bekommt. Ansonsten ist es ein ZickZack-Graph.
<ftui-chart title="Lüfter" width="600px" height="200px" x-min="8" x-max="11">
<ftui-chart-data fill stepped
log="FileLog_WCLuefter"
spec="4:WCLuefter.status-get:0:$fld[3]=~'on'?1:0"></ftui-chart-data>
<ftui-chart-controls units="day, hour"></ftui-chart-controls>
</ftui-chart>
Zur Info:
Ein Beispiel für ein Multiple Type Chart - Line + Bar
Das Line-Chart (linke Y-Achse) setzt einen Punkt pro Messinterval, die mit Linien verbunden sind.
Das Bar-Chart (rechte Y-Achse) zeigt den Zuwachs pro Stunde der Totalleistung. Die Berechnung passiert durch die FHEM-Funktion delta-h.
<ftui-chart title="Power 6am-8pm" y-label="Power in VA"
x-min="6" x-max="20" y-max="600" y1-max="1" y1-label="Gain in KWh">
<ftui-chart-data background-color="#d6305650" color="#d63056"
log="FileLog_PVConverter"
spec="4:PVConverter.Pac1">
<ftui-chart-data type="bar" y-axis-id="y1"
log="FileLog_PVConverter"
spec="4:PVConverter.Eac_tota::delta-h">
</ftui-chart-data>
<ftui-chart-controls></ftui-chart-controls>
</ftui-chart>
Hallo,
wie kriege ich das FileLog Beispiel
log="FileLog_WCLuefter" spec="4:WCLuefter.status-get:0:$fld[3]=~'on'?1:0"
mit logdb hin?
log="logdb" file="-" spec="FBH_WZ:actorState:0:$fld[3]=~'on'?1:0"
Gruß
Eisix
@Eisix
$fld[3] heißt in dem Fall lt. Wiki $val
@OdFhem
hab ich probiert funktioniert aber nicht
in ftui2 hat es so funktioniert
log="logdb" file="-" spec="FBH_WZ:actorState:0::$val=($val=~\\x22off\\x22?0:1)"
geht aber auch nicht.
Gruß
Eisix
Zitat von: setstate am 05 November 2021, 09:15:28
<ftui-chart unit="30d">
<ftui-chart-data>....</ftui-chart-data>
</ftui-chart>
Edit: unit=30d und 24h ist jetzt verfügbar.
Kann ich dich überreden auch ein 365d bzw, 1y einzuführen?
Gruß
Sailor
Ein herzerfrischendes Moin vom achtern Diek vorweg.
Ist Euch auch schon mal aufgefallen, dass die Dezimaltrennungen bei der Anzeige von Einzelwerten in den Charts nicht durchgängig sind?
Siehe Anlage
Dort kann man erkennen, das
der Wert 1610,894 im englischen Format richtigerweise als 1,610.894 dargestellt werden.
der Wert 6839 aber fälschlicherweise als 6.839 dargestellt wird. Es müsste dann aber auch als 6,839 dargestellt werden.
Nebenbei gefragt: Wie kann ich die Aufteilung auf der x-Achse für jeden Monat einen vertikalen Strich einführen und unten lediglich ein 04/2021 oder nur den Monatsnamen?
Gruß
Sailor
@Sailor
Zitat von: Sailor am 02 Dezember 2021, 22:18:42
Ist Euch auch schon mal aufgefallen, dass die Dezimaltrennungen bei der Anzeige von Einzelwerten in den Charts nicht durchgängig sind?
Ich habe das jetzt mal mit deutscher sowie englischer Einstellung ausprobiert und kann keine Probleme feststellen (s. Screenshots).
Kommt bei dem problematischen Einzelwert vielleicht ein falscher Wert ?
@Eisix
Zitat von: Eisix am 02 Dezember 2021, 22:09:41
log="logdb" file="-" spec="FBH_WZ:actorState:0::$val=($val=~\\x22off\\x22?0:1)"
geht aber auch nicht.
Im Wiki steht u.a. folgendes Beispiel:
EG_Bad:window:::$val=~s/(on|off)(\d*).*/$1eq"on"?1:0/eg
* Das Zuweisen von $val scheint also nicht notwendig
* Das Maskieren der Anführungszeichen scheint für die eigentliche Anfrage nicht notwendig, wäre also nur für den Attributwert interessant
Ich nutze zwar nicht logdb, hab aber einfach mal mit einer an FHEM gerichteten FileLog-Anfrage "gespielt".
... Ausschnitt aus Anfrage mit
$fld[3]eq'on' sieht richtig aus und funktioniert auch
%24fld%5B3%5Deq%27on%27&asyncCmd=
... Ausschnitt aus Anfrage mit
$fld[3]eq\"on\" hört trotz Maskierung mit bzw. vor dem ersten doppelten Anführungszeichen auf
%24fld%5B3%5Deq%5C&asyncCmd=
... Ausschnitt aus Anfrage mit
$fld[3]eq\\"on\\" hört trotz Maskierung mit bzw. vor dem ersten doppelten Anführungszeichen auf
%24fld%5B3%5Deq%5C%5C&asyncCmd=
... Ausschnitt aus Anfrage mit
$fld[3]eq\\\"on\\\" hört trotz Maskierung mit bzw. vor dem ersten doppelten Anführungszeichen auf
%24fld%5B3%5Deq%5C%5C%5C&asyncCmd=
... Ausschnitt aus Anfrage mit
$fld[3]eq\\\\"on\\\\" hört trotz Maskierung mit bzw. vor dem ersten doppelten Anführungszeichen auf
%24fld%5B3%5Deq%5C%5C%5C%5C&asyncCmd=
Maskierzeichen hat also (scheinbar) keine maskierende Funktion ... hört sich nach einem Fall für @setstate an ...
Zum Abschluss noch eine kurze Frage an @Eisix: Hast Du mit einfachen Anführungszeichen probiert ?
Zitat von: Sailor am 02 Dezember 2021, 22:18:42
Nebenbei gefragt: Wie kann ich die Aufteilung auf der x-Achse für jeden Monat einen vertikalen Strich einführen und unten lediglich ein 04/2021 oder nur den Monatsnamen?
Ich nutze leicht abgewandelte Chart-Module, um möglichst viele der in Chart.js möglichen Eigenschaften ohne zusätzliche Modul-Attribute je Eigenschaft nutzen zu können. Dadurch könnte man dann z.B. ohne Moduländerung die Achsenbeschriftung beeinflussen ...
Beispiele sind als Screenshot angehangen.
Hallo OdfFhem,
habe diverse Varianten aus dem Wiki probiert aber ohne Erfolg.
<ftui-chart-data label="Heizung" stepped fill color="white" log="logdb" file="-" spec="{{FBH}}:actorState:::$val=~s/(on|off)(\d*).*/$1eq"on"?1:0/eg"></ftui-chart-data>
Stimmt das überhaupt mit den ganzen : in dem Bereich actorState:::$val=.
Gruß
Eisix
@Eisix
log="logdb" file="-" spec="FBH_WZ:actorState:0::$val=($val=~\\x22off\\x22?0:1)"
Wenn das hier unter dem alten FTUI lief, dann scheint zumindest für diesen Fall die Anzahl der Doppelpunkte zu stimmen.
Hast Du für diesen Fall auch den passenden #DbLog-Auszug aus einer gplot-Datei ?
Ich habe jetzt noch ein wenig mit meinen unter FileLog genutzten Varianten probiert; und eigentlich funktionieren die Angetesteten alle mit einfachen Anführungszeichen - vorausgesetzt der Attributwert ist mit doppeltem Anführungszeichen geklammert ...
Bei Dir müsste es ja dann vielleicht so funktionieren:
log="logdb" file="-" spec="FBH_WZ:actorState:0::$val=($val=~'off'?0:1)"
Ob's wirklich klappt, weiss ich natürlich nicht, da ich kein logdb im Einsatz habe.
Moin OdfFhem
Zitat von: OdfFhem am 03 Dezember 2021, 10:10:20
Ich nutze leicht abgewandelte Chart-Module, um möglichst viele der in Chart.js möglichen Eigenschaften ohne zusätzliche Modul-Attribute je Eigenschaft nutzen zu können. Dadurch könnte man dann z.B. ohne Moduländerung die Achsenbeschriftung beeinflussen ...
So lasse mich doch bitte an deiner Definition teilhaben. ;)
Magst du mir den Code fuer diese Beispiele reinstellen?
Gruß
Sailor
Zitat von: OdfFhem am 03 Dezember 2021, 08:47:24
@Sailor
Ich habe das jetzt mal mit deutscher sowie englischer Einstellung ausprobiert und kann keine Probleme feststellen (s. Screenshots).
Kommt bei dem problematischen Einzelwert vielleicht ein falscher Wert ?
Einen falschen Wert kann ich nicht feststellen, da ja die Graphen stimmen...
Magst Du mir mal die Code-Schnipsel von den DE / EN Graphen reinstellen?
Danke
Sailor
Hab das jetzt mal so wie vorgeschlagen probiert, funktioniert aber auch nicht.
<ftui-chart-data label="Heizung" stepped fill color="white" log="logdb" file="-" spec="{{FBH}}:actorState:0::$val=($val=~'off'?0:1)"></ftui-chart-data>
Ich lasse jetzt parallel mal ein FileLog mitlaufen, dann kann ich mit beiden Varianten experimentieren.
Gruss
Eisix
@Sailor
Zitat von: Sailor am 03 Dezember 2021, 14:07:47
Magst Du mir mal die Code-Schnipsel von den DE / EN Graphen reinstellen?
Autom. orientiert sich Chart.js an den Spracheinstellungen vom Betriebssystem; um dies gewollt zu überschreiben, kann man die
locale-Eigenschaft verwenden. Im Original-Modul gibt es bislang kein passendes Attribut und auch keine Möglichkeit, "unbekannte" Eigenschaften durchzureichen.
Temporär kann z.B. folgende Stelle in chart.component.js
options: {
responsive: true,
erweitert werden zu
options: {
locale: 'de-DE', // 'de-DE' oder 'en-US' oder ...
responsive: true,
Kann schon mal bestätigen mit FilLog funktioniert es wie erwartet.
Gruß
Eisix
@Sailor
Zitat von: Sailor am 03 Dezember 2021, 14:06:15
Magst du mir den Code fuer diese Beispiele reinstellen?
Chart.js verwendet je nach Darstellung verschiedene Anzeigeformate. Bei "unserer" Darstellung
year wird das Anzeigeformat
month verwendet. Dieses existiert nicht im Original-Modul und fällt auf den Chart.js-Standard zurück.
Temporär kann folgende Stelle in chart.component.js
displayFormats: { millisecond: 'HH:mm:ss.SSS', second: 'HH:mm:ss', minute: 'HH:mm', hour: 'HH:mm', day: 'd. MMM' }
erweitert werden zu
displayFormats: { millisecond: 'HH:mm:ss.SSS', second: 'HH:mm:ss', minute: 'HH:mm', hour: 'HH:mm', day: 'd. MMM', month: 'MMMM' }
Bei der Darstellung
year wird dann nur noch der volle Monatsname ohne Jahresangabe angezeigt.
Die Bereitstellung für die eigentlichen Beispiele macht keinen Sinn, da eine temporäre Übernahme in das Original-Modul alle Charts beeinflussen würde. Eigentlich wäre dies nur bei Erweiterung der Original-Module um das Durchreichen der "unbekannten" Eigenschaften möglich.
@Eisix
Zitat von: Eisix am 03 Dezember 2021, 16:12:11
Kann schon mal bestätigen mit FilLog funktioniert es wie erwartet.
Irgendwie hat mich das logdb-Thema neugierig gemacht und deshalb habe ich dies auf einem Testsystem aktiviert.
Anschließend habe ich zwei logdb-Charts mit $val-Anpassung integriert und konnte keine Probleme feststellen ...
<ftui-chart-data
[update]="Gateway:connection:time"
log="logdb"
spec="Gateway:connection:0::$val=((($ts)=~':.8:..$')?8:(($val)=~'active'?4:0))"
></ftui-chart-data>
Eigentlich geht es um den Wert von $val, aber um die Darstellung flexibler zu gestalten, werden bestimmte Zeitstempel speziell behandelt.
- endet die Minute vom Zeitstempel auf 8, dann ist der resultierende Wert 8.
- ist die Verbindung aktiv, dann ist der resultierende Wert 4
- ansonsten ist der resultierende Wert 0
Beispiel im Screenshot_connection.
<ftui-chart-data
[update]="Bridge:outgoing-count:time"
log="logdb"
spec="Bridge:outgoing-count:0::$val=((''.$val)=~'[13579]00$'?500:((''.$val)=~'[02468]00$'?700:600))"
></ftui-chart-data>
$val ist in diesem Fall eigentlich numerisch, wird aber zum Test in eine Zeichenkette "gezwängt".
- sind die letzten Ziffern des Zählers 100|300|500|700|900, dann ist der resultierende Wert 500.
- sind die letzten Ziffern des Zählers 000|200|400|600|800, dann ist der resultierende Wert 700.
- ansonsten ist der resultierende Wert 600
Beispiel im Screenshot_count.
Hi OdfFhem
Zitat von: OdfFhem am 03 Dezember 2021, 17:22:09
Chart.js verwendet je nach Darstellung verschiedene Anzeigeformate. Bei "unserer" Darstellung year wird das Anzeigeformat month verwendet. Dieses existiert nicht im Original-Modul und fällt auf den Chart.js-Standard zurück.
Bei der Darstellung year wird dann nur noch der volle Monatsname ohne Jahresangabe angezeigt.
Danke, werde ich ausprobieren.
Zitat von: OdfFhem am 03 Dezember 2021, 17:22:09
Die Bereitstellung für die eigentlichen Beispiele macht keinen Sinn, da eine temporäre Übernahme in das Original-Modul alle Charts beeinflussen würde. Eigentlich wäre dies nur bei Erweiterung der Original-Module um das Durchreichen der "unbekannten" Eigenschaften möglich.
Da müssen wir uns wohl noch gedulden bis setstate etwas Zeit dafür findet.
Gruß
Sailor
Hallo OdfFhem,
sorry, aber dein Beispiel ist mir leider zu kompliziert ???
Mein reading actorState springt zwischen on/off hin und her und soll in 0/1 umgesetzt werden.
Habs so probiert aber das funktioniert nicht.
spec="HK_VR.actorState:0::$val=(($val)=~'on'?1:0)"
Gruß
Eisix
@Eisix
Bei Deiner spec liegt es vermutlich an dem Punkt ...
Müsste es statt HK_VR.actorState nicht HK_VR:actorState heissen ?
@OdfFhem
ja da hast du recht da hat sich irgendwann beim testen ein "." eingeschlichen. Leider geht es dann immer noch nicht und ich denke ich habe auch die Ursache gefunden.
Wenn ich direkt das device anspreche funktioniert es so.
<ftui-chart-data [update]="HK_VR:actorState:time" label="Heizung" fill stepped fill color="white" log="logdb" file="-" spec="HK_VR:actorState:0::$val=($val=~'on'?1:0)"></ftui-chart-data>
Bei mir wird es aber als Variable einem Template uebergeben, das funktioniert nicht
<ftui-chart-data [update]="{{SENSOR}}:actorState:time" label="Heizung" fill stepped fill color="white" log="logdb" file="-" spec="{{SENSOR}}:actorState:0::$val=($val=~'on'?1:0)"></ftui-chart-data>
Jemand eine Idee?
Gruß
Eisix
Hallo,
kaum macht man es richtig geht es!
Mein Fehler, geht auch mit Variable, wenn man die richtige benutzt.
Danke für die Hilfe!
Gruß
Eisix
Hi,
ich habe gestern auch mal ein bißchen mit den Charts rumgespielt und tatsächlich auch eine "7-Tage"-Ansicht hinbekommen. Dazu habe ich fleißig in den component.js-Dateien gestöbert ;) Falls sich dafür jemand interessiert, siehe Anhang. Ich kann mich aber nicht erinnern, wo ich überall geändert/ergänzt habe ::)
Mein nächstes Ziel, diese Ansicht als Standard ("active") vorzubelegen, habe ich nicht geschafft. Kann mir da jemand ein Tipp geben?
Außerdem habe ich mich gefragt, ob eine gemeinsame chart-controls für mehrere Charts auf einer Seite möglich ist. Kann man die irgendwie gruppieren?
Danke!
Gruß Volker
@vaulie
Zitat von: vaulie am 12 Dezember 2021, 21:03:34
... eine "7-Tage"-Ansicht hinbekommen ...
Ähnlich wie
'day' und '24h' oder
'month' und '30d' kann man auch
'week' und '7d' in chart-controls.component.js identisch behandeln.
Zitat von: vaulie am 12 Dezember 2021, 21:03:34
Mein nächstes Ziel, diese Ansicht als Standard ("active") vorzubelegen, habe ich nicht geschafft. Kann mir da jemand ein Tipp geben?
In ftui-chart-controls gibt man mit Attribut
units die verwendbaren Modi an.
In ftui-chart gibt man mit Attribut
unit den gewünschten (Start)Modus an - vorbelegt mit "day".
Zitat von: vaulie am 12 Dezember 2021, 21:03:34
Außerdem habe ich mich gefragt, ob eine gemeinsame chart-controls für mehrere Charts auf einer Seite möglich ist. Kann man die irgendwie gruppieren?
Ein ftui-chart-controls gilt immer nur für das umgebende ftui-chart. Innerhalb von ftui-chart können neben einem ftui-chart-controls (beliebig) viele ftui-chart-data verwendet werden. Somit kann ftui-chart-controls für mehrere Datenlieferanten gelten.
Generell immer gut, wenn man sich zur Orientierung ein mitgeliefertes Beispiel zur Komponente näher ansieht (in diesem Fall: examples/chart.html) ...
Hi OdfFhem,
vielen Dank für Deine Hinweise!
Die 7d habe ich tatsächlich ähnlich zu 24h und 30d dort implementiert. Wäre super, wenn jemand mit Schreibzugriff das ins github übernehmen kann, oder kann das nur setstate alleine?
Der Unterschied zwischen units im controls und unit im chart hatte ich übersehen, nun sehe ich die Charts wie gewünscht. Danke! :)
Wegen der Gruppierung kenne ich das aus dem "normalen" fhem-web, dass dort nur einmal Kontrollelemente vorhanden sind und alle Charts gemeinsam verändert werden. In ftui3 möchte ich gerne mehrere Diagramme darstellen und nicht alle chart-data in ein Diagramm malen lassen. Weiß jemand, ob das möglich ist und/oder das mit dem bestehenden externen js chart modul vielleicht mal möglich sein wird?
Hi,
ich habe noch 2 Probleme mit FTUI3 Chart.
Ich hoffe ihr könnt mir helfen.
1. geht es um den "unit" Tag am "ftui-chart-data"
Ich möchte also an meine Werte ein Einheitenbezeichner haben wie z.b. unit="°C".
Leider hat es keine Auswirkung. Hier ein Beispiel:
<ftui-chart class="row" width="150px" height="100px" color="primary">
<ftui-chart-data fill log="logdb" unit="°C" file="history" spec="TempWohnzimmer:temperature"
[update]="{{device}}:state:time"></ftui-chart-data>
</ftui-chart>
2. Die angezeigte Zeit wenn man auf einen Datenpunkt fährt.
Hier bekomme ich die Zeit immer mit am / pm angezeigt.
Ich habe hier einiges zu locale und sprache gelesen.
Habe alles ausprobiert, leider hilft nichts.
<meta name="lang" content="de">
<meta name="language" content="German">
<meta http-equiv="content-language" content="de-DE">
<meta property="og:locale" content="de-DE">
Im Anhang ein Screenshot des Charts mit den 2 Problemen.
Viele Grüße und Danke,
Stefan
@stefanru
zu 1) Bei ftui-chart könnte ein neues Attribut namens ytickunit (beispielhaft für die y-Achse) das Problem lösen.
ytickunit=" °C"
In chart.component.js wären dann 2 Änderungen notwendig.
Temporär könnte "ticks: {" innerhalb von "y:" erweitert werden zu
ticks: {
callback: (val, index) => { return val + this.ytickunit; },
Temporär könnte der return-Wert von "static get properties" von
noX: false
};
erweitert werden zu
noX: false,
ytickunit: ''
};
Dadurch wird der Skalenwert um den in ytickunit hinterlegten Wert ergänzt.
zu 2) Wenn kein explizites tooltipformat vorgegeben wird, greift chart.js bei der Anzeige auf seinen "englischen" Standardwert zurück.
Temporär könnte folgende Stelle in chart.component.js
time: {
erweitert werden zu
time: {
"tooltipFormat":"d.MMMM yyyy, HH:mm:ss",
Dann zeigt chart.js ein "deutsches" Format an ... die Monatsnamen bleiben allerdings "englisch".
Hi OdfFhem,
danke für die Erklärung.
Ok, dann müsste ich wohl die js anpassen oder besser meine eigenen neben dran stellen.
Vielen Dank, ich spiel mal etwas damit rum.
Gruß,
Stefan
Hallo zusammen,
Ich bin da auf eine Fehlermeldung gestoßen, die ich mir nicht so recht erklären kann.
Rumgespielt habe ich mit folgendem:
<ftui-chart title="Stromverbrauch pro Tag" y-label="Energy in kWh" width="900px" height="180px" unit="month">
<ftui-chart-data
log="logdb"
file="history"
spec="MYSENSOR_77:statEnergy1DayLast"
type="bar"
>
</ftui-chart-data>
<ftui-chart-controls units="month, year">
</ftui-chart-controls>
</ftui-chart>
Die Fehlermeldung im roten FTUI-Kästchen besagt:
chart-component.js:316
TypeError: dataElement.fetch is not a function
Sie hängt anscheinend mit dem unit zusammen, welches im <ftui-chart> definiert ist. Egal was ich eintrage, es kommt diese Meldung; nur wenn ich nix eintrage erscheint sie nicht.
Was habe ich da falsch gemacht?
Zitat von: presskopf am 16 Dezember 2021, 21:10:54
Hallo zusammen,
Ich bin da auf eine Fehlermeldung gestoßen, die ich mir nicht so recht erklären kann.
Die Fehlermeldung im roten FTUI-Kästchen besagt:
chart-component.js:316
TypeError: dataElement.fetch is not a function
Sie hängt anscheinend mit dem unit zusammen, welches im <ftui-chart> definiert ist. Egal was ich eintrage, es kommt diese Meldung; nur wenn ich nix eintrage erscheint sie nicht.
Was habe ich da falsch gemacht?
Ich habe das gleiche Problem. Hat bei mir aber nichts mit unit zu tun.
Wenn ich folgendes Chart auf der intex.html plaziere kommt es zur Fehlermeldung. Wenn ich das gleiche Chart auf einer nachgeladenen content.html plaziere, gibt es keine Probleme.
<ftui-chart height="130px" width="300px">
<ftui-chart-data label="Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Heizung_2" spec="4:actTemp" [update]="eg_wz_Heizung_2:actTemp:time"></ftui-chart-data>
<ftui-chart-data label="Wohnen Temperatur" point-radius="0" color="violet" log="FileLog_eg_wz_Heizung_1" spec="4:actTemp" [update]="eg_wz_Heizung_1:actTemp:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Hat jemand eine Idee oder die gleiche Beobachtung gemacht?
Gruß LuGu
Mein Chart aktualisiert sich nicht automatisch - erst wenn ich innerhalb FTUI auf eine andere Seite und dann wieder zurück zur Seite mit dem Chart wechsle, werden die neuen Daten nachgeladen. Kann ich das auch automatisch regelmäßig aktualisieren lassen?
Ich krame das nochmal hoch, da der "Fehler" immer noch auftritt.
Ich versuche das mal aufzudröseln.
Folgendes Konstrukt:
<ftui-grid-tile row="5" col="2" height="4" width="9" shape="round" class="semitransparent">
<ftui-content file="content/chart.html" titel="Thermostat Wohnzimmer"
y_label=""
label1=""
hgfarbe="warn"
farbe="blue"
geraet="wz.thermostat"
temp="temperature"
einheit="30d"
punkt_radius="0">
</ftui-content>
</ftui-grid-tile>
Und das zugehörige content file:
<ftui-chart title="{{titel}}" y-label="{{y_label}}" unit="{{einheit}}">
<ftui-chart-data fill label="{{label1}}"
background-color="{{hg-farbe}}"
color="{{farbe}}"
log="logdb"
file="history"
spec="{{geraet}}:{{temp}}"
point-radius="{{punkt_radius}}">
</ftui-chart-data>
<ftui-chart-controls units="day,week,month"></ftui-chart-controls>
</ftui-chart>
Dies bringt in der Toastmeldung die bereits beschriebene Fehlermeldung:
chart.component.js: 321
TypeError: dataElement.fetch is not a function
Es fehlen dann auch verschiedene Beschriftungen der y Achsen.
In der Javascriptconsole sieht man diese Fehlermeldung:
Uncaught TypeError: dataElement.fetch is not a function
at chart.component.js:321:19
at NodeList.forEach (<anonymous>)
at FtuiChart.refresh (chart.component.js:315:23)
at FtuiChart.onAttributeChanged (chart.component.js:301:14)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiChart.set (element.component.js:164:25)
at FtuiChart.onAttributeChanged (chart.component.js:296:21)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiContent.initContent (content.component.js:96:20)
at FtuiContent.loadFileContent (content.component.js:89:10)
(anonym) @ chart.component.js:321
refresh @ chart.component.js:315
onAttributeChanged @ chart.component.js:301
attributeChangedCallback @ element.component.js:76
set @ element.component.js:164
onAttributeChanged @ chart.component.js:296
attributeChangedCallback @ element.component.js:76
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonym) @ content.component.js:103
Wie schon beschrieben tritt der Fehler nur auf, wenn man einen Chart mittels eines Contentfiles erzeugt.
@grossmaggul
Ich hätte ja gerne geholfen, aber ich kann das Problem nicht nachvollziehen.
Weder direkt noch via content eingebettet - sieht gleich aus und funktioniert jeweils ohne Fehlermeldung.
Um dem Problem auf die Schliche zu kommen, könntest Du eine Zeile in chart.component.js hinzufügen:
- als neue Zeile 321 (vor der fetch-Zeile):
console.log("*** dataElement ***",dataElement.id);
Dann sollte klarer werden, was da gemacht wird ...
Weitere Anmerkungen:
- hgfarbe (außen) und hg-farbe (innen) sind nicht identisch
- einheit (außen) übergibt "30d", ist aber im Attribut units innerhalb des content-files eigentlich nicht vorgesehen - gewollt ?
Hallo OldFhem,
danke für Deine Hilfe, ich habe die log Zeile mal eingefügt, das wird mir ausgegeben, wenn ich einen Refresh der Seite mache.
158[Violation] Added non-passive event listener to a scroll-blocking <some>-Ereignis. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
[Violation] Forced reflow while executing JavaScript took 46ms
chart.component.js:320 *** dataElement *** ftui_chart_data_1
chart.component.js:320 *** dataElement *** ftui_chart_data_2
chart.component.js:320 *** dataElement *** ftui_chart_data_3
chart.component.js:320 *** dataElement *** ftui_chart_data_4
chart.component.js:320 *** dataElement *** ftui_chart_data_5
chart.component.js:320 *** dataElement *** ftui_chart_data_6
chart.component.js:320 *** dataElement *** ftui_chart_data_7
chart.component.js:320 *** dataElement *** ftui_chart_data_8
chart.component.js:320 *** dataElement *** ftui_chart_data_9
chart.component.js:320 *** dataElement *** ftui_chart_data_1
chart.component.js:320 *** dataElement *** ftui_chart_data_2
chart.component.js:320 *** dataElement *** ftui_chart_data_3
chart.component.js:320 *** dataElement *** ftui_chart_data_4
chart.component.js:320 *** dataElement *** ftui_chart_data_5
chart.component.js:320 *** dataElement *** ftui_chart_data_6
chart.component.js:320 *** dataElement *** ftui_chart_data_7
chart.component.js:320 *** dataElement *** ftui_chart_data_8
chart.component.js:320 *** dataElement *** ftui_chart_data_9
chart.component.js:320 *** dataElement *** ftui_chart_data_10
chart.component.js:320 *** dataElement *** ftui_chart_data_11
calendar.component.js:138 refresh ftui_calendar_1
chart.component.js:320 *** dataElement ***
chart.component.js:321 Uncaught TypeError: dataElement.fetch is not a function
at chart.component.js:321:19
at NodeList.forEach (<anonymous>)
at FtuiChart.refresh (chart.component.js:315:23)
at FtuiChart.onAttributeChanged (chart.component.js:301:14)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiChart.set (element.component.js:164:25)
at FtuiChart.onAttributeChanged (chart.component.js:296:21)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiContent.initContent (content.component.js:96:20)
at FtuiContent.loadFileContent (content.component.js:89:10)
(anonym) @ chart.component.js:321
refresh @ chart.component.js:315
onAttributeChanged @ chart.component.js:301
attributeChangedCallback @ element.component.js:76
set @ element.component.js:164
onAttributeChanged @ chart.component.js:296
attributeChangedCallback @ element.component.js:76
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonym) @ content.component.js:103
chart.component.js:320 *** dataElement *** ftui_chart_data_12
9[Violation] 'ftuiDataChanged' handler Zeit: <N> ms
fhem.service.js:232 connect visible: true
fhem.service.js:131 Sun Jan 16 2022 14:12:40 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
fhem.service.js:232 connect visible: true
fhem.service.js:131 Sun Jan 16 2022 14:12:44 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
0:1 GET http://192.168.1.12:9000/0 404 (Not Found)
fhem.service.js:232 connect visible: true
fhem.service.js:131 Sun Jan 16 2022 14:12:44 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 nextZitat- hgfarbe (außen) und hg-farbe (innen) sind nicht identisch
Habe ich geändert.
Zitat- einheit (außen) übergibt "30d", ist aber im Attribut units innerhalb des content-files eigentlich nicht vorgesehen - gewollt ?
einheit also "30d" wird doch an unit in <ftui-chart> weitergegeben und das wurde doch vor einiger Zeit angepasst oder was meinst Du genau?
Genau das wird bei mir auch ausgegeben:
*** dataElement ***
chart.component.js:321 Uncaught TypeError: dataElement.fetch is not a function
at chart.component.js:321:19
at NodeList.forEach (<anonymous>)
at FtuiChart.refresh (chart.component.js:315:23)
at FtuiChart.onAttributeChanged (chart.component.js:301:14)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiChart.set (element.component.js:164:25)
at FtuiChart.onAttributeChanged (chart.component.js:296:21)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiContent.initContent (content.component.js:96:20)
at FtuiContent.loadFileContent (content.component.js:89:10)
Mein Chart :
<ftui-chart width="100%" unit="day" prefetch="21600" extend>
<ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
<ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Zitat von: grossmaggul am 16 Januar 2022, 14:14:41
einheit also "30d" wird doch an unit in <ftui-chart> weitergegeben und das wurde doch vor einiger Zeit angepasst oder was meinst Du genau?
Damit meinte ich, dass Du zwar mit "30d" startest, aber nicht umschalten und wieder zurückkommen könntest:
<ftui-chart-controls units="day,week,month"></ftui-chart-controls>
In der Oberfläche stehen so nur "day,week,month" und nicht "day,week,month,30d" zur Verfügung ...
@grossmaggul, @SirMarco
Ja, wir wissen jetzt schon mal mehr zum Problem, aber richtig hilfreich ist das immer noch nicht wirklich;
daher würde ich noch eine zusätzliche Zeile einfügen - vor der fetch-Zeile stünde dann:
console.log("*** dataElement ***",dataElement);
console.log("*** dataElement ***",dataElement.id);
ZitatDamit meinte ich, dass Du zwar mit "30d" startest, aber nicht umschalten und wieder zurückkommen könntest:
Ah, o.k., jetzt habe ich es geblickt. ::)
Hier der Log mit der zusätzlichen Zeile:
[Violation] Added non-passive event listener to a scroll-blocking <some>-Ereignis. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
jquery.flot.js:3151 Uncaught TypeError: Cannot read properties of null (reading 'save')
at G (jquery.flot.js:3151:18)
G @ jquery.flot.js:3151
setTimeout (async)
H @ jquery.flot.js:3144
z @ jquery.flot.js:1962
r @ jquery.flot.js:717
e.plot @ jquery.flot.js:3299
value @ graph.ts:527
value @ graph.ts:451
(anonym) @ graph.ts:135
o @ react-dom.production.min.js:282
Oi @ react-dom.production.min.js:131
mi @ react-dom.production.min.js:131
mc @ react-dom.production.min.js:252
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
ec @ react-dom.production.min.js:214
Nc @ react-dom.production.min.js:279
(anonym) @ react-dom.production.min.js:282
uc @ react-dom.production.min.js:224
Yc @ react-dom.production.min.js:282
render @ react-dom.production.min.js:286
value @ graph.ts:135
l.emit @ index.js:202
value @ emitter.ts:27
value @ panel_ctrl.ts:102
(anonym) @ module.ts:240
Promise.then (async)
value @ module.ts:228
l.emit @ index.js:181
value @ emitter.ts:27
value @ metrics_panel_ctrl.ts:206
next @ metrics_panel_ctrl.ts:154
t.__tryOrUnsub @ Subscriber.js:192
t.next @ Subscriber.js:130
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t._next @ map.js:41
t.next @ Subscriber.js:53
t.next @ Subject.js:47
t.nextInfiniteTimeWindow @ ReplaySubject.js:39
next @ PanelQueryRunner.ts:199
t.__tryOrUnsub @ Subscriber.js:192
t.next @ Subscriber.js:130
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t.notifyNext @ mergeMap.js:87
t._next @ InnerSubscriber.js:15
t.next @ Subscriber.js:53
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t.next @ Subject.js:47
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t._next @ tap.js:51
t.next @ Subscriber.js:53
t._next @ Subscriber.js:76
t.next @ Subscriber.js:53
t._next @ map.js:41
t.next @ Subscriber.js:53
(anonym) @ subscribeToPromise.js:7
Promise.then (async)
t @ subscribeToPromise.js:5
e._trySubscribe @ Observable.js:43
e.subscribe @ Observable.js:29
e.call @ map.js:18
e.subscribe @ Observable.js:24
e.call @ catchError.js:18
e.subscribe @ Observable.js:24
e.call @ tap.js:18
e.subscribe @ Observable.js:24
e.call @ finalize.js:13
e.subscribe @ Observable.js:24
t.connect @ ConnectableObservable.js:34
e.call @ refCount.js:19
e.subscribe @ Observable.js:24
a @ subscribeToResult.js:13
e.call @ takeUntil.js:14
e.subscribe @ Observable.js:24
a @ subscribeToResult.js:13
t._innerSub @ mergeMap.js:74
t._tryNext @ mergeMap.js:68
t._next @ mergeMap.js:51
t.next @ Subscriber.js:53
(anonym) @ subscribeToArray.js:5
e._trySubscribe @ Observable.js:43
e.subscribe @ Observable.js:29
e.call @ mergeMap.js:29
e.subscribe @ Observable.js:24
value @ PanelQueryRunner.ts:195
(anonym) @ PanelQueryRunner.ts:184
c @ runtime.js:45
(anonym) @ runtime.js:271
forEach.e.<computed> @ runtime.js:97
b @ app.41bc4b193210d0f899b3.js:2
i @ app.41bc4b193210d0f899b3.js:2
Promise.then (async)
b @ app.41bc4b193210d0f899b3.js:2
i @ app.41bc4b193210d0f899b3.js:2
(anonym) @ app.41bc4b193210d0f899b3.js:2
(anonym) @ app.41bc4b193210d0f899b3.js:2
(anonym) @ PanelQueryRunner.ts:63
value @ metrics_panel_ctrl.ts:182
(anonym) @ module.ts:198
Promise.then (async)
value @ module.ts:197
Promise.then (async)
value @ metrics_panel_ctrl.ts:95
l.emit @ index.js:202
value @ emitter.ts:27
value @ PanelModel.ts:271
value @ DashboardModel.ts:334
value @ panel_ctrl.ts:48
(anonym) @ panel_ctrl.ts:43
$broadcast @ angular.js:18869
(anonym) @ plugin_component.ts:228
$eval @ angular.js:18542
(anonym) @ angular.js:18684
C @ angular.js:18941
$eval @ angular.js:18542
$apply @ angular.js:18641
(anonym) @ angular.js:18952
p @ angular.js:6428
(anonym) @ angular.js:6707
setTimeout (async)
i.defer @ angular.js:6705
$applyAsync @ angular.js:18951
(anonym) @ plugin_component.ts:227
setTimeout (async)
(anonym) @ plugin_component.ts:226
$eval @ angular.js:18542
(anonym) @ angular.js:18684
C @ angular.js:18941
$eval @ angular.js:18542
$apply @ angular.js:18641
(anonym) @ angular.js:18952
p @ angular.js:6428
(anonym) @ angular.js:6707
setTimeout (async)
i.defer @ angular.js:6705
$applyAsync @ angular.js:18951
(anonym) @ plugin_component.ts:224
setTimeout (async)
(anonym) @ plugin_component.ts:223
f @ plugin_component.ts:254
(anonym) @ plugin_component.ts:262
Promise.then (async)
link @ plugin_component.ts:261
(anonym) @ angular.js:1383
It @ angular.js:10619
it @ angular.js:10008
(anonym) @ angular.js:9248
(anonym) @ angular.js:9113
value @ AngularLoader.ts:21
value @ PanelChromeAngular.tsx:188
value @ PanelChromeAngular.tsx:77
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonym) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ac @ react-dom.production.min.js:224
notify @ Subscription.js:19
t.notifyNestedSubs @ Subscription.js:92
t.handleChangeWrapper @ Subscription.js:97
b @ redux.js:221
(anonym) @ index.js:11
dispatch @ redux.js:638
(anonym) @ actions.ts:126
c @ runtime.js:45
(anonym) @ runtime.js:271
forEach.e.<computed> @ runtime.js:97
c @ app.41bc4b193210d0f899b3.js:2
i @ app.41bc4b193210d0f899b3.js:2
Promise.then (async)
c @ app.41bc4b193210d0f899b3.js:2
i @ app.41bc4b193210d0f899b3.js:2
(anonym) @ app.41bc4b193210d0f899b3.js:2
(anonym) @ app.41bc4b193210d0f899b3.js:2
(anonym) @ actions.ts:115
(anonym) @ index.js:8
(anonym) @ redux.js:477
value @ DashboardPanel.tsx:56
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonym) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ac @ react-dom.production.min.js:224
notify @ Subscription.js:19
t.notifyNestedSubs @ Subscription.js:92
t.handleChangeWrapper @ Subscription.js:97
b @ redux.js:221
(anonym) @ index.js:11
dispatch @ redux.js:638
(anonym) @ initDashboard.ts:228
c @ runtime.js:45
(anonym) @ runtime.js:271
forEach.e.<computed> @ runtime.js:97
d @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
i @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
Promise.then (async)
d @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
i @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
Promise.then (async)
d @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
i @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
(anonym) @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
(anonym) @ default~DashboardPage~SoloPanelPage.41bc4b193210d0f899b3.js:1
(anonym) @ initDashboard.ts:125
(anonym) @ index.js:8
(anonym) @ redux.js:477
value @ SoloPanelPage.tsx:42
mc @ react-dom.production.min.js:251
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
gc @ react-dom.production.min.js:244
ic @ react-dom.production.min.js:223
(anonym) @ react-dom.production.min.js:121
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:18
Wo @ react-dom.production.min.js:120
Xo @ react-dom.production.min.js:121
Yo @ react-dom.production.min.js:120
ec @ react-dom.production.min.js:214
enqueueSetState @ react-dom.production.min.js:133
O.setState @ react.production.min.js:13
t @ index.js:205
(anonym) @ index.js:215
Promise.then (async)
r._loadModule @ index.js:214
r.componentWillMount @ index.js:168
Ai @ react-dom.production.min.js:138
Ya @ react-dom.production.min.js:175
Su @ react-dom.production.min.js:261
yc @ react-dom.production.min.js:230
hc @ react-dom.production.min.js:229
ic @ react-dom.production.min.js:223
ec @ react-dom.production.min.js:214
Nc @ react-dom.production.min.js:279
(anonym) @ react-dom.production.min.js:282
uc @ react-dom.production.min.js:224
Yc @ react-dom.production.min.js:282
render @ react-dom.production.min.js:286
link @ ReactContainer.tsx:71
(anonym) @ angular.js:1383
It @ angular.js:10619
it @ angular.js:10008
(anonym) @ angular.js:9248
(anonym) @ angular.js:9113
link @ angular-route.js:1223
(anonym) @ angular.js:1383
It @ angular.js:10619
it @ angular.js:10008
(anonym) @ angular.js:9248
(anonym) @ angular.js:9113
(anonym) @ angular.js:9504
r @ angular.js:9291
C @ angular.js:10058
y @ angular-route.js:1172
$broadcast @ angular.js:18869
(anonym) @ angular-route.js:734
(anonym) @ angular.js:17169
(anonym) @ angular.js:17217
$digest @ angular.js:18351
$apply @ angular.js:18649
(anonym) @ angular.js:1958
invoke @ angular.js:5106
i @ angular.js:1956
Ot @ angular.js:1976
value @ app.ts:175
zl43 @ index.ts:4
i @ bootstrap:84
r @ bootstrap:45
t @ bootstrap:32
(anonym) @ vendors~app.41bc4b193210d0f899b3.js:2
144 weitere Frames anzeigen
[Violation] Forced reflow while executing JavaScript took 34ms
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Windgeschwindigkeit" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="proplanta:wind" point-radius="0" class="semitransparent" id="ftui_chart_data_1" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2022-01-01_00:00:00" end-date="2022-02-01_00:00:00" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_1
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_2" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_2
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.thermostat:desiredTemperature" point-radius="0" id="ftui_chart_data_3" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_3
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.radiator:temperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_4" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_4
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.radiator:desiredTemperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_5" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_5
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.radiator:valveposition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_6" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_6
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.heizkoerper_Clima:measured-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_7" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_7
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.heizkoerper_Clima:desired-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_8" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_8
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.heizkoerper_Clima:ValvePosition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_9" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_9
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Windgeschwindigkeit" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="proplanta:wind" point-radius="0" class="semitransparent" id="ftui_chart_data_1" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2022-01-01_00:00:00" end-date="2022-02-01_00:00:00" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_1
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_2" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_2
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.thermostat:desiredTemperature" point-radius="0" id="ftui_chart_data_3" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_3
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.radiator:temperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_4" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_4
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.radiator:desiredTemperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_5" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_5
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.radiator:valveposition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_6" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_6
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.heizkoerper_Clima:measured-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_7" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_7
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.heizkoerper_Clima:desired-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_8" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_8
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.heizkoerper_Clima:ValvePosition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_9" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:26" end-date="2022-01-16_16:18:26" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_9
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="CPU 1" color="red" background-color="rgba(124,45,22,0.2)" log="logdb" file="history" spec="sys.ueberwachung:cpu1_temp" point-radius="0" id="ftui_chart_data_10" margin="0" padding="0" type="line" point-background-color="#ed553b" border-color="#ed553b" border-width="1.2" title="-" unit="°C" start-date="2022-01-16_00:00:00" end-date="2022-01-17_00:00:00" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_10
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="CPU 2" color="green" background-color="rgba(23,145,122,0.2)" log="logdb" file="history" spec="sys.ueberwachung:cpu2_temp" point-radius="0" y-axis-id="y1" id="ftui_chart_data_11" margin="0" padding="0" type="line" point-background-color="#3caea3" border-color="#3caea3" border-width="1.2" title="-" unit="°C" start-date="2022-01-16_00:00:00" end-date="2022-01-17_00:00:00" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_11
calendar.component.js:138 refresh ftui_calendar_1
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:27" end-date="2022-01-16_16:18:27" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement ***
chart.component.js:324 Uncaught TypeError: dataElement.fetch is not a function
at chart.component.js:324:19
at NodeList.forEach (<anonymous>)
at FtuiChart.refresh (chart.component.js:315:23)
at FtuiChart.onAttributeChanged (chart.component.js:301:14)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at FtuiChart.set (element.component.js:164:25)
at FtuiChart.onAttributeChanged (chart.component.js:296:21)
at FtuiChart.attributeChangedCallback (element.component.js:76:12)
at HTMLElement.initContent (content.component.js:96:20)
at HTMLElement.loadFileContent (content.component.js:89:10)
(anonym) @ chart.component.js:324
refresh @ chart.component.js:315
onAttributeChanged @ chart.component.js:301
attributeChangedCallback @ element.component.js:76
set @ element.component.js:164
onAttributeChanged @ chart.component.js:296
attributeChangedCallback @ element.component.js:76
initContent @ content.component.js:96
loadFileContent @ content.component.js:89
await in loadFileContent (async)
FtuiContent @ content.component.js:26
(anonym) @ content.component.js:103
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:27" end-date="2022-01-16_16:18:27" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_12
fhem.service.js:232 connect visible: true
fhem.service.js:131 Sun Jan 16 2022 16:18:28 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
5[Violation] 'ftuiDataChanged' handler Zeit: <N> ms
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
4swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
4swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
4swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
4swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
[Violation] Forced reflow while executing JavaScript took 31ms
0:1 GET http://192.168.1.12:9000/0 404 (Not Found)
fhem.service.js:232 connect visible: true
fhem.service.js:131 Sun Jan 16 2022 16:18:32 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
2swiper.component.js:145 next
@grossmaggul und vermutlich auch @SirMarco
Ich würde sagen, jetzt kennt man die wahrscheinlichste Ursache:
- das problematische dataElement ist zwar vom Typ ftui-chart-data und wurde auch bereits in Zeile #134 von chart.component.js "rekrutiert"
- an der ERROR-Stelle vom Log hat es aber noch keine id und demnach auch noch keine Routine
- wenig später ist es dann vollständig initialisiert, hat eine id, die benötigte Routine und verursacht keinen ERROR mehr im Log
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:27" end-date="2022-01-16_16:18:27" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement ***
chart.component.js:324 Uncaught TypeError: dataElement.fetch is not a function
.
.
.
chart.component.js:321 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit="°C" start-date="2021-12-17_16:18:27" end-date="2022-01-16_16:18:27" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:322 *** dataElement *** ftui_chart_data_12
Angenommen, man hat nichts übersehen, könnte man jetzt vorübergehend die ehemalige Zeile #321 ersetzen durch:
if (dataElement.fetch) dataElement.fetch();
Routine fetch wird also nur ausgeführt, wenn sie auch tatsächlich existiert.
Das scheint zu funktionieren, zumindest ist die Fehlermeldung weg.
Es gibt aber immer noch ein anderes Problem.
Wenn ich sowas hier mache:
<ftui-content file="content/chart.html" titel="Thermostat Wohnzimmer"
y_label="Thermostat"
y_eins="Ventil"
y_achse="Temperatur"
label1="Ist"
label2="Ventil"
hgfarbe="green"
farbe="blue"
geraet="wz.thermostat"
temp="temperature"
geraet2="wz.radiator"
ventil="valveposition"
einheit="30d"
punkt_radius="0"
y-achse-id0="y0"
y-achse-id1="y1">
</ftui-content>
Und hier das entsprechende Contentfile:
<ftui-chart title="{{titel}}" y-label="{{y_achse}}" y1-label="{{y_eins}}" unit="{{einheit}}">
<ftui-chart-data fill label="{{label1}}"
background-color="{{hgfarbe}}"
color="{{farbe}}"
log="logdb"
file="history"
spec="{{geraet}}:{{temp}}"
point-radius="{{punkt_radius}}"
y-axis-id="y-achse-id0">
</ftui-chart-data>
<ftui-chart-data fill label="{{label2}}"
background-color="{{hgfarbe}}"
color="{{farbe}}"
log="logdb"
file="history"
spec="{{geraet2}}:{{ventil}}"
point-radius="{{punkt_radius}}"
y-axis-id="y-achse-id1">
</ftui-chart-data>
<ftui-chart-controls units="day,week,month,30d"></ftui-chart-controls>
</ftui-chart>
Dann wird die Skala der rechten Y Achse auf der linken, statt auf der rechten Seite angezeigt.(s.Bild)
Ich hoffe ich habe nicht wieder irgendeinen Typo drin.:-/
Noch allgemein zu den Charts, die Angabe der unit in ftui-chart-data wird scheinbar ignoriert
Zitat von: grossmaggul am 16 Januar 2022, 18:42:51
Das scheint zu funktionieren, zumindest ist die Fehlermeldung weg.
Ja, ist nur eine temporäre "Lösung"; so oder in anderer Form müsste sie irgendwann den Weg ins Git finden.
Zitat von: grossmaggul am 16 Januar 2022, 18:42:51
Noch allgemein zu den Charts, die Angabe der unit in ftui-chart-data wird scheinbar ignoriert
Das Attribut unit wurde - glaube ich - noch nie wirklich verwendet - könnte also eigentlich entsorgt werden.
In ftui-chart gibt es y-unit und y1-unit; hier kann ein Zusatz zum Wert der Skala hinterlegt werden (s. chart.html unter examples).
Zitat von: grossmaggul am 16 Januar 2022, 18:42:51
Es gibt aber immer noch ein anderes Problem.
Vermutlich liegt das Problem bzw. zwei davon im content-File:
y-axis-id="y-achse-id0">
...
y-axis-id="y-achse-id1">
Ungeprüfte Lösung könnte sein:
y-axis-id="{{y-achse-id0}}">
...
y-axis-id="{{y-achse-id1}}">
ZitatDas Attribut unit wurde - glaube ich - noch nie wirklich verwendet - könnte also eigentlich entsorgt werden.
In ftui-chart gibt es y-unit und y1-unit; hier kann ein Zusatz zum Wert der Skala hinterlegt werden
O.K., in der Readme.md steht das leider noch nicht drin.
ZitatVermutlich liegt das Problem bzw. zwei davon im content-File:
Jain, ja, weil ich die Klammern vergessen hatte und die Ventilskala jetzt nicht mehr vor dem Chart steht, nein, weil die Ventilskala jetzt aber auch nicht rechts angezeigt wird, bzw. gar nicht angezeigt wird.
@grossmaggul
Es gibt jetzt die Komponente chart in einem neuen Stand. Den solltest Du mal ziehen und anschließend vor Zeile 164 die beiden, für das letzte Problem verwendeten Debugzeilen integrieren.
Ich vermute mal, dass hier schon über die Verwendung von y1 entschieden wird, aber noch gar nicht alle ftui-chart-data vollständig initialisiert sind ...
Sollte sich die Komponente bis zu Deinem Test nochmals ändern, müsste u.U. die Lage neu bewertet werden ...
Den neuen Stand hatte ich schon gezogen, das Problem mit der fehlenden Beschriftung bei Contentfilebenutzung bleibt aber.
Zitatanschließend vor Zeile 164 die beiden, für das letzte Problem verwendeten Debugzeilen integrieren.
Habe ich gemacht, das kommt dabei raus, mit dem aktuellsten Stand der chart Componente.
[Violation] Forced reflow while executing JavaScript took 49ms
158[Violation] Added non-passive event listener to a scroll-blocking <some>-Ereignis. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
[Violation] Forced reflow while executing JavaScript took 67ms
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Windgeschwindigkeit" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="proplanta:wind" point-radius="0" class="semitransparent" id="ftui_chart_data_1" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit start-date="2022-01-01_00:00:00" end-date="2022-02-01_00:00:00" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_1
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" id="ftui_chart_data_2" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_2
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.thermostat:desiredTemperature" point-radius="0" id="ftui_chart_data_3" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_3
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.radiator:temperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_4" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_4
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.radiator:desiredTemperature" point-radius="0" y-axis-id="y0" id="ftui_chart_data_5" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_5
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.radiator:valveposition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_6" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_6
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="#d6305650" color="#d63056" log="logdb" file="history" spec="wz.heizkoerper_Clima:measured-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_7" margin="0" padding="0" type="line" point-background-color="#d63056" border-color="#d63056" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_7
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Soll" background-color="#d6407650" color="#d67054" log="logdb" file="history" spec="wz.heizkoerper_Clima:desired-temp" point-radius="0" y-axis-id="y0" id="ftui_chart_data_8" margin="0" padding="0" type="line" point-background-color="#d67054" border-color="#d67054" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_8
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="logdb" file="history" spec="wz.heizkoerper_Clima:ValvePosition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_9" margin="0" padding="0" type="line" point-background-color="rgba(75,192,192,1)" border-color="rgba(75,192,192,1)" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_9
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="CPU 1" color="red" background-color="rgba(124,45,22,0.2)" log="logdb" file="history" spec="sys.ueberwachung:cpu1_temp" point-radius="0" id="ftui_chart_data_10" margin="0" padding="0" type="line" point-background-color="#ed553b" border-color="#ed553b" border-width="1.2" title="-" unit start-date="2022-01-17_00:00:00" end-date="2022-01-18_00:00:00" prefetch="0" update tension="0.0" offset="0" y-axis-id="y"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_10
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="CPU 2" color="green" background-color="rgba(23,145,122,0.2)" log="logdb" file="history" spec="sys.ueberwachung:cpu2_temp" point-radius="0" y-axis-id="y1" id="ftui_chart_data_11" margin="0" padding="0" type="line" point-background-color="#3caea3" border-color="#3caea3" border-width="1.2" title="-" unit start-date="2022-01-17_00:00:00" end-date="2022-01-18_00:00:00" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement *** ftui_chart_data_11
calendar.component.js:138 refresh ftui_calendar_1
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" y-axis-id="y0" y-unit="°C" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement ***
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="green" color="blue" log="logdb" file="history" spec="wz.radiator:valveposition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_13" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement ***
17[Violation] 'ftuiDataChanged' handler Zeit: <N> ms
fhem.service.js:232 connect visible: true
fhem.service.js:131 Mon Jan 17 2022 09:50:43 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:117 auto-play
swiper.component.js:201 15 true
swiper.component.js:201 15 true
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
2swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
swiper.component.js:145 next
0:1 GET http://192.168.1.12:9000/0 404 (Not Found)
fhem.service.js:232 connect visible: true
fhem.service.js:131 Mon Jan 17 2022 09:50:46 GMT+0100 (Mitteleuropäische Normalzeit) '[refresh] start now isOffline:' false 'isAppVisible()' true
chart.js:95 [Violation] 'requestAnimationFrame' handler took 155ms
2swiper.component.js:145 next
@grossmaggul
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ist" background-color="green" color="blue" log="logdb" file="history" spec="wz.thermostat:temperature" point-radius="0" y-axis-id="y0" y-unit="°C" id="ftui_chart_data_12" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement ***
chart.component.js:165 *** dataElement *** <ftui-chart-data fill label="Ventil" background-color="green" color="blue" log="logdb" file="history" spec="wz.radiator:valveposition" point-radius="0" y-axis-id="y1" id="ftui_chart_data_13" margin="0" padding="0" type="line" point-background-color="#66aaFF" border-color="#66aaFF" border-width="1.2" title="-" unit start-date="2021-12-18_09:50:41" end-date="2022-01-17_09:50:41" prefetch="0" update tension="0.0" offset="0"> </ftui-chart-data>
chart.component.js:166 *** dataElement ***
Der Auszug bestätigt die Vermutung, dass die beiden letztgeloggten ftui-chart-data noch keine id haben und wohl zum content-file gehören.
Um das Problem zu lösen, müsste man die Entscheidung zur Verwendung von y1 weiter unten fällen ... in z.B. onDataChanged ...
O.K., danke für Deinen Einsatz!
'Naben zusammen,
gibt es aktuell eine Möglichkeit, ein on/off Mapping in einem FTUI 3 Chart abzubilden?
Also zB aus FHEM/SVG:
Regensensor:state:::$val=($val=~'rain'?1:0)
bzw analog in Grafana:
SELECT
UNIX_TIMESTAMP(TIMESTAMP) as time_sec,
IF(VALUE="rain",1,0) as value,
"Regen" as metric
FROM history
WHERE DEVICE="Regensensor" AND READING="state" AND $__timeFilter(TIMESTAMP)
Danke und Gruss
Ralph.
Zitat von: megadodopublications am 17 Januar 2022, 18:10:19
gibt es aktuell eine Möglichkeit, ein on/off Mapping in einem FTUI 3 Chart abzubilden ?
Sollte bei Eintragung ins spec-Attribut funktionieren ... schon mal probiert ?
Hallo,
ich habe heute den aktuellen Stand geupdatet.
Beim ersten Aufruf meiner index.html erhalte ich jede Menge Fehlermeldungen zu meinen Charts.
Aufgerufen werden die Charts über die Index.html:
<ftui-tab-view id="View7">
<ftui-grid-tile row="1" col="2" height="13" width="17" color="secondary" shape="round">
<ftui-content file="flur_content7.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
und die Charts sind in der flur_content7.html wie folgt definiert:
<ftui-row>
<ftui-chart title="Wohnzimmer" y-label="Heizung/Außen">
<ftui-chart-data label="Außen" color="warning" log="myDbLog" file="history" spec="myBuderus:OutdoorTemp" [update]="myBuderus:state:time" update="60" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data label="Ist-Temp." fill background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog" file="history" spec="WZ.EG.WT:temperature" [update]="WZ.EG.WT:state:time" update="60" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data label="Soll-Temp" fill background-color="#d6305650" color="#d63056" log="myDbLog" file="history" spec="WZ.EG.WT:desiredTemperature" [update]="WZ.EG.WT:state:time" update="60" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
<ftui-row>
Kann da jemand helfen bzw. was anfangen?
Viele Grüße Gerald.
Hi.
Ist der . bei label="Ist-Temp." richtig?
LG
Hi,
ja der ist richtig, fehlt aber bei "Soll-Temp". :D
Habe ich eben rausgenommen, ändert aber nichts bei den Fehlern.
Ich hatte auch nur die FTUI3-Dateien und damit Chart aktualisiert.
Meine HTML-Datei mit den Charts habe ich nicht angefasst gehabt.
LG Gerald
Eine Spec scheint bei dir keine Daten zu liefern. Ich baue die Statistikfunktionen noch etwas widerstandsfähiger gegen leer Datenarrays, aber das löst das Problem der fehlenden Daten nicht. Es versteckt es nur wieder.
Kann man die Statistikfunktion nicht an-/abschaltbar gestalten?
Irgendwas stimmt mit <y-unit> auch noch nicht so ganz oder was will mir die u.a. Grafik sagen.
Zitat von: OdfFhem am 17 Januar 2022, 19:42:10
Sollte bei Eintragung ins spec-Attribut funktionieren ... schon mal probiert ?
Funktioniert sehr gut. Dankeschön!
Ich versuche nun, dies ohne y-Achse auszugeben. y0 und y1 sind bereits belegt.
Via FTUI scheinen aktuell nur 2 Achsen unterstützt zu werden.. Mir würde es aktuell schon reichen, wenn sowas gehen würde
y-axis-id="HIDDEN" (analog zur Grafana Axis Placement Option)
Gibt es Möglichkeiten?
Danke und Gruss
Ralph
@megadodopublications
Vielleicht helfen die speziellen Attribute: no-y no-y1 no-x
Es gibt no-y und no-y1
<ftui-chart no-y no-y1>
Nochmal die Frage, was ist da los?
https://forum.fhem.de/index.php/topic,117779.msg1201415.html#msg1201415
Ja, y-unit kann man angeben.
y-unit="°C" y1-unit="°C"
Was stimmt da nicht?
ZitatWas stimmt da nicht?
Soll das so, daß links außen die Temperatur(14-23°) steht und direkt am Chart die Einteilung 0-1 Grad (in 0.2 Schritten)?
du hast vermutlich ein falsche y-axis-id angegeben. Es gibt nur 'y' und 'y1'. Für diese beiden gibt es eine Definition für Aussehen und Position. Wenn du aus Versehen 'y0' benutzt, gibt es diese nicht und chartjs denkt sich etwas aus.
O.K., ich habe das nochmal überprüft.
<ftui-chart title="Radiator" y-label="Temperatur" y1-label="Ventil" y-unit="°C" y1-unit="%" unit="30d" class="semitransparent">
<ftui-chart-data fill label="Ist"
background-color="#d6305650"
color="#d63056"
log="logdb"
file="history"
spec="wz.radiator:temperature"
point-radius="0"
y-axis-id="y0">
</ftui-chart-data>
<ftui-chart-data fill label="Soll"
background-color="#d6407650"
color="#d67054"
log="logdb"
file="history"
spec="wz.radiator:desiredTemperature"
point-radius="0"
y-axis-id="y0">
</ftui-chart-data>
<ftui-chart-data fill label="Ventil"
background-color="rgba(75,192,192,0.2)"
color="rgba(75,192,192,1)"
log="logdb"
file="history"
spec="wz.radiator:valveposition"
point-radius="0"
y-axis-id="y1">
</ftui-chart-data>
Wenn ich den beiden ersten <ftui-chart-data> das y-axis-id=0 lösche, dann geht's. Darf man das so nicht angeben?
Weil es, wie gesagt, keine y0 gibt.
Setze es auf y oder lasse es weg, es ist default.
O.K., das war mir nicht klar, danke für die Aufklärung!
Wie kann so man ein Diagramm im Anhang realisieren? Es soll ein / aus Zustand dargestellt werden.
Das Chart.js kann per default keine Gantt Charts (oder ähnliches) darstellen. Es gibt aber ein Plugin, was das ermöglichen soll.
Müsste man sich mal ansehen, ob es kompatibel ist.
https://github.com/anton-shchyrov/chartjs-plugin-gantt
Edit1: passt nicht mehr - zu alt. Evtl sind Floating Bars vom chart.js passender.
Edit2: Floating Bars passen auch nicht. Ich versuche jetzt mein Glück mit type="bubble" + open=1 und closed=0 Mapping und Interpolation.
Edit3: könnte klappen, siehe Screenshot vom ersten Versuch
<ftui-chart-data stepped label="Stefan" color="#ff0000" background-color="#d63056" log="logProxy" spec="DbLog:logdb,predict=13000000,extend=13000000:Stefan_Zuhause:state:0::$val=($val=~'on'?0.95:0.9)"></ftui-chart-data>
In FTUI3 hatte ich es übergangsweise so gelöst. In die Logdatei werden nur die Zustandsänderungen geschrieben. Erzeugt einen Graphen zwischen 0.95 und 0.9.
ja, so habe ich das verstanden. Zum Beispiel bei Fenster und Türkontakten. Im Logfile steht nur open und close und dazwischen nix.
open wird in 3 umgewandelt, close in 0
Wenn man das in einem normalen Line-Chart darstellt, bekommt man ein Sägezahnmuster - nicht sehr sinnvoll.
Wenn man dazu 'stepped' einschaltet, sieht es besser aus - eine Stufe. Die fallende Flanke ist aber grafisch unschön.
Deswegen versuche ich bei der fallenden Flanke die dazwischenliegenden Punkte zu berechnen und die 0 auszublenden. Da bekommt man ein Chart aus deiner Frage. Oder hat sich das erledigt?
Der Wunsch ist noch nicht gelöst.
Bei FTUI2 konnte man den Werten Farben zuordnen also die 0.95 z.B. rot und alles was kleiner 0.95 war die Hintergrundfarbe, damit konnte ich mit den minimalen log Werten waagerechte Graphen erstellen.
Ist vielleicht nicht die beste Lösung, aber es hat funktioniert. Meine Vorstellung ist, das es so, oder noch besser zu realisieren ist.
data-columnspec='["DbLog:logdb,predict=13000000,extend=13000000:Stefan_Zuhause:state:0::$val=($val=~\\x22on\\x22?0.95:0.91)",
data-style='[["8",["0.95","rgba(255, 255, 255, 0)","0.91"],["0.95","#ff0000","0.95"]],
Kann man die Legende in der Kopfzeile ausblenden?
Hallo zusammen,ist es möglich, Diagramme zu "stapeln". Also z. B Leistung Gerät 1: 1,7 kW, Leistung Gerät 2: 0,34 kW -> Diagramm wie im Anhang?
Danke und GrußThomas
Eine Variante, wie man einen farbigen Hintergrundbereich in die Charts reinpfuscht. Vielleicht hat jemand eine bessere Idee?
<ftui-popup id="keller_klima_chart" timeout="0" height="90%" width="89%" >
<header>Klima Keller</header>
<ftui-column>
<ftui-row>
<ftui-chart title="Feuchtigkeit" y-label="Rel. Luftfeuchtigkeit" y1-label="Temperature" y-max="90" y-min="40" y-unit="%rF">
<ftui-chart-data label="Kellerboden" point-radius="1"
background-color="rgba(32, 99, 155,0.2)" color="rgba(32, 99, 155,1)"
log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::"/>
<ftui-chart-data label="Kellerdecke" point-radius="1"
background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)"
log="FileLog_kg.kellerwand.DHT22" spec="4:kg.kellerwand.DHT22.humidity\x3a::"/>
<ftui-chart-data point-radius="0" fill color="#44000001" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::100"></ftui-chart-data>
<ftui-chart-data point-radius="0" fill color="#ffd84a00" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::75"></ftui-chart-data>
<ftui-chart-data point-radius="0" fill color="#55c59401" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::65"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-row>
</ftui-column>
</ftui-popup>
Um mein FTUI3 fertigzustellen, habe ich jetzt noch eine Frage zum Chart. Alle Charts die ich gern wollte, habe ich jetzt implementiert. Allerdings bekomme ich die Anzeige für meinen Heizungsverlauf nicht hin. Kann ich beim spec mit |part arbeiten? Irgendwie hat jeder meiner Plots den gleichen Verlauf....und etwas total Kurioses angezeigt.
Im Anhang mal FTUI2 und FTUI3 Vergleich...
Hier mal die betreffende Zeile aus meinem logfile:
2022-03-01_00:06:34 Mythz sGlobal: outsideTemp: 0.2 flowTemp: 27.3 returnTemp: 26.6 hotGasTemp: 30.6 dhwTemp: 46.3 flowTempHC2: -60 evaporatorTemp: 26.8 condenserTemp: 26.1
mixerOpen: 0 mixerClosed: 0 heatPipeValve: 0 diverterValve: 0 dhwPump: 0 heatingCircuitPump: 0 solarPump: 0 compressor: 0 boosterStage3: 0 boosterStage2: 0 boosterStage1: 0
highPressureSensor: 0 lowPressureSensor: 0 evaporatorIceMonitor: 0 signalAnode: 0 evuRelease: 1 ovenFireplace: 0 STB: 0 outputVentilatorPower: 36 inputVentilatorPower: 36
mainVentilatorPower: 0 outputVentilatorSpeed: 24 inputVentilatorSpeed: 23 mainVentilatorSpeed: 0 outside_tempFiltered: 1.1 relHumidity: 0 dewPoint: 0 P_Nd: 6.03 P_Hd: 11.51
actualPower_Qc: 0.000 actualPower_Pel: 0.000 collectorTemp: -60 insideTemp: -60 windowOpen: 0 quickAirVent: 0 flowRate: 0 p_HCw: 1.51 humidityAirOut: 25.86
und hier das Chart:
<ftui-chart title="Heizungsverlauf" y-label="Temperatur" y1-label="Luftfeuchtigkeit" y-unit="°C" y1-unit="%">
<ftui-chart-data label="Brauchwasser" fill background-color="rgba(21,0,249,0.2)" color="rgba(21,0,249,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(13)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Luftfeuchtigkeit" fill background-color="rgba(132,248,6,0.2)" color="rgba(132,248,6,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(95)" y-axis-id="y1" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Vorlauf" fill background-color="rgba(251,0,0,0.2)" color="rgba(251,0,0,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(7)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Rücklauf" background-color="rgba(0,224,250,0.2)" color="rgba(0,224,250,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(9)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="HC1 Soll" background-color="rgba(125,0,250,0.2)" color="rgba(125,0,250,1)" log="FileLog_Mythz" [spec]="4:sHC1 | part(15)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="HC1 Ist" background-color="rgba(219,0,250,0.2)" color="rgba(219,0,250,1)" log="FileLog_Mythz" [spec]="4:sHC1 | part(17)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Außentemperatur" background-color="rgba(233,205,13,0.2)" color="rgba(233,205,13,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(5)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
@Stonemuc
spec wird an FHEM weitergereicht, um die geloggten Daten auszuwerten. Die eckigen Klammern bzw. eine Pipe-Funktion klingen in diesem Zusammenhang "sehr ungewöhnlich" ...
Um FTUI2 und FTUI3 vergleichen zu können, wäre das FTUI2-Tag noch interessant ...
Ich hab da nicht wirklich Ahnung von. Wie kann ich dann den x-ten Wert aus der Spalte 4 sGlobal rausfiltern? Muss ja irgendwie möglich sein...
Hier mal wie ich es in FTUI2 gelöst habe:
<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["13:sGlobal","95:sGlobal","7:sGlobal","9:sGlobal","15:sHC1","17:sHC1","5:sGlobal"]'
data-legend='["Brauchwassertemp.","Luftfeuchtigkeit","Vorlauf","Rücklauf","HC1 Soll","HC1 Ist","Außentemp."]'
data-uaxis='["primary","secondary","primary","primary","primary","primary","primary"]'
data-ptype='["lines","lines","lines","lines","lines","lines","lines"]'
data-yunit="°C"
data-yunit_sec="%"
data-ytext="Temperaturen"
data-ytext_sec="Luftfeuchtigkeit"
data-xticks="240"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-minvalue="-25"
data-maxvalue="70"
data-style='["ftui l6","ftui l4","ftui l2","ftui l5","ftui l2dash","ftui l5dash","ftui l3"]'>
</div>
@Stonemuc
FTUI2 verwendet die bei SVG übliche Vorgehensweise:
- der 1.Eintrag gibt die Spalte an, aus der der Wert entnommen werden soll
- der 2. Eintrag ist ein Teil eines regulären Ausdrucks und entspricht meist dem Readingnamen oder Gerätename.Readingname
Aus z.B.
[spec]="4:sGlobal | part(13)"
sollte demnach
spec="13:sGlobal"
werden ...
Okay...ich bin bis jetzt davon ausgegangen, dass wenn ich z.B.:
log="FileLog_TK_Naehzimmer" spec="4:temperature"
als Code schreibe, dass im Logfile die Spalte 4 nach "temperature" durchsucht wird und mir der Wert dahinter ausgegebn wird.
Funktioniert ja auch so bei all meinen anderen Charts die ich erstellt habe.
Ich versuch's mal mit deinem Tipp, denke du hast da bedeutend mehr Durchblick als ich.
Zitat von: Stonemuc am 23 März 2022, 23:03:10
Ich versuch's mal mit deinem Tipp, denke du hast da bedeutend mehr Durchblick als ich.
Könnte sein, Fehleinschätzungen meinerseits sind aber nicht auszuschließen ;)
Zitat von: Stonemuc am 23 März 2022, 23:03:10
... dass im Logfile die Spalte 4 nach "temperature" durchsucht wird und mir der Wert dahinter ausgegebn wird ...
Der reguläre Ausdruck (in Deinem Fall "temperature") wird auf die komplette Logzeile angewendet. Man kann also u.a. gemäß Readingnamen, Gerätenamen, Uhrzeit, Wertmuster, ... vorfiltern.
Im Folgenden ein kurzer Auszug aus einem Logfile:
- 1.Zeile entspricht einem typischen Eintrag
- 1.Spalte enthält Datum und Uhrzeit
- 2.Spalte enthält den Gerätenamen
- 3.Spalte enthält den Readingnamen
- 4.Spalte enthält einen einspaltigen Wert (daher ist 4 die am häufigsten verwendete Spaltennummer)
- 2.Zeile entspricht einem Eintrag, bei dem der Wert selbst aus mehreren Spalten besteht
- "4" selektiert 703; "8" selektiert 9.00
- 3.Zeile entspricht einem (speziellen) Eintrag, der den state (ohne Readingnamen) darstellt
- Tmin ist nicht der Readingname, sondern der erste Bestandteil vom Wert von state
2022-03-24_05:38:09 Wetter temperature: 1.6
2022-03-24_05:38:09 Wetter lastConnection: 703 values captured in 9.00 s
2022-03-24_05:38:09 Wetter Tmin: 5 Tmax: 16 T: 1.6 H: 80.3 W: 0 P: 1029.7
kurze Rückmeldung - ich kann deinen Durchblick nur bestätigen. Das Diagramm wird nun richtig angezeigt - TOP
Hat jemand eine Idee wie ich die im Anhang gezeigte Funktion vom gplot File in's FTUI3 Chart umwandeln kann? Hab es mal selbst versucht, klappt aber nicht...
So klappt es nicht:
<ftui-chart-data label="HC1Soll-HC1Ist" fill background-color="rgba(21,0,249,0.2)" color="rgba(21,0,249,1)" log="FileLog_Mythz" spec="17:sHC1:.*$val=($fld[16]-$fld[14])" [update]="Mythz:state:time"></ftui-chart-data>
@Stonemuc
Gemäß Deinem Screenshot müsste spec in etwa so aussehen:
spec="17:sHC1:0:$val=($fld[16]-$fld[14])"
Die 3.Spalte bzgl. ":" entspricht einem Initialwert (bei Dir 0)
Die 4.Spalte bzgl. ":" entspricht einer Art Funktion (bei Dir eher eine Zuweisung)
Nochmald danke..klappt
Siehe auch https://forum.fhem.de/index.php/topic,115259.msg1216689.html#msg1216689 (https://forum.fhem.de/index.php/topic,115259.msg1216689.html#msg1216689)
Ein herzerfrischendes "Moin" vom achtern Diek vorweg.
Mein ftui3 - Frontend ist im laufe der Zeit immer mächtiger geworden.
Leider hat dies die Reaktionszeit erheblich in Mitleidenschaft gezogen.
Zur Probe habe ich mal die gesamten Charts auskommentiert und siehe da, die Sache läuft wieder flüssig.
Mir ist aufgefallen, dass die Charts laufend in Ihrem Anzeigebereich (in meinem Fall der aktive Tag) im Hintergrund aktualisiert werden, auch wenn diese aktuell gar nicht ausgewählt wurden.
Da die meisten Daten im 5-Minuten Intervall aufgenommen werden, kommt dort ein mächtiger Datenstrom zusammen der selbst die Video - Aufnahmen blockiert.
Meine Fragen daher:
a) Ist es möglich dem Server zu beizubringen, den Charts nur den neuen Datenpunkt zu übermitteln und in den Cache abzulegen so dass der Chart aus den akkumulierten Cache-Werten dargestellt wird?
b) Ist es möglich dem Server beizubringen, nicht jeden Datenpunkt zu übermitteln sondern nur sinnvoll sichtbare Änderungen?
c) Ist es möglich alle Charts im Hintergrund ruhen (einfrieren) zu lassen, bis das entsprechende Chart sich aktiv im Vordergrund (Sichtbereich) befindet und erst dann den Datenstream beginnen zu lassen?
Hintergrund:
Ich habe 12 Räume
Jeder Raum verfügt über einen Chart mit 7 Graphen (Soll-Temperatur, Ist-Temperatur, Heizkörper-Ventil - Position, Feuchtigkeit, Licht, Rolladen, Fensteroeffnung).
Die Datenpunkte werden laut Homematic alle 5min gesammelt bzw, ins Log abgelegt => 20 Datenpunkte pro aufgezeichnete Stunde und 480 Datenpunkte pro Tag.
12 * 7 * 20 = 1680 Datenpunkte bei jedem kleinen Update im Chart.
Danke für Eure Hilfe
Gruß
Sailor
Mit Chart.js (was hier glaube ich verwendet wird) ist es möglich, neue Daten hinzuzufügen und den Chart zu aktualisieren. Ich hatte das mal ohne FTUI-Anbindung ausprobiert und konnte einen Chart mit den über das Websocket gesendeten Updates aktualisieren. Wegen Mangels an Zeit liegt das ganze aber brach.
Falls Interesse besteht, kann ich den Proof-Of-Concept Code gerne zur Verfügung stellen.
Zitat von: papa am 04 April 2022, 14:37:36
Mit Chart.js (was hier glaube ich verwendet wird) ist es möglich, neue Daten hinzuzufügen und den Chart zu aktualisieren. Ich hatte das mal ohne FTUI-Anbindung ausprobiert und konnte einen Chart mit den über das Websocket gesendeten Updates aktualisieren. Wegen Mangels an Zeit liegt das ganze aber brach.
Falls Interesse besteht, kann ich den Proof-Of-Concept Code gerne zur Verfügung stellen.
Wenn das nur die "Updates" waren, dann ist das ja o.k., aber zur Zeit kommen laut Debugging-Mode meines FirefoxBrowsers jedes mal bei einem Update der komplette Satz an Daten erneut durch und nicht nur der neue Datenpunkt. Was ja das eigentliche Problem für die Datenauslastung ist.
Gruss
Sailor
Nachtrag
Habe alle Charts raus geschmissen und siehe da, alle Videos laufen wieder flüssig.
Nehme ich auch nur einen Chart wieder auf, egal wie viele Datenpunkte dieser enthält, geht alles wieder in die Knie...
Ich glaube die Charts holen sich laufend neue Daten, ob neue Datenpunkte vorhanden sind oder nicht...
Gibt es eine Option die Daten ausschließlich auf Button-Klick erneut vom Server zu holen - Quasi ein Update Button?
Gruß
Sailor
[update]="Mythz:state:time"
rauswerfen.
Hallo zusammen,
ich habe 2 Charts in meiner Index.html wie folgt eingebunden:
<!--Stromverbrauch Haus-->
<ftui-grid-tile row="7" col="6" height="4" width="12" color="secondary" shape="round">
<header>Stromverbrauch</header>
<ftui-row>
<ftui-column width="90%">
<ftui-chart y-label="W">
<ftui-chart-data label="Verbrauch" fill stepped background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog" file="history" spec="HM_Strom_IEC_01:W"
type="line" point-radius="0">
</ftui-chart-data>
</ftui-chart>
</ftui-column>
<ftui-column width="10%" color="secondary">
<ftui-row height="20%">
<ftui-label [text]="HM_Strom_IEC_01:W | round(1)| fix(1)" decimals="1" size="2"><span slot="unit"> W</span></ftui-label>
</ftui-row>
<ftui-row height="80%">
<ftui-slider style="height:90%;" class="size-2" tick="200" wide-tick="1000" has-ruler has-wide-ticks
[value]="HM_Strom_IEC_01:W" min="0" max="6000" is-vertical handle="none" readonly
[color]="HM_Strom_IEC_01:W | step('0:my_darkred, 2000:my_signalorange, 4000:my_signalgreen')">
</ftui-slider>
</ftui-row>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<!--Internet-->
<ftui-grid-tile row="11" col="8" height="4" width="10" color="secondary" shape="round">
<header>Internet</header>
<ftui-chart y1-max="200" y-label="Mb/s" y1-label="Ping ms">
<ftui-chart-data label="DL" fill background-color="#d6305650" color="#d63056" log="myDbLog" file="history" spec="Internetspeedtest:download"
type="line" point-radius="0">
</ftui-chart-data>
<ftui-chart-data label="UL" fill background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog" file="history" spec="Internetspeedtest:upload"
type="line" point-radius="0">
</ftui-chart-data>
<ftui-chart-data y-axis-id="y1" label="Ping" color="warning" log="myDbLog" file="history" spec="Internetspeedtest:ping"
type="line" point-radius="0">
</ftui-chart-data>
</ftui-chart>
</ftui-grid-tile>
Leider findet da so gut wie keine Aktualisierung der Charts statt.
Woran kann das liegen?
VG Gerald.
Zitat von: BigGB am 09 April 2022, 19:54:53
Leider findet da so gut wie keine Aktualisierung der Charts statt.
Woran kann das liegen?
Vermutlich liegt es an dem fehlenden [update]-Attribut ...
ZitatVermutlich liegt es an dem fehlenden [update]-Attribut ...
Danke, das war's
Zitat von: BigGB am 10 April 2022, 14:11:53
Danke, das war's
Und wie sieht es jetzt mit der Performance aus?
Gruß
Sailor
Zitat von: Sailor am 11 April 2022, 17:30:09
Und wie sieht es jetzt mit der Performance aus?
Gruß
Sailor
Mit den beiden Charts benötigt initPage beim Starten ca. 2700 ms, ohne die Charts ca. 1700ms (Windows-Rechner + Firefox+LAN). Wobei die Charts ziemlich als Erstes beim Bildaufbau zu sehen sind.
Auf meinem Tablet HannSpree Titan 3 (scheint etwas schwach auf der Brust :() dauert das Starten der Index.html mit den beiden Charts ca. 10000ms (WLAN-Anbindung).
Ansonsten habe ich über "ftui-content" noch eine Seite mit 9 Charts eingebunden, sehe keine großartigen Performance-Probleme.
Grüße Gerald
Moin Gerald
Zitat von: BigGB am 11 April 2022, 18:45:17
Ansonsten habe ich über "ftui-content" noch eine Seite mit 9 Charts eingebunden, sehe keine großartigen Performance-Probleme.
Also ich habe nach wie vor Probleme mit der gleichzeitigen Anzeige von Videos und den Charts.
Sobald ich Charts einbinde - auch auf anderen Tabs - bricht die Uebertragung immer wieder ab.
Selbst wenn ich das [update] auskommentiere.
Kannst du mal spaßeshalber ein Video mit folgendem code einbinden und mit und ohne Charts laufen lassen?
<ftui-image src="http://livecam.intra.net" width="200px" height="150px" shape="round" interval="10" nocache></ftui-image> Den Eintrag
http://livecam.intra.net musst du natürlich anpassen. ;)
Gruß
Sailor
Zitat von: Sailor am 14 April 2022, 12:18:29
Moin Gerald
Also ich habe nach wie vor Probleme mit der gleichzeitigen Anzeige von Videos und den Charts.
Sobald ich Charts einbinde - auch auf anderen Tabs - bricht die Uebertragung immer wieder ab.
Selbst wenn ich das [update] auskommentiere.
Kannst du mal spaßeshalber ein Video mit folgendem code einbinden und mit und ohne Charts laufen lassen?
<ftui-image src="http://livecam.intra.net" width="200px" height="150px" shape="round" interval="10" nocache></ftui-image>
Den Eintrag http://livecam.intra.net musst du natürlich anpassen. ;)
Gruß
Sailor
Hallo Sailor,
ich habe mal 'ne Webcam mit <ftui-image> nach Deinem Vorschlag eingebunden und mal über <iframe> .
Ich merke da bei mir keinen spürbaren Unterschied.
Gruß Gerald.
Hallöchen, ich wollte mal fragen ob sich jemand schonmal mit den Kuchen/Donut-Diagrammen in FTUI 3 auseinander gesetzt hat.
Bin da gerade am basteln und bräuchte mal ein Beispiel.
Stehe gerade komplett auf dem Schlauch :-[
Könnte mir bitte kurz jemand auf die Sprünge helfen, wie ich einen Wert aus einem dblog durch 100 teilen und aufrunden kann bevor er angezeigt wird?
Das mit der Pipe wie bei den Widgets funktioniert beim chart ja nicht
Hi, ich denke da ja niemand Antwortet, solltest du paar mehr Infos geben.
Evtl. Kannst es im dblog schon umrechnen.?
Bsp.:
$val/=100
Kenne mich aber damit nicht aus. Sorry.
LG
Na ja, in meiner logdb steht ein wert von 2635 und ich möchte diesen als 2,6 anzeigen
Dieser Versuch hat erst mal nicht funktioniert
<ftui-chart-data label="Wert" log="logdb" file="history" spec="Wert|round(1)|divide(100)"></ftui-chart-data>
Hinweis:
Zitat von: setstate am 01 Dezember 2021, 12:15:18
...
die Spec-Angabe ist so aufgebaut: Column:Regexp:DefaultValue:Function
.....
(da hattest du auch gefällt mir gedrückt ;))
Hier ein Beispiel von OdfFhem:
https://forum.fhem.de/index.php/topic,117779.msg1191097.html#msg1191097
Da solltest du das mit einer Function wie von OdfFhem im Bsp. gezeigt gelöst bekommen..
LG
ps. Die pipes ziehen glaube nur bei einem Binding...
Die gute Nachricht: Es funktioniert mit der folgenden Definiion:
spec="Device:Wert:0::$val=(ceil($val/100))"
Die schlechte ich verstehe nicht ganz wie, da da s nicht dem Pattern entspricht. ;-)
Wenn ich dem Pattern Column:Regexp:DefaultValue:Function folge ist:
Column = Devicename -> Sollte aber doch die Spaltennummer sein
Regex = Readingname
Default = 0
Function = leer -> Das sollte doch $val ... sein
ndef = $val ...
Gibt es eigentlich eine Doku wo man auch die verwendeten variablen findet (z.B. $val, $ts,...)
Sorry wenn ich so blöd frage, sehe den Wald vor lauter bäumen gerade nicht mehr :-[
Schön das du es hinbekommen hast.
Hier noch paar Infos zu
$fld:
http://www.fhemwiki.de/wiki/SVG-Plots_von_FileLog_auf_DbLog_umstellen#.40fld
$val und $ts
$val ist der aktuelle Wert die die Datenbank für ein Device/Reading ausgibt.
$ts ist der aktuelle Timestamp des Logeintrages.
Wird als $val das Schlüsselwort "hide" zurückgegeben, so wird dieser Logeintrag nicht ausgegeben, trotzdem aber für die Zeitraumberechnung verwendet.
Wird als $val das Schlüsselwort "ignore" zurückgegeben, so wird dieser Logeintrag nicht für eine Folgeberechnung verwendet.
https://fhem.de/commandref_DE.html#DbLog
Das konnte ich aus der commandref unter Schlüsselwörter rausfinden.
LG
Zitat von: Sailor am 14 April 2022, 12:18:29
Also ich habe nach wie vor Probleme mit der gleichzeitigen Anzeige von Videos und den Charts.
Zur Erklärung meiner folgenden Fragen und Bitten:
Seit Ende Februar musste ich mein FTUI3-Projekt aus beruflichen Gründen liegenlassen. Davor war ich noch gar nicht bei Charts, ich stelle schrittweise um. Jetzt ist bei mir Charts dran.
Verständnisfragen:
@eki stellt sein ftui2-Charts nicht auf ftui3 um?
Und hier geht es um das ftui3-Charts von @setstate?
ich habe zudem eine große Bitte:
Vermutlich haben viele Thermometer mit Temperatur und Luftfeuchte, also zwei Parametern. Kann mir bitte jemand zeigen, wie er das realisiert hat? Das können auch gern mehrere sein, die das zeigen - dann würde man (also ich) die Möglichkeiten recht schnell sehen/erkennen. Also das wäre ganz toll.
Ich habe eine Nachfrage zu den Charts in der Mitte des Threads. Ich kann aus DbLog auslesen und anzeigen, aber es gehen nicht 1) die Bar-Darstellung und 2) die Anzeige mit zwei y-Achsen. Sieht jemand, was ich falsch mache?
<ftui-grid-tile row="1" col="2" height="4" width="6" shape="round">
<header>Grafiken</header>
<ftui-chart title="Warmwasser" y-label="Temp" y1-label="Verbr" y-unit="°C" y1-unit="l">
<ftui-chart-data label="Zulauf" fill background-color="rgba(0,0,0,0)" color="rgba(242,56,56,1)"
point-radius="0.5" fill log="DbLog" file="history" spec="Viessmann2:Temperature4"
[update]="Viessmann2:Temperature4:time"></ftui-chart-data>
<ftui-chart-data label="Zirkulation" fill background-color="rgba(0,0,0,0)" color="rgba(189,85,85,1)"
point-radius="0.5" fill log="DbLog" file="history" spec="Viessmann2:Temperature3"
[update]="Viessmann2:Temperature3:time"></ftui-chart-data>
<ftui-chart-data label="Wasser" fill background-color="rgba(55,89,222,0.7)" color="rgba(55,89,222,0.7)"
type="bar" fill log="DbLog" file="history" spec="Wasserzaehler_IEC_01:Verbrauch"
point-radius="0.5" y-axis-id="y1"
[update]="Wasserzaehler_IEC_01:Verbrauch:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
<ftui-grid-tile row="5" col="2" height="4" width="6" shape="round">
<ftui-chart title="Warmwasser2" y-label="Temp" y-unit="°C">
<ftui-chart-data label="Zulauf" color="rgba(242,56,56,1)"
type="bar" point-radius="0.5" fill log="DbLog" file="history" spec="Viessmann2:Temperature4"
[update]="Viessmann2:Temperature4:time"></ftui-chart-data>
</ftui-chart>
</ftui-grid-tile>
sieht dann so aus wie im Anhang (Einheiten fehlen, keine zwei Y-Achsen, kein Bar-Chart).
@andies
Ich habe ein leicht abgewandeltes Beispiel (ob DbLog oder FileLog sollte egal sein) ausprobiert und erhalte eine Anzeige gemäß dem angehängten Screenshot.
<ftui-chart title="Temp & Volt" y-label="Temp" y1-label="Volt" y-unit="°C" y1-unit="V">
<ftui-chart-data file="CURRENT" log="FileLog_Wetter" spec="4:Wetter.temperature\x3a" label="T" color="green" type="bar"></ftui-chart-data>
<ftui-chart-data file="CURRENT" log="FileLog_powerSwitch5" spec="4:powerSwitch5.voltage\x3a" label="V" color="red" fill y-axis-id="y1"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
zu 1) Deine fehlende bar-Darstellung liegt evtl. daran, dass die darzustellenden Werte zu "schnell" wechseln ... bei meinem Beispiel kann ich voltage nicht als bar darstellen, bei temperature gelingt dies schon
zu 2) dieses Problem kann ich nicht nachvollziehen, da sowohl temperature als auch voltage auf der ersten bzw. zweiten y-Achse dargestellt werden können
Danke, ich hatte es befürchtet. Die Anzeige, die nicht (oder besser: inzwischen manchmal nicht und manchmal doch) geht, war auf dem iPhone. Das wird also etwas Endgerät-spezifisches sein. Zudem läuft Fhem auf einem Raspberry, eventuell ist da mit JavaScript problematisch. Da muss ich halt probieren.
Hallo,
hat jemand eine Erklärung/Idee warum die Markierungen der Grafen im Chart soweit auseinanderliegen?
Im Screenshot habe den Punkt mit Mauszeiger markiert, angezeigt werden mir die Werte von ganz anderen Position der anderen Grafen.
Die Definition des Charts ist hier:
<ftui-chart title="Schlafzimmer" y-label="Heizung/Außen" y1-label="Ventil" y1-min="0" y1-max="100" y-max="35">
<ftui-chart-data label="Außen" color="warning" log="myDbLog" file="history" spec="myBuderus:OutdoorTemp" [update]="myBuderus:state:time" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data label="Ist-Temp." fill background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" log="myDbLog" file="history" spec="SZ.OG.WT:temperature" [update]="SZ.OG.WT:state:time" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data label="Soll-Temp." fill stepped background-color="#d6305650" color="#d63056" log="myDbLog" file="history" spec="SZ.OG.WT:desiredTemperature" [update]="SZ.OG.WT:state:time" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-data y-axis-id="y1" label="Ventil" color="white" log="myDbLog" file="history" spec="SZ.OG.HT:valveposition" [update]="SZ.OG.HT:state:time" type="line" point-radius="0"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Und hier der Screenshot, ich hoffe es kommt rüber was ich meine.
Viele Grüße Gerald.
@BigGB
Hat vermutlich damit zu tun, dass es für die genutzten Readings mehr oder weniger Werte gibt.
Die Werte werden je Reading in einem Array gespeichert und angezeigt.
Klickt man beispielsweise den 10.Wert eines Readings an, liegt der 10.Wert eines anderen Readings zeitlich ganz woanders ...
Readings, die häufiger aktualisiert werden, liegen weiter links.
Readings, die seltener aktualisiert werden, liegen weiter rechts.
Nach langem suchen schreibe ich euch mal - vermutlich gibt's irgendwo eine Antwort - finde Sie aber nicht ... :(
Ich habe ein SVG welcher Funktioniert und würde diesen nun gerne als FTUI3 Chart einbauen.
Die Logdatei FileLog_strommesser.log sieht wie folgt aus
Zitat
2022-07-18_22:15:33 strommesser kwh_total: 60.64
2022-07-18_22:15:33 strommesser power_total: 47.02
Ich dachte das sollte als passen. Ist aber leer...
<ftui-chart">
<ftui-chart-data
log="FileLog_strommesser"
spec="4:strommesser.power_total" >
</ftui-chart-data>
</ftui-chart>
Kann mir jemand einen Rat geben ?
PS: Gibt es noch eine alternative Anleitung anstelle von https://github.com/knowthelist/ftui#chart (https://github.com/knowthelist/ftui#chart) mit Beschreibung der Felder ?
@th0nix
<ftui-chart"> sollte so aussehen: <ftui-chart>
Keine direkte Beschreibung, eher eine Art Nutzungsmöglichkeit:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart.html (https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart.html)
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html (https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html)
oder
einzelne Beispiele in diesem Thema
Zu einigen Attributen kann man unter chartjs.org genauere Informationen finden ...
Ich hätte da mal einen Wunsch. Zusätzlich zu "24h" als Unit würde ich mir auch 12h oder 6h wünschen.
Aktuell springt meine Heizung nur für 2-3 Minuten an. Die Bar's sind aber im 24h Modus nicht sichtbar, weil sie zu schmal sind.
Stündlich sind sie sichtbar, allerdings scrolle ich mir dann nen Wolf. Mit 6h geht es gerade so (Source eben geändert, würde aber mit dem nächsten Update überschrieben).
Viele Grüße
@OdfFhem
Sorry da war ein Kopierfehler drin.
<ftui-chart title="Power" unit="4h">
<ftui-chart-data fill
log="FileLog_k.sk.strommesser"
spec="4:k.sk.strommesser.power_total.*" >
</ftui-chart-data>
</ftui-chart>
Sieht so aus.
Leider wird nichts angezeigt. Vermutlich was bei dem spec falsch ?
Hi,
gibt es Möglichkeiten, die Dichte der Gitternetzlinien und/oder die Anzahl der Achsenbeschriftungen zu beeinflussen?
Ich würde gern mehr horizontale Linien im Diagramm einfügen wollen, als es die automatische Darstellung tut.
Zitat von: th0nix am 14 August 2022, 17:26:29
Leider wird nichts angezeigt. Vermutlich was bei dem spec falsch ?
Angenommen,
log und
spec sind richtig.
unit="4h" ist definitiv falsch und sorgt für einen unbrauchbaren Zeitraum (eine einzige 1/1000 Sekunde).
unit akzeptiert momentan folgende Zeiträume: hour day week month year 24h 30d
Zitat von: Dracolein am 28 August 2022, 21:38:53
Dichte der Gitternetzlinien
momentan eher noch nicht ... erfordert z.B. die Integration der stepSize-Eigenschaft
Beispielhaft für die y-Achse:
... chart.component.js ... Zeile #103 (GitHub)
autoSkip: true,
durch
stepSize: this.stepSizeY,
autoSkip: (this.stepSizeY)?false:true,
ersetzen
... chart.component.js ... Zeile #207 (GitHub)
stackedY1: false,
durch
stackedY1: false,
stepSizeY: 0,
ersetzen
... ftui-chart-Tag um das Attribut step-size-y erweitern
<ftui-chart ... step-size-y="15" ...>
s. Screenshots
Zitat von: Dracolein am 28 August 2022, 21:38:53
Anzahl der Achsenbeschriftungen
momentan eher noch nicht ... callback wird aber bereits unterstützt
Beispielhaft durch Einführung eines Attributes yy (Name noch offen), das die "Lücke" festlegt (z.B. nur jedes dritte Label)
... chart.component.js ... Zeile #106 (GitHub)
callback: val => val + this.yUnit,
durch
callback: (val,idx) => (!this.yy || idx % this.yy === 0) ? val + this.yUnit : '',
ersetzen
... chart.component.js ... Zeile #207 (GitHub)
stackedY1: false,
durch
stackedY1: false,
yy: 0,
ersetzen
... ftui-chart-Tag um das Attribut yy erweitern
<ftui-chart ... yy="3" ...>
s. Screenshots
Zitat von: Det20 am 09 August 2022, 13:21:09
Ich hätte da mal einen Wunsch. Zusätzlich zu "24h" als Unit würde ich mir auch 12h oder 6h wünschen.
Ja so suche ich ebenfalls. Bzw. dass man sich dynamisch die letzten 6 Std anzeigen lassen kann. In FTUI2 ging das meines Wissens mit
data-nofulldays="true"
data-daysago_start="6h"
data-daysago_end="now"in FTUI3 habe ich allerdings noch keine Option gesehen. Oder weiß jemand mehr?
Auch auf die Gefahr hin, dass die Frage schon mal gestellt wurde und ich sie noch nicht gefunden habe ... Kann ich im type "line" irgendwie Einfluß auf die Farbe je nach Wert nehmen?
Quasi "step('0: success, 50: warning, 80: danger')", was bei "chart-data" / "color" nicht funktioniert? Hintergrund: Ich habe meine Heizung mit einem Stromzähler / Hichi Lesekopf versehen. Wenn nun die Heizung anspringt, werden 1.8kW verbraucht, bei Warmwasser sind es 2.4kW. Alle Daten laufen in die selbe Datenbank, im Graph kann ich die Linien nur Anhand der Höhe unterscheiden. Toll wäre es, wenn ich alle Peaks < 2 kW in blau darstellen könnte und alle darüber in einer anderen Farbe. Quasi wie "step".
das binding [color]="Device | step('0: success, 50: warning, 80: danger')"
funktioniert an sich...
aber im canvas wird es nicht neu geschrieben/refresht/sichtbar.
Erst nach um- und zurückswitchen des Tages/ der Woche ist eine Veränderung der Farbe zu sehen...
LG
Sieht bei type line irgendwie komisch aus, hast du noch einen Tipp?
<ftui-chart-data no-x no-y no-x1 no-y1 fill label="Heizung (Max: $max kW)" background-color="#d6305650"
log="DB_History_Heizung"
unit="hour"
file="history"
type="line"
spec="Heizung:S0Counter_Counter_PowerCurrent"
[update]="Heizung:S0Counter_Counter_PowerCurrent"
[color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: green, 2: success, 3: warning')"
>
</ftui-chart-data>
Du könntest noch zusätzlich im ftui-chart-data mit dem styleAttribute:
--color-base
Bsp.:
[style]="Heizung:S0Counter_Counter_PowerCurrent | step('0:`--color-base:green;`,2:`--color-base:success;`,3:`--color-base:warning;`')"
arbeiten...
Nur den den einen Chart? Wie meinst du das?
Nur ein test im data:
[style]="Heizung:S0Counter_Counter_PowerCurrent | step('0:`--color-base:green;`,2:`--color-base:success;`,3:`--color-base:warning;`')"
+ color step
LG
Danke dir. Aber leider auch nicht besser. Werden falsch gezeichet. Bis 2 sollte grün sein; wird im Peak aber überall grün gezeichnet.
Und gefüllt werden sie irgendwie immer mit rot.
Ok, dann kann nur setstate oder OdfFhem helfen...
Ok, dann warte ich mal ab, vielleicht gibt's ja bald ein Update.
Etwas anderes: Laut Doku soll als Typ "Doughnut" bzw "Pie" möglich sein, nur: wie? Hat das mal jemand realisiert? Ich finde leider keine Beispiele und meine Tests (type=pi, type=pie, type=piechart, type=doughnut usw) bleiben immer leer. Die Volltext-Suche im Ordner "components\chart\" ergab bei "pie" oder "doughnut" auch 0 Treffer, Begriffe sind also in der JS nicht enthalten.
Ich tracke aktuell alles an Strom, was ich irgendwie messen/abgreifen kann (und das ist schon fast alles > 100 Watt). Nun möchte ich gerne in einem Pie-Chart die Verteilung darstellen. Wieviel % des Gesamtverbrauchs hat die Heizung verursacht, wieviel Warmwasser, wieviel die Fernseher, wievel Waschmaschine usw ...
Hast du mal diese Demo studiert?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html
Da steht als Beispiel type="bubble".
In der Onlinedemo sieht es dann so aus:
https://knowthelist.github.io/ftui/www/ftui/examples/chart2.html
Hast du es so probiert mit""
type="pie"
oder
type="doughnut"
Wenn du was über den Chart suchen willst dann hier in der chart.js:
https://github.com/knowthelist/ftui/tree/master/www/ftui/modules/chart.js
setstate liest/importiert diese Daten.
Zitat von: mr_petz
Hast du es so probiert mit""
type="pie"
oder
type="doughnut"
Klar. Kam nix.
type="doughnut" (id) steht drin:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/chart.js/chart.js#L8609
auch in der min.
Zitat von: mr_petz
Hast du mal diese Demo studiert?:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart2.html
Da steht als Beispiel type="bubble".
In der Onlinedemo sieht es dann so aus:
https://knowthelist.github.io/ftui/www/ftui/examples/chart2.html
Öhm ... Ok, da bin ich dann mal raus:
spec="4:EingangstuerRiegel::$fld[2]=~'closed'?1:0"
Wie bilde ich das mit "2.43" (Warmwasser) und "1.8" (Heizung) ab, dazwischen 0 (nix)?
steht hier im thread was dazu:
Zitatdie Spec-Angabe ist so aufgebaut: Column:Regexp:DefaultValue:Function
https://forum.fhem.de/index.php/topic,117779.msg1221216.html#msg1221216
https://forum.fhem.de/index.php/topic,117779.msg1191097.html#msg1191097
https://forum.fhem.de/index.php/topic,117779.msg1221226.html#msg1221226
Danke dir, aber da bin ich tatsächlich raus, finde meine Ansicht eigentlich garnicht so übel.
Konzentriere mich dann eher mal auf Pie
Hier noch ein Beispiel type="bar"
https://forum.fhem.de/index.php/topic,117779.msg1190531.html#msg1190531
Zitat von: Det20 am 29 September 2022, 11:51:17
Auch auf die Gefahr hin, dass die Frage schon mal gestellt wurde und ich sie noch nicht gefunden habe ... Kann ich im type "line" irgendwie Einfluß auf die Farbe je nach Wert nehmen?
Quasi "step('0: success, 50: warning, 80: danger')", was bei "chart-data" / "color" nicht funktioniert? Hintergrund: Ich habe meine Heizung mit einem Stromzähler / Hichi Lesekopf versehen. Wenn nun die Heizung anspringt, werden 1.8kW verbraucht, bei Warmwasser sind es 2.4kW. Alle Daten laufen in die selbe Datenbank, im Graph kann ich die Linien nur Anhand der Höhe unterscheiden. Toll wäre es, wenn ich alle Peaks < 2 kW in blau darstellen könnte und alle darüber in einer anderen Farbe. Quasi wie "step".
Ich habe mal eine Testumgebung erstellt. Mit Bsp. im data type="bar":
[color]="Device | step('0: green, 2: warning, 3: danger')"
[background-color]="Device | step('0: --green, 2: warning, 3: danger')"
[update]="Device"
funktioniert dein Wunsch des Farbumschaltens.
Durch [update] wird der chart neu gezeichnet und die Farbe umgeswitcht.
Bei type="pie" und type="doughnut" im chart kommt bei mir eine Fehlermeldung:
Zitat
chart.min.js:1
TypeError: Cannot read properties of undefined (reading 'x')
und im chart-data:
Zitat
chart.min.js:5
TypeError: o._getRotation is not a function
LG
Sieht auf jeden Fall mal besser aus, aber so ganz klappt das leider immer noch nicht. Die 1.8 (Mauszeiger) müssten ja ne andere Farbe haben also die restlichen.
Nur wenn ich den ersten Wert (green) gegen zb red ändere, ist plötzlich alles rot. Er scheint alle Werte in < 2 einzusortieren.
<ftui-chart y-label="kW">
<ftui-chart-data no-x no-y no-x1 no-y1 fill label="Heizung (Max: $max kW)" background-color="#d6305650"
log="DB_History_Heizung"
unit="hour"
file="history"
type="line"
spec="Heizung:S0Counter_Counter_PowerCurrent"
[update]="Heizung:S0Counter_Counter_PowerCurrent"
[color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: green, 2: warning, 3: danger')"
[background-color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: --green, 2: warning, 3: danger')"
>
</ftui-chart-data>
<ftui-chart-controls units="month, week, day, 12h, 6h, hour"></ftui-chart-controls>
Ja und wegen Pie ... Schade, scheint wohl nicht zu gehen.
@mr_petz, @Det20
War das gewünschte Feature so gedacht, dass die komplette Darstellung einer Linie eine Farbe hat ?
Ja. Wobei dieser Schatten auch geil aussieht.
Bei mir läuft es aber noch nicht 100%, siehe Post. Bist du gerade am Chart dran?
@Det20
Angenommen, Du meinst mich ...
Erst zum WE komme ich dazu, mich praktisch mit dem Thema zu beschäftigen ...
"Ja" klingt so, als ginge es un eine Einheitsfarbe für die gesamte Linie.
Lt. Deinem letzten Screenshot vermute ich, dass die Linie mehr Farben haben sollte ... richtig ?
Yap, meinte dich, sorry.
An sich wäre ich auch happy mit nur einer Farbe gewesen, aber so sieht das natürlich noch besser aus.
Btw:
Ich habe meine chart.js abgeändert, damit ich auch "hour", 6h, 12h usw habe. Das wäre ein Featurewunsch von mir, neben Pie.
@Det20
Featurewünsche sind immer gut und mögliche Lösungen können auch gemeinsam erarbeitet werden. Die Integration in den Auslieferzustand liegt allerdings ganz allein in den Händen von setstate.
Falls es am WE noch keine Erkenntnisse zu Pie bzw. Doughnut gibt, würde ich mir das mal anschauen.
Zitat von: Det20 am 05 Oktober 2022, 12:50:29
Sieht auf jeden Fall mal besser aus, aber so ganz klappt das leider immer noch nicht. Die 1.8 (Mauszeiger) müssten ja ne andere Farbe haben also die restlichen.
Nur wenn ich den ersten Wert (green) gegen zb red ändere, ist plötzlich alles rot. Er scheint alle Werte in < 2 einzusortieren.
<ftui-chart y-label="kW">
<ftui-chart-data no-x no-y no-x1 no-y1 fill label="Heizung (Max: $max kW)" background-color="#d6305650"
log="DB_History_Heizung"
unit="hour"
file="history"
type="line"
spec="Heizung:S0Counter_Counter_PowerCurrent"
[update]="Heizung:S0Counter_Counter_PowerCurrent"
[color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: green, 2: warning, 3: danger')"
[background-color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: --green, 2: warning, 3: danger')"
>
</ftui-chart-data>
<ftui-chart-controls units="month, week, day, 12h, 6h, hour"></ftui-chart-controls>
Ja und wegen Pie ... Schade, scheint wohl nicht zu gehen.
Ich hatte zum test type="bar".
Bei type="line" mit fill verhält sich es anders. Er nimmt nur rgb,rgba,hex und basic Farben:
[background-color]="Device | step('0:`rgba(0,0,0,0.2)`,2:`rgba(133,250,150,0.5)`,3:`rgba(30,60,90,0.7)`')"
Es wird immer alles umgestrickt. Also nicht die einzelnen Chartbalken/Punkte...
Mit RGB ist dann alles schwarz ... Egal ob mit umswitchen.
Zitat von: Det20 am 05 Oktober 2022, 15:04:12
Mit RGB ist dann alles schwarz ... Egal ob mit umswitchen.
Kann ich nicht bestätigen:
[color]="Device | step('0: green, 2: danger, 3: warning')"
background-color="rgba(10,10,10,0.2)"
[update]="Device"
[background-color]="Device | step('0:`rgb(255,133,55)`,2:`rgba(133,250,150,0.5)`,3:`rgba(30,60,90,0.7)`')"
Doch, nun geht's. Allerdings sieht der Wert 1.8 immer noch genauso aus wie der Rest.
Wie im vor-vorherigen Thread geschrieben habe ich das Gefühl, es wird nicht zwischen 1.8 und 2.4 unterschieden, sondern alles als < 2 gewertet.
Bar geht bei mir überhaupt nicht, habe also LINE.
Ja, es werden immer alle Farben geändert.
Der/ das letzte [update] bestimmt die Farbe für alle...
Plan B ist auch fehlgeschlagen. Eine (neue) Idee war, zwei chart-data's zu verwenden.
Beim ersten "step('0:red, 2:white, 3:white')", beim zweiten"step('0:white, 2:red, 3:white')".
Klappt leider auch nicht. Es ist egal was für Daten kommen, er nimmt immer die erste Farbe (0), auch wenn der Wert überhaupt nicht passt.
Sprich: Er zeichnet alles >=2 immer in der 0'er Farbe, auch wenn die nicht matchen darf.
Was steht bei dir im Reading Heizung:S0Counter_Counter_PowerCurrent?
Edit:
step('0:red, 2:white, 3:white')
würde
step('0:red, 2:white)
reichen bei step...
Hinweis: Hexwerte so angeben:
step('0:´#11FF99´, 2:´#99FF11´)
Ein Beispiel von heute früh (mySQL):
TimeStamp; Device; Type; Event; Reading; Value
2022-10-06 08:40:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:40:39 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:09 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:10 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:09 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 0 S0Counter_Counter_PowerCurrent 0
Die Werte sind mehrfach drin, damit der Graph wirklich bis zur 0 (= Ende) eckig ist. Ansonsten würden da Zacken sein (letzter Wert Richtung 0)
ja, wenn der letzte wert 0 ist, dann nimmt er ja immer die erste Farbe.
Mhh...
Ach ja ... verdammt, da wäre ich nicht drauf gekommen. Allerdings brauche ich die null. Wenn die Heizung nicht mehr heizt, verbraucht sie ... 0.
Und ohne würde das Rechteck ja in der Luft enden.
Da er aber anscheinend immer den letzten Wert nimmt und die Werte immer mit 0 anfangen/enden, habe ich anscheinend verloren, außer Gant kommt irgendwann.
Die verwendete OpenSource-Bibliothek unterstützt u.a. die im Screenshot gezeigte FTUI3-Darstellung - allerdings nur mit (testweise fixer) Erweiterung der chart-Komponente.
Sollte die Darstellung interessant sein, müsste man frei füllbare Attribute ins Spiel bringen ...
Eine weitere Variante mit der farbigen Nur-Punkt-Darstellung einer Datenreihe ... s. Screenshot
Sieht gut aus. Hast du was zum testen?
Für die testweise Umsetzung wären folgende Anpassungen notwendig:
*** chart-data.component.js (gemäß dem gestrigen GitHub-Stand hinter Zeile #57 einfügen)
borderMultiColor: false,
*** chart.component.js (gemäß dem gestrigen GitHub-Stand hinter Zeile #350 einfügen)
if ((property === 'borderColor') && dataElement['borderMultiColor']) {
let gradient;
function getGradient(ctx, chartArea) {
if (gradient === undefined) {
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, 'rgba(0, 0, 255, 1)');
gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');
}
return gradient;
}
dataset[property] = function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) { return null; }
return getGradient(ctx, chartArea);
}
}
Beispiele für Nutzung der Anpassungen:
*** Liniendarstellung
<ftui-chart title="Power" unit="24h">
<ftui-chart-data log="FileLog_ftuitest" spec="4:MQTT2_zigbee3_innrPlug3.statUserRead_energyConsHourLast"
type="line" border-width="5" border-multi-color>
</ftui-chart-data>
</ftui-chart>
*** Punktdarstellung
<ftui-chart title="Power" unit="24h">
<ftui-chart-data log="FileLog_ftuitest" spec="4:MQTT2_zigbee3_innrPlug3.statUserRead_energyConsHourLast"
type="scatter" border-width="5" border-multi-color>
</ftui-chart-data>
</ftui-chart>
Das Attribut border-multi-color steuert, ob die (bislang fix) implementierte Sonderfärbung genutzt werden soll oder nicht.
@setstate und/oder @OdfFhem
Könnte man in der aktuellen Version dem fill das mitgeben Bsp.:
fill: {value: 0.5,below: 'rgba(0, 0, 255, 0.2)'},
sieht dann so aus wie auf dem Bild.
Ich habe mal die neuste Version geladen:
https://cdn.jsdelivr.net/npm/chart.js
und temporär Eingebunden zum testen.
Wenn ich im chart.component das mitgebe:
dataElement.fill={'value':0.5};
funzt es nicht.
Oder geht es auch anders?
LG
@mr_petz
fill wird als true/false-Variable genutzt ... fill muss da sein oder nicht, der eigentliche Wert hat so gut wie keine Bedeutung - Ausnahme z.B. "false".
Im Grunde könnte man das JSON-Konstrukt auch via speziellem fillJson-Attribut transportieren und bei Bedarf konvertieren.
fill-json='{"value": 16,"above": "rgba(255, 0, 0, 1)","below": "rgba(0, 0, 255, 1)"}'
Heraus kommt letztlich dann eine Darstellung wie im angehängten Screenshot ...
Danke dir. Woher kommt das Attribute
fill-json
?
LG
Neues, frei erfundenes, zusätzliches Attribut in chart-data.component.js ...
Dann macht das lineargradient mit nur 2 Farben und dem fill einen besseren Eindruck.
Jetzt könnte man noch das backgroundcolor und das color als array übergeben (geht im original) und man hat dann im Wechsel die Farben. Besonders wenn man nur 2 Zustände loggt...
Ist aber alles nur so ein Gedanke.
LG
Zitat von: mr_petz am 07 Oktober 2022, 20:09:06
Ist aber alles nur so ein Gedanke.
Im Grunde kann man noch ein wenig "weiterspinnen" und öffnet mit einem allgemeinen json-Attribut den Zugang zu noch mehr Möglichkeiten ...
***
Noch ein (ganz) anderes Thema:
Du hast jetzt mit der aktuellen Version getestet; verglichen mit der von FTUI3 verteilten Version, wurde u.a. die options-Welt großzügig umgestaltet.
Gab es neben dem Austausch noch Anpassungsbedarf ?
Du sagst also meine Gedanken sind gespinnste... ;D
Spass
Ich habe nicht alle Definition und Options der neuen Version durchprobiert.
Ich habe es auch nicht direkt ins Modul eingebunden.
War ein trockentest mit eigenen tags und script in ftui3. Mich hat nur der donat und pie interessiert. Ist aber für mich nicht brauchbar und braucht man im allgemeinen eigentlich nicht. Line, bar scatter sind denke ich am optimalsten für die meisten.
LG
Ok, jetzt verstehe ich nur noch Bahnhof
@Det20
Wir philosophieren nur ein wenig was man noch integrieren könnte...
Zitat von: mr_petz am 07 Oktober 2022, 20:57:51
Du sagst also meine Gedanken sind gespinnste... ;D
Man soll ja immer die Wahrheit sagen ... ääh ... denken ;)
***
Ich verwende auch gerne mal "polarArea" bzw. "radar" ... finde ich relativ informativ/ansehnlich ... s. angehängte Screenshots.
***
Bzgl. eines allgemeinen json-Attributs habe ich etwas rumexperimentiert mit z.B.:
xyz-json='{
"backgroundColor":"rgba(99, 255, 132, 0.2)",
"borderColor":"rgb(99, 255, 132)",
"fill":true,
"label":"X",
"pointBackgroundColor":"rgb(99, 255, 132)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(99, 255, 132)"
}'
Eigene Attribute braucht man dann nur noch, wenn man Pipes, o.ä. nutzen möchte ...
Ja hatte ich mir auch angesehen...
aber nein. Da fehlt mir die Inspiration...
Das json finde ich gut. Muss man nur richtig definieren und wissen was man da reinschreibt.
https://forum.fhem.de/index.php/topic,115259.msg1144582.html#msg1144582
Hier habe ich auch noch was zum hinzufügen.
Einfach in der chart-data.component.js hinter yAxisID: 'y', bei static get properties() das:
pointStyle: 'circle',
einfügen und man kann die Points anpassen. Mögliche Varianten:
https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles
https://www.chartjs.org/docs/3.0.2/configuration/elements.html#point-styles
Das könnte setstate mit übernehmen.
LG
Edit: Link geändert
@mr_petz
Der Link ist natürlich nützlich, aber verweist immer auf die neueste Version ... ist also recht dynamisch.
Momentan wird aber in FTUI3 noch eine deutlich ältere (Beta)Version genutzt. Der passendere Link wäre somit eher https://www.chartjs.org/docs/3.0.2/configuration/elements.html#point-styles (https://www.chartjs.org/docs/3.0.2/configuration/elements.html#point-styles) bzw. noch eher https://www.chartjs.org/docs/2.9.4/configuration/elements.html#point-styles (https://www.chartjs.org/docs/2.9.4/configuration/elements.html#point-styles)
Im aktuellen Fall unterscheiden sich die Dokus nur im Text, nicht bei den Möglichkeiten.
Interessant könnte übrigens auch noch die Option usePointStyle für die Labels der Legende sein. Hier ist die Doku entscheidend, da sich mittlerweile Einiges geändert hat ... u.a. bzgl. der options-Struktur ...
- FTUI3: options: {legend: {labels: {usePointStyle: true}}}
- latest: options: {plugins: {legend: {labels: {usePointStyle: true}}}}
Ok. Aber es funktioniert....
Moin zusammen,
im <ftui-chart>, lässt sich der Wertebereich der X-Achse (Zeit!) dynamisch gestalten eventuell?
Beispiel anhand meiner PV-Anlage:
Im Sommer Messwerte von 06:00 - 21:00
Im Winter Messwerte von ~09:00 - 17:00
Aktuell wird mir in meiner zentralen FTUI3 Übersicht das kleine Chart relativ leer dargestellt.
Ohne die Parameter "x-min=7" bzw. "x-max=20" werden volle 24 Stunden auf der X-Achse visualisiert.
Nice to have wäre es, wenn der Wertebereich der X-Achse (Uhrzeit) mit dem ersten Messwerte des Tages beginnt und mit dem letzten Messwert des Tages endet. Analog wie die Y-Achse, dessen Wertebereich dynamisch aus den vorhandenen Daten generiert wird.
@Draco
Hier eine Übergangslösung/test für dich:
in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:
https://forum.fhem.de/index.php/topic,117779.msg1241368.html#msg1241368
Jetzt sollte bei unit="day" nur deine Start- bis Endzeit der Logeinträge zu sehen sein.
Beim Umswitchen auf 24h oÄ wird alles normal.
Ich habe es nur mit einem chart-data getestet! Sollte auch nur für einen gehen! Logisch.
LG
Das funktioniert, prima.
Es wird allerdings nun auf alle Charts angewendet.
Könnte man dem <ftui-chart> noch einen Parameter mitgeben, um dies Feature zu nutzen? Sowas wie x-scale="full" bzw. x-scale="day" oder sowas ???
Ok.
Füge der chart-data.component.js nach Zeile 57 (yAxisID: 'y',) das ein:
dayTimeline: false,
Wenn du jetzt im <chart-data> day-timeline angibst wird es dafür gesetzt.
Hinweis: Aber bei jedem UpdateAll ist alles auf Anfang!
Edit: Update
Hier werden immer die min max vom aktuellen Tag angezeigt beim durchklicken der Tage,
in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:
if (this.unit !== 'day' && !dataset.dayTimeline) {
this.configuration.options.scales.x.min = this.startDate;
this.configuration.options.scales.x.max = this.endDate;
} else {
const indexStart = dataset.data.findIndex( i => i.x.replace(/_.*/g,'')===this.startDate.replace(/_.*/g,''));
const indexEnd = dataset.data.findLastIndex( i => i.x.replace(/_.*/g,'')===this.startDate.replace(/_.*/g,''));
//alternate function for indexStart,indexEnd
//const indexStart = dataset.data.map(i => {return i.x.replace(/_.*/g,'');}).indexOf(this.startDate.replace(/_.*/g,''));
//const indexEnd = dataset.data.map(i => {return i.x.replace(/_.*/g,'');}).lastIndexOf(this.startDate.replace(/_.*/g,''));
this.configuration.options.scales.x.min = indexStart >= 0 ? dataset.data[indexStart].x : this.startDate;
this.configuration.options.scales.x.max = indexEnd > 0 ? dataset.data[indexEnd].x : this.endDate;
}
Nicht schön, aber funktioniert...
LG
Ok danke, es wäre nice, wenn das Feature den Weg in das reguläre Modul finden würde, um im Update-Falle nicht erneut alles manuell nachtragen zu müssen
Habe nochmal oben geändert.
Jetzt wird bei jedem Tag nur min max angezeigt wenn man durchblättert...
LG
Zitat von: Dracolein am 28 August 2022, 21:38:53
Hi,
gibt es Möglichkeiten, die Dichte der Gitternetzlinien und/oder die Anzahl der Achsenbeschriftungen zu beeinflussen?
Ich würde gern mehr horizontale Linien im Diagramm einfügen wollen, als es die automatische Darstellung tut.
Habe wieder gespielt :D
in der chart.component die Zeile 89
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/chart/chart.component.js#L89
ersetzen dürch:
autoSkipPadding: this.xTickPadding,
und hinter Zeile 207
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/chart/chart.component.js#L207
das einfügen:
xTickPadding: 30,
30 ist Standard bei der x-Achse.
Jetzt im <ftui-chart> das einfügen:
x-tick-padding="240"und es werden die Ticks mit größeren Abstand gesetzt.
Für die y-Achse kannst du es genauso machen.
LG
Coole Idee, danke.
Laut Github Übersicht gibt es auch
ZitatArea chart or mixed types
Bestünde auch die Möglichkeit eines sogenannten "stacked area chart"?
Beispiel:
Besitze 3 verschiedene PV-Flächen, die unterschiedlich starke Leistungen zur gleichen Zeit produzieren. Derzeit laufen alle Kurven in einem Diagramm relativ wild "hintereinander" verschachtelt umher.
Zur Übersichtlichkeit lasse ich ein FileLog laufen, was die Summe aller PV-Leistungen beinhaltet und ebenfalls im Chart enthalen ist.
Erst jetzt kam mir die Idee, dass ich die Summe aller PV-Kurven, wenn selbige "stacked" übereinander, quasi "grafisch aufsummiert" dargestellt würden, es sogar cooler aussehen würde.
Beispiel aus der Google-Bildersuche verlinke ich:
https://static.anychart.com/images/gallery/v8/area-charts-stacked-area-chart.png
Ja, laut samples gibt es stacked in der 3.0.2:
https://www.chartjs.org/docs/3.0.2/samples/area/line-stacked.html
Wie und ob es geht weis ich leider auch nicht.
LG
Was muss ich denn (wo) dafür definieren?
type=stacked oder vergleichbares funktioniert nicht.
Ok ich habs.
im <ftui-chart> einfach:
stacked-y
reinsetzen und schon geht es...
Es gibt auch noch:
stacked-x und
stacked-y1
LG
Hmm, das optische Ergebnis ergibt irgendwie keinen Sinn. Ich mache später mal Screenshots.
Die Linien sind weiterhin hintereinander, beginnen weiterhin alle auf der Nullinie der X-Achse und nichts wird grafisch aufeinander aufgestacked.
Mein Code enthält ausser bgcolor= und color= eigentlich keine relevanten Parameter.
edit:
<ftui-chart height="95px" width="100%" popup-target="pvleistung" x-min="7" x-max="20">
<ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower5.String1_PAC" [update]="SMATripower5:String1_PAC:time"
fill background-color="#fa58f450" color="#fa58f4" point-radius="0"></ftui-chart-data>
<ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower5.String2_PAC" [update]="SMATripower5:String2_PAC:time"
fill background-color="#1c86ee99" color="#1c86ee" point-radius="0"></ftui-chart-data>
<ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower6.SPOT_PACTOT" [update]="SMATripower6:SPOT_PACTOT:time"
fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data>
</ftui-chart>
Geändert auf (Ausschnitt):
<ftui-chart stacked-y height="95px" width="100%" popup-target="pvleistung" x-min="7" x-max="20">
Ich habe jetzt mit der originalen chart.component getestet.
Auf dem Bild siehst du 2 charts mit gleichen Werten.
Hier sieht man das er die charts "streckt" bzw. "auseinander schiebt".
LG
Edit: Bei dir sieht es wegen dem transparenten fill so komisch aus....
Versuche mal Bsp.( mach es 3x anders):
background-color="rgba(255,0,0,1)"
Nochmal ein Vergleich. roter ist auch der erste der definiert wurde.
Der weiße hat in der Mitte den Wert 0.
Vielleicht auch die Reihenfolge ändern...
Hm vielleicht denke ich falsch ::)
Ich hatte erwartet, dass die durch die einzelnen Graphen erzeugten Flächen in einem normalen Liniendiagramm in einem Stacked-Area-Chart aufeinander aufgestapelt (aufsummiert) würden.
Also ganz simplifiziert am Beispiel (X-Koordinate/Y-Koordinate):
3 einzelne Graphen mit den Punkten (0/1), (1/1) und (2/1) bilden in einem Liniendiagramm ein Rechteck in den Farben rot, blau und gelb.
Alle 3 Graphen in einem einzigen Diagramm wären rein visuell drei Rechecke hintereinander versteckt.
In einem Stacked-Diagramm wären sie übereinander aufgestapelt zu einem insgesamt großen Diagramm mit den Punkte (0/3), (1/3) und (2/3), welches visuell aus 3 horizontalen Streifen aus den Farben rot, blau und gelb dargestellt ist.
Habs probiert, es ändert sich erwartungsgemäß nur die Farbe, nicht aber die Darstellung mit Bezug auf mein geposteten Screenshot zuvor. Hm, vielleicht sind die Kurven zu komplex
Setze mal den 3.Chart (gelb) als erste Definition.
LG
Ändert nichts, aber ich habe nochmal genauer hingeschaut:
Die pinke und blaue Kurve werden gestacked dargestellt. Die gelbe Kurve jedoch wird nicht zusätzlich gestacked, sondern einfach parallel als overlay drübergesetzt konventionell.
Habe mit den Reihenfolgen herumgespielt, das ändert nichts.
Der technische Unterschied liegt einzig im Fakt, dass es sich bei den Datenquellen bei der gelben Linie um eine andere FileLog-Datei handelt.
Eventuell müssen die Daten in der gleichen Datei liegen.
Gibt es Optionen für "Design"-Elemente im Chart, wie zum Beispiel eine gestrichelte Linie ?
Nur wieder extra Anpassung in der chart.component in Zeile 364 von der Originalen Datei aus gesehen:
dataset.borderDash=[5, 5];
ist dann wieder für alle lines...
https://www.chartjs.org/docs/3.0.2/samples/line/styling.html
LG
Um möglichst viele, nicht in der FTUI3-Komponente enthaltene chart.js-Attribute bereitstellen zu können, würde ich zur Integration EINES speziellen json-Attributes tendieren. Damit hätte man dann viele (nicht zwingend alle) Möglichkeiten, ohne dass FTUI3 alle chart.js-Attribute erst als eigene Attribute durchschleusen müsste ...
borderDash wäre dabei ein praktisches Beispiel, welches mit dem EINEN speziellen json-Attribt nutzbar wäre ... und zwar pro Datenlieferant ... und nicht mit nur einer Variante ...
@OdfFhem
Hatten beide ja schon darüber diskutiert und bin ja auch dafür. Muss mal @setstate was dazu sagen ob es seinen "Ansprüchen" genügt... :D
Könnte man das padding und/oder min/max Ticks des grid/gitter da auch integrieren?
Noch eine Frage dazu:
https://forum.fhem.de/index.php/topic,117779.msg1241368.html#msg1241368
Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?
Danke und LG
Zitat von: mr_petz am 28 Oktober 2022, 20:16:51
Hatten beide ja schon darüber diskutiert und bin ja auch dafür. Muss mal @setstate was dazu sagen ob es seinen "Ansprüchen" genügt... :D
Wäre sicher gut, wenn solch ein Attribut von FTUI3 bereitgestellt würde; ansonsten müsste man dafür notwendige Änderungen nach jedem Update immer wieder manuell vornehmen.
Zitat von: mr_petz am 28 Oktober 2022, 20:16:51
Könnte man das padding und/oder min/max Ticks des grid/gitter da auch integrieren?
Hier müsste man zwischen ftui-chart und ftui-chart-data unterscheiden - beide Komponenten bräuchten solch ein spezielles json-Attribut.
Zitat von: mr_petz am 28 Oktober 2022, 20:16:51
Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?
Müsste ich mir mal genauer übers WE anschauen ...
Zitat von: mr_petz am 28 Oktober 2022, 20:16:51
Kann man das so machen? Oder müsste man ganz anders an die Sache ran gehen?
Angenommen, ich bin nicht auf einer falschen Fährte unterwegs, dann würde ich in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:
if (this.xMin >= 0) this.configuration.options.scales.x.min = this.startDate;
if (this.xMax >= 0) this.configuration.options.scales.x.max = this.endDate;
Damit kann die "erzwungene" Skalierung vorne und/oder hinten ausgeschaltet werden und funktioniert bei z.B. 24h, day, week, month, year.
<ftui-chart ..... x-min="-1" x-max="-1"></ftui-chart>
Danke fürs Anschauen. Die Fährte ist prinzipiell Richtig.
Ich dachte mir das erst auch so, aber hier kann man dann nicht die einzelnen Tage Durchschalten im Control und startdate ist der erste Eintrag und enddate der Letzte im Log.
startdate kann natürlich mehrere Tage zurückliegen...
Des Wegen hatte ich mir die einzelnen Tages-Logeinträge filtern lassen...
LG
Zitat von: mr_petz am 30 Oktober 2022, 09:25:44
aber hier kann man dann nicht die einzelnen Tage Durchschalten
Interessant, denn bei meinem "normalen" Test klappte das eigentlich wie gewünscht.
Kannst Du mal ein ftui-chart-Beispiel bereitstellen ?
Hallo zusammen,
wie komme ich an eine historische Anzeige von Daten? Das meint speziell den Jahressprung, wenn ich ein yearly-FileLog habe.
Mein Chart-data ist folgendermaßen definiert:
<ftui-chart-data label="Grundheizung"
type="line"
stepped
fill
color="danger"
log="FileLog_struct_wz_Grundheizung"
file="CURRENT"
spec="4:struct_wz_Grundheizung::$fld[2]=~'on'?22:0"
y-axis-id="y"
point-radius=0>
</ftui-chart-data>
Danke hier bereits für die komplette Unterstützung im fhem-Forum. Ein ungeheurer Reichtum an Ideen und Sach- und Fachverstand ist hier zu finden. Wahnsinn!
Hi @softwear,
Frage wurde hier auch schonmal gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1197915.html#msg1197915
Antwort war diese:
https://forum.fhem.de/index.php/topic,115259.msg1197917.html#msg1197917
Edit: und:
https://forum.fhem.de/index.php/topic,115259.msg1198238.html#msg1198238
LG mr_petz
Herzlichsten Dank! Das löst mein Problem!
Ich wühle mich bereits Tage durch alle möglichen Threads und durch diesen ersten Zitierten vom Anfang und vom Ende aus zur Mitte hin. Jede Menge Infos, sehr interessant und neue Ideen initiierend. Von Suchen ganz abgesehen. Ein Wissensgral hier und ihr! Nochmal danke!
Hallo zusammen, zwei Fragen zu den Charts in FTUI3:
- Kann ich irgendwie die Anzahl an Y Achsen einstellen? (Analog früher: yticks="2" # alle zwei)
- kann ich variabel min / max der Y-Achse einstellen? (Analog früher: data-minvalue="
- " data-maxvalue="[7000,6000,5000,2500,1000]")
Grüße Timo
ZitatKann ich irgendwie die Anzahl an Y Achsen einstellen? (Analog früher: yticks="2" # alle zwei)
Suche mal nach y-label/y-label1 und y-unit/y-unit1 damit kannst Du zumindest zwei verschiedene Y-Achsen einstellen, z.B. bei einem Heizungsthermostat eine Temperaturachse und eine Achse für die Ventilstellung.
Zitat- kann ich variabel min / max der Y-Achse einstellen? (Analog früher: data-minvalue="
Sollte mit y-min/y-max gehen.
Steht aber auch alles hier: https://github.com/knowthelist/ftui#chart
Hallo,
gibt es beim Chart die Möglichkeit Werte einen Tag zu verschieben wie in FTUI2.
Bsp.: ElectricalCalculator Reading EnergyDayLast wird um 24 Uhr gesetzt und zeigt den Energieverbrauch vom vorherigen Tag an wird aber in Chart natürlich am heutigen Tag angezeigt. Also immer einen Tag später.
Gruß
Eisix
Ich würde gerne bei chart die units anpassen, sobald ich das tu, bekomme iber immer ein NULL Error:
Ich habe es wie folgt versucht: units="month, week, day, 12h, 6h, hour"
oder
units="24h, 12h, 6h, 1h"
alles ohne Erfolg, das einzige was geht ist:
units="day, hour"
Hoffe Ihr könnt helfen :-)
@TimoD
Um eine bessere Hilfestellung zu leisten, bitte deine Definition in FTUI3 des chart zeigen.
LG
Gerne :-)
Error in FTUI:
chart-controls.component.js:30
TypeError: null is not an object (evaluating 'element .classList')
<ftui-chart title="">
<ftui-chart-data label="Batterie (Min: $min %, Max: $max %, Last: $last %)"
point-radius="1" color="green" fill="false"
fill log="DR_Taycan" spec="4:Bat" [update]="Taycan:Bat:time">
</ftui-chart-data>
<ftui-chart-data
point-radius="1" color="blue" fill="false"
fill log="DR_Taycan" spec="4:Reichweite*" [update]="Taycan:Bat:time" y-axis-id="y1">
</ftui-chart-data>
<ftui-chart-controls units="24h, 12h, 6h" color="warning"></ftui-chart-controls>
</ftui-chart>
ok. es wird in den ftui-chart-controls nur:
units="day, week, 24h, 30d, month, year, hour"
unterstützt, alles andere bringt den Fehler...
LG
Zitat von: mr_petz am 28 Januar 2023, 15:54:41
ok. es wird in den ftui-chart-controls nur:
units="day, week, 24h, 30d, month, year, hour"
unterstützt, alles andere bringt den Fehler...
LG
Oh, schade, läßt sich das irgendwo erweitern?
Zitat von: Eisix am 26 Januar 2023, 11:05:16
gibt es beim Chart die Möglichkeit Werte einen Tag zu verschieben wie in FTUI2.
Bsp.: ElectricalCalculator Reading EnergyDayLast wird um 24 Uhr gesetzt und zeigt den Energieverbrauch vom vorherigen Tag an wird aber in Chart natürlich am heutigen Tag angezeigt. Also immer einen Tag später.
Eine derartige Möglichkeit wird bereits von logProxy bereitgestellt ... FHEM stellt somit bei Verwendung bereits angepasste Daten zur Verfügung
... https://wiki.fhem.de/wiki/LogProxy#M.C3.B6gliche_.3Coptions.3E (https://wiki.fhem.de/wiki/LogProxy#M.C3.B6gliche_.3Coptions.3E)
Zitatoffset=<wert> ... Verschiebt den Plot um <wert> Sekunden (oder um <wert> Monate wenn <wert> mit einem m endet)
U.a. könnte man noch die folgende Möglichkeit anwenden:
Zitatpredict[=<wert>] ... Verlängert den letzten Wert eines Plots bis zum Ende des Plots oder um <wert> Sekunden aber maximal bis zum aktuellen Zeitpunkt.
s. Screenshot ... der am jeweiligen Ende des Vortages "einmalig" festgehaltene Wert für den Vortag wird "korrekt" dargestellt ...
Ich versuche mich gerade in das neue FTUI 3 einzuarbeiten und bin jetzt über das Chart Widget gestolpert und habe dazu jetzt eine Frage.
Ich habe im FTUI 2 mit Charts mehrere Balken pro Tag nebeneinander angezeigt. Dies ging glaube über "data-ptype". Das würde ich jetzt gern im neuen umsetzen, habe dazu aber nichts gefunden.
Aktuell liegen die Balken alle übereinander.
die Optionen "stacked" und "grouped" habe ich getestet, leider ohne Erfolg
<ftui-grid-tile row="1" col="1" height="2" width="3">
<header>6am-8pm</header>
<ftui-chart title="Photovoltaikanlage" y-label="KWh" y-min="0" y-max="20" unit="month">
<ftui-chart-data background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_1a_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_1b_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="rgba(75,192,10,0.2)" color="rgba(75,192,0,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_2_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="#d6305650" color="#d63056" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_3_Gestern_kWh"></ftui-chart-data>
<ftui-chart-controls units="year, week, month"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
Könnte mir jemand dazu einen Tipp geben?
Gruß Knallkopp_02
Hi Knallkopp_02.
Teste mal so mit stacked-x:
<ftui-grid-tile row="1" col="1" height="2" width="3">
<header>6am-8pm</header>
<ftui-chart title="Photovoltaikanlage" y-label="KWh" y-min="0" y-max="20" unit="month" stacked-x>
<ftui-chart-data background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_1a_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_1b_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="rgba(75,192,10,0.2)" color="rgba(75,192,0,1)" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_2_Gestern_kWh"></ftui-chart-data>
<ftui-chart-data background-color="#d6305650" color="#d63056" type="bar" log="DBLogging" spec="Mastervolt_Wechselrichter:WR_3_Gestern_kWh"></ftui-chart-data>
<ftui-chart-controls units="year, week, month"></ftui-chart-controls>
</ftui-chart>
</ftui-grid-tile>
oder mit stacked-y oder stacked-y1 im <ftui-chart>
LG
Ist zar nicht ganz das was ich gesucht habe, aber ich werde nochmal weiter testen,
das war schon mal ein guter Denkanstoß
Danke
Hallo,
besteht eigentlich die Möglichkeit die charts auch für die InfluxDB Datenbank verfügbar zu machen, habe vor 2 Jahren umgestellt von dblog auf die influxdb. Wäre natürlich toll wenn das auch ginge.
Gruß
Markus
Zitat von: meier81 am 16 Februar 2023, 15:49:26
besteht eigentlich die Möglichkeit die charts auch für die InfluxDB Datenbank verfügbar zu machen, habe vor 2 Jahren umgestellt von dblog auf die influxdb. Wäre natürlich toll wenn das auch ginge.
Laut Wiki zum InfluxDBLogger werden Auswertungen via SVG u.ä. nicht unterstützt, daher eher unwahrscheinlich ...
Zitat
Ein Interface oder eine Möglichkeit, die Daten mittels SVG-Plots darzustellen ist derzeit nicht vorhanden.
Ich bins nochmal und habe noch ein Frage.
Gibt es eine Möglichkeit die Anzeige des Balkens um eine bestimmte Zeit zu verschieben im Chart selber.
Folgendes Problem stellt sich.
Ich lasse um kurz nach 0 Uhr Werte schreiben, da dort der Tag vorbei ist und alle Werte berechnet sind die ich brauche.
In der Anzeige wird nun logischerweise die Balkenmitte auf dem Tageswechsel angezeigt. Kann ich die Anzeige irgendwie um 12h auf den Mittag des Vortages verschieben damit der Balken für den Tag gilt und nicht für "2"?
Lieben Gruß und ein schönes Wochenende euch allen.
Hallo Knallkopp,
ja mit lp. Allerdings ist mir da gerade ein Problem aufgefallen wenn man zwei hat. Wenn ich sie gleichzeitig anzeigen will sieht man nichts. Blende ich einen aus wird der andere gezeigt und umgekehrt. Ist der eine ftui-chart-data ein normales dblog dann funktioniert es korrekt.
<ftui-chart title="Stromverbrauch kWh" unit="month" y-min="0">
<ftui-chart-data label="PV kWh Tag" type="bar" color="yellow" log="lp" spec="DbLog:logdb,offset=-60*60*24:SUN_2000_Ertrag:Schalter_SUN_2000_ENERGY_Total_EnergyDayLast"></ftui-chart-data>
<ftui-chart-data label="kWh Tag" type="bar" color="#ff0000" log="lp" spec="DbLog:logdb,offset=-60*60*24:ShellyEM3_Zaehler:ShellyEM3_Zaehlerstand_EnergyDayLast"></ftui-chart-data>
<ftui-chart-controls units="month, year"></ftui-chart-controls>
</ftui-chart>
Gruß
Eisix
Stehe vor folgendem Problem:
ich würde gerne einen Plot erstellen, welcher eine horizontale Linie aus einer Variable des FHEM Devices macht.
Variable
EVU_Tibber:fc0_avg
Aufruf
ConstY:????
Habe nun herausgefunden, wie ich es als Plot löse:
Link (https://forum.fhem.de/index.php?topic=132946.0)
Bekomme es aber nicht in die Definition von FTUI3:
<ftui-chart-data
point-radius="1" color="red" fill="false"
fill log="myLogProxy" spec="ConstY:(ReadingsVal("EVU_Tibber","fc0_avg","0")/100)" [update]="TeslaSkipFull:Update:Time">
</ftui-chart-data>
Funktioniert nicht, wie müsste den die Deklaration aussehen für ConstY & lokale Variable in FTUI3? Vielen lieben Dank :-)
Und dann habe ich noch zwei Fragen zu update / color, bei Anzeige als bars, gibt es die Möglichkeit, die Farbe der Balken, nach dem Inhalt zu skalieren?
Also z.B. color="step('0: danger, 7: warning, 20: success')"
Kann man das Update auch bei bsp:
<ftui-chart-data
point-radius="2" color="blue" fill="false"
fill log="myLogProxy" spec="ConstX:TimeNow(),0,1" [update]="TeslaSkipFull:Update" y-axis-id="y1">
</ftui-chart-data>trigger? Mit der Definition hier findet keine Aktualisierung statt. (Gibt es ein ForeReload o.ä. nur für das Chart)
Vielen lieben Dank :-)
Hallo Eisix,
ich kann zumindest bestätigen, dass wenn man den Offset setzt nichts angezeigt bekommt.
was hat das mit dem lp aufsich? ist das ein anderes logging?
Gruß Knallkopp_02
Hallo zusammen,
ich habe auch ein Problem, bei dem ich nicht weiß, ob das so ist oder ich etwas falsch konfiguriere.
Wenn ich in einen Balkendiagramm 2 Graphen anzeigen lasse. Die Balken werden schmaler, aber dann übereinander dargestellt.
<ftui-chart width="90%" height="300px" unit="day" type="bar" y-label="Stromeinspeisung in Wh" x-min="0" x-max="24" y-min="1" y1-min="1" y-max="600" y1-max="600">
<ftui-chart-data type="bar" fill label="Stromertrag pro Stunde" log="myDbLog" file="history" [update]="{{consumption}}:consumption:time" spec="{{consumption}}:consumption::delta-h:$val=($val/1)"></ftui-chart-data>
<ftui-chart-data type="bar" fill color="red" label="Stromeinspeisung pro Stunde" log="myDbLog" file="history" spec="Stromzaehler:total_feed::delta-h:$val=($val/1)"></ftui-chart-data>
<ftui-chart-controls units="day"></ftui-chart-controls>
</ftui-chart>
Danke
Joachimplot.PNG
Hi,
erstaml grossen Dank an alle die FTUI V3 entwicklen, wesentlich schneller und einfacher als die erste Version.
Ich hab noch ein Problem mit Charts. Ich versuche die Regenvorhersage der ersten Version nachzubauen
(https://wiki.fhem.de/wiki/FTUI_Widget_Chart#7-Tage-Wettervorhersage_mit_Proplanta)
Aktuell kann ich meines wissens nur den Typ day, week, month oder 30d auswaehlen.
Wobei 30d "rollender Monat sein sollte also immer heute beginnt und 30 Tage in die Zukunft blickt.
Kann man auch irgendwie 7d oder 5d bauen.
Aktuell in der alten Version lasse ich mir die Regenwarscheinichkeit im Chart ueber 5 Tage darstellen.
Danke schon mal fuer eure Hilfe
Zitat von: Knallkopp_02 am 02 April 2023, 12:56:55Hallo Eisix,
ich kann zumindest bestätigen, dass wenn man den Offset setzt nichts angezeigt bekommt.
was hat das mit dem lp aufsich? ist das ein anderes logging?
Gruß Knallkopp_02
Hallo,
Das mit dem Offset sollte eigentlich nur mit lp (https://wiki.fhem.de/wiki/LogProxy#M.C3.B6gliche_.3Coptions.3E) funktionieren.
Für mich sieht es so aus als wenn die beiden lp's sich gegenseitig überschreiben. Haben beide den gleichen Zeitstempel. Da scheint eine Bedingung zu fehlen die das ganze nebeneinander packt.
Eigentlich wollte ich die beiden Bars stapeln(stacked) aber das habe ich auch noch nicht zum laufen gekriegt.
Gibt es jemanden mit einem funktionierenden Beispiel?
Gruß
Eisix
DBLOG nutze ich ja, kannte den Begriff LP nicht.
dasmit dem Offset wenn ich nur 1 Wert habe kann ich auch bestätigen, dass es läuft.
Nur gestapelt macht er keinen Offset, auch wenn alle Werte damit angegeben sind und auch den gleichen Zeitstempel haben. bei mir ist es 23:59:59, die ich alle um 12h nach vorn verschieben möchte.
Gruß Knallkopp_02 und noch einen schönen Ostermontag an alle
Zitat von: Heiner am 07 April 2023, 10:20:48Hi,
erstaml grossen Dank an alle die FTUI V3 entwicklen, wesentlich schneller und einfacher als die erste Version.
Ich hab noch ein Problem mit Charts. Ich versuche die Regenvorhersage der ersten Version nachzubauen
(https://wiki.fhem.de/wiki/FTUI_Widget_Chart#7-Tage-Wettervorhersage_mit_Proplanta)
Aktuell kann ich meines wissens nur den Typ day, week, month oder 30d auswaehlen.
Wobei 30d "rollender Monat sein sollte also immer heute beginnt und 30 Tage in die Zukunft blickt.
Kann man auch irgendwie 7d oder 5d bauen.
Aktuell in der alten Version lasse ich mir die Regenwarscheinichkeit im Chart ueber 5 Tage darstellen.
Danke schon mal fuer eure Hilfe
Hallo Zusammen,
da würde ich mich gerne anschliessen wollen. Ich habe zwar die alten Charts in der 3er Oberfläche einbauen können, sehe das jedoch nicht als zielführend an.
Gibt es bereits Ansätze, dies über das alte Setup auf die 3er Version umzubauen? Der LogProxy wird doch über die Subroutine entsprechend geschrieben. Wie müsste dies dann im 3er aussehen?
Hier meine 2er Version:
Der FHEM Subroutine Code:
#######################################################################################
## Proplanta Wetterauswertung
sub
logProxy_proplanta2Plot($$$$;$$) {
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;
my $regex;
my @rl;
return undef if(!$device);
if($fcValue =~ s/_$//) {
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";
} else {
$regex = "^fc[\\d]+_".$fcValue."\$";
}
$fcHour = 12 if(!defined $fcHour);
$expMode = "point" if(!defined $expMode);
if( defined($defs{$device}) ) {
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {
@rl = sort{
my ($an) = ($a =~ m/fc(\d+)_.*/);
my ($bn) = ($b =~ m/fc(\d+)_.*/);
$an <=> $bn or $a cmp $b;
} ( grep /${regex}/,keys %{$defs{$device}{READINGS}} );
return undef if( !@rl );
} else {
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";
return undef;
}
}
my $fromsec = SVG_time_to_sec($from);
my $tosec = SVG_time_to_sec($to);
my $sec = $fromsec;
my ($h,$fcDay,$mday,$mon,$year);
my $timestamp;
my $reading;
my $value;
my $prev_value;
my $min = 999999;
my $max = -999999;
my $ret = "";
# while not end of plot range reached
while(($sec < $tosec) && @rl) {
#remember previous value for start of plot range
$prev_value = $value;
$reading = shift @rl;
($fcDay) = $reading =~ m/^fc(\d+).*/;
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;
$value = ReadingsVal($device,$reading,undef);
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);
$sec = SVG_time_to_sec($timestamp);
# skip all values before start of plot range
next if( SVG_time_to_sec($timestamp) < $fromsec );
# add first value at start of plot range
if( !$ret && $prev_value ) {
$min = $prev_value if( $prev_value < $min );
$max = $prev_value if( $prev_value > $max );
$ret .= "$from $prev_value\n";
}
# done if after end of plot range
last if($sec > $tosec);
$min = $value if( $value < $min );
$max = $value if( $value > $max );
# add actual controll point
$ret .= "$timestamp $value\n";
# Log 1, "$timestamp $value -0- $reading";
}
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);
if(SVG_time_to_sec($timestamp) < $tosec) {
$ret .= "$timestamp $value\n";
} else {
$ret .= "$to $value\n";
}
} elsif(($sec > $tosec) && ($expMode eq "day")) {
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;
$ret .= "$to $value\n";
}
return ($ret,$min,$max,$prev_value);
}Und die beiden Charts, die ich mit der 2er Oberfläche erfolgreich laufen haben:
<ftui-view-item width="100%" margin="0 0 0 0" target="view1Wetter">
<ftui-column>
<ftui-label class="size-2" text="Vorhersage Temperatur"></ftui-label>
<div data-type="chart" data-device="Wetter" data-get="state" data-logdevice='["myLogProxy"]' data-columnspec='["Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)"]'
data-style='["ftui l0"]'
data-ptype='["quadraticSmooth"]'
data-uaxis='["primary"]'
data-legend='["Temperatur"]'
data-yunit=" °C" data-ytext="Temperatur" data-y_margin="16"
data-minvalue="auto" data-maxvalue="auto"
data-daysago_start = "0" data-daysago_end = "-2" data-timeformat="ee\LF\hh"
data-xticks="480" data-showlegend="false" data-width="100%" data-height="125px" class="nobuttons fullsize">
</div>
<ftui-label class="size-2" text="Vorhersage Wolken und Regen"></ftui-label>
<div data-type="chart" data-device="Wetter" data-logdevice='["myLogProxy","myLogProxy","myLogProxy"]' data-columnspec='["Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)", "Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)", "Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"]'
data-style='["ftui l6fill","ftui l5fill","ftui l1fill"]'
data-ptype='["quadraticSmooth","quadraticSmooth","quadraticSmooth"]'
data-uaxis='["primary","secondary","secondary"]'
data-legend='["Regen","Regenwahrscheinlichkeit","Wolken"]'
data-yunit=" mm" data-ytext="" data-yunit_sec=" %" data-ytext_sec="Regen / Wolken"
data-minvalue="0" data-maxvalue="6" data-minvalue_sec="0" data-maxvalue_sec="100"
data-daysago_start="0" data-daysago_end="-2" data-timeformat="ee\LF\hh"
data-xticks="480" data-showlegend="false" data-width="100%" data-height="125px" class="nobuttons fullsize">
</div>
</ftui-column>
</ftui-view-item>
Dass das \\x22 durch ein einfaches Anführungszeichen ersetzt werden muss, habe ich bereits herausgefunden. Aber dann???
Vielen Dank für Eure Mitarbeit.
ZitatDass das \\x22 durch ein einfaches Anführungszeichen ersetzt werden muss, habe ich bereits herausgefunden. Aber dann???
Vielen Dank für Eure Mitarbeit.
Hi, aendere noch den Typ von "quadraticSmooth" auf "line" dann sollte es klappen.
Ist halt weniger schoen geht aber. Weniger gut ist aber das mann keine rollenden 5 Tage oder so hinbekommt. auf dr einen seite gibts das als "30d" aber leider halt nicht flexibler.
Hallo Heiner,
vielen Dank für den Tipp. Nach ein paar Tests, bleibe ich dann doch vorerst bei der 2er Version. Die gefällt mir optisch besser und die tagesgenaue Beschränkung ist mir wichtig.
Vielleicht tut sich in dem Bereich ja noch was bei den 3er Charts. Das Thema kam nun schon öfters hoch.
Beste Grüße
Andreas
Hi, ich habe ein kleines Problem mit den Charts. Ich habe ein Chart das den PV Ertrag und den Verbrauch anzeigt. Die Anzeige passt soweit. Allerdings ist mir ein kleines Problem aufgefallen: Wenn ich auf einen der Charts klicke werden nicht die passenden Datenpunkte auf den Charts angezeigt. Also wenn ich bei PV Ertrag auf 8:00 Uhr klicke wird mir der richtige PV Ertragswert angezeigt, aber der Datenpunkt bei Verbrauch (in rot) von ca. 2:00 Uhr. Umgekehrt ist es ähnlich, wenn ich auf den Verbrauch von 2:00 Uhr klicke wird der PV Ertrag von 8:00 Uhr angezeigt.
Als Quelle verwende ich ein Filelog. Die Kurven liegen richtig übereinander und die Werte sind im Filelog auch zeitlich zusammen. Ich habe nur das kleine Problem mit dem Anklicken den Datenpunkten. Habt ihr das auch? Wie kann ich das lösen?
Grüße, habe auch mal wieder ein Problem.
Ich möchte Werte der letzten 7 Tage (unit="week") darstellen, welche in 6 verschiedenen FileLog-Dateien abgespeichert sind. Was muss ich für Parameter benutzen, damit diese Dateien gemeinsam zu einer Datenlinie zusammengebaut werden? Aktuell sehe ich nur den Datenbereich des heutigen Tages auf dem Diagramm
edit:
found it:
attr devicename creategluedfile 1
Anderes Problem: Ein Diagramm, bestehend aus 2 Graphen, soll Daten der letzten 30 Tage darstellen. Eine Datenlinie ist parametriert mit "fill", also ein Liniendiagramm, die andere ist parametriert mit type="bar", einer Balkendarstellung. Das funktioniert soweit. Code hier:
<ftui-chart unit="30d">
<ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:SMATripower6.PVErtragDay" label="Ertrag" [update]="SMATripower6:PVErtragDay:time"
type="bar" background-color="#ffcc0050" color="#ffcc00"></ftui-chart-data>
<ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:HomeManager.PVEinspeisungDayNew" label="Einspeisung" [update]="HomeManager:PVEinspeisungDayNew:time"
fill background-color="#00cc3350" color="#00cc33"></ftui-chart-data>
</ftui-chart>
Wenn ich jedoch die Linien ebenfalls als Balken darstellen möchte, wird gar nichts mehr angezeigt. Mein Wunsch wäre eigentlich eine Darstellung zweier Balken pro Tag.
Was mache ich falsch?
Guten Morgen zusammen,
nachdem ich am Wochenende, abgesehen von obiger offener Frage, eine hübsche neue FTUI3-Seite gebastelt hatte, musste ich heute morgen ernüchtert folgendes Problem feststellen:
<ftui-chart unit="week">stellt fein die letzten 6-7 Tage dar, bis der Kalender von Sonntag auf Montag (heute!) wechselt. Denn heute morgen ist mein Chart komplett leer und beginnt gerade wieder sich langsam mit Daten zu füllen. Eigentlich wollte ich die "letzten 7 Tage" dargestellt sehen, analog von unit="30d" wo relativ zum Kalendertag immer die letzten 30 Datenpunkte dargestellt werden.
Gibt es hierfür Abhilfe irgendwie?
Moin zusammen,
ungewohnt still hier im TabletUI Bereich, gibts Euch freundliche Experten noch @mr_petz & Co ? ;D
Bin weiter an obiger Frage dran und versuche Lösungen/Workarounds für mich zu finden, aber komme nicht weiter.
Bestünde die Option, "unit=30d" zu nutzen und dafür dann die Darstellungszeiträume auf der X-Achse zu beschränken? start-date und end-date habe ich in vielen Kombinationen erfolglos ausprobiert...
Lösung: chart.component.js wie folgt leicht modifizieren:
Suchen:
if (this.controlsElement) {
this.controlsElement.addEventListener('ftuiForward', () => this.offset += 1);
this.controlsElement.addEventListener('ftuiBackward', () => this.offset -= 1);
['hour', 'day', 'week', 'month', 'year', '24h', '30d'].forEach(unit => {
this.controlsElement.addEventListener('ftuiUnit' + unit, () => this.unit = unit);
});
ersetzen mit:
if (this.controlsElement) {
this.controlsElement.addEventListener('ftuiForward', () => this.offset += 1);
this.controlsElement.addEventListener('ftuiBackward', () => this.offset -= 1);
['hour', 'day', 'week', 'month', 'year', '24h', '30d', '5d'].forEach(unit => {
this.controlsElement.addEventListener('ftuiUnit' + unit, () => this.unit = unit);
});
und suchen:
case '30d':
date = new Date(ts + (offset * 30 * DAY - 30 * DAY));
break;
}
ersetzen mit:
case '30d':
date = new Date(ts + (offset * 30 * DAY - 30 * DAY));
break;
case '5d':
date = new Date(ts + (offset * 5 * DAY - 5 * DAY));
break;
}
Zitat von: Dracolein am 06 Mai 2023, 13:04:32Anderes Problem: Ein Diagramm, bestehend aus 2 Graphen, soll Daten der letzten 30 Tage darstellen. Eine Datenlinie ist parametriert mit "fill", also ein Liniendiagramm, die andere ist parametriert mit type="bar", einer Balkendarstellung. Das funktioniert soweit. Code hier:
<ftui-chart unit="30d">
<ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:SMATripower6.PVErtragDay" label="Ertrag" [update]="SMATripower6:PVErtragDay:time"
type="bar" background-color="#ffcc0050" color="#ffcc00"></ftui-chart-data>
<ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:HomeManager.PVEinspeisungDayNew" label="Einspeisung" [update]="HomeManager:PVEinspeisungDayNew:time"
fill background-color="#00cc3350" color="#00cc33"></ftui-chart-data>
</ftui-chart>
Wenn ich jedoch die Linien ebenfalls als Balken darstellen möchte, wird gar nichts mehr angezeigt. Mein Wunsch wäre eigentlich eine Darstellung zweier Balken pro Tag.
Was mache ich falsch?
Hierbei könnte ich weiterhin Hilfe brauchen, ich finde weder einen Fehler, noch eine Lösung. Auf Github gibts sogar ein Diagramm mit 2 Bar-Charts als Musterbeispiel...
Ich habe alles durchprobiert; ohne Erfolg. Habe "y-axis-id=y" mit/ohne "y-axis-id=y1" als zusätzlichen Parameter ausprobiert, habe diverse weitere Parameter weggelassen, um den Fokus auf type="bar" zu setzen.... nichts zu machen.
Jede Datenlinie einzeln als Balkendiagramm wird fein dargestellt. Ergo sind die Definitionen korrekt. Beide gemeinsam in einem Diagramm kriege ich einfach nicht hin kopfkratz
Für alle die bei 2 Bars (Wird bei 2 Bars per flex automatisch gesetzt) eine größere Breite haben wollen nach Zeile 357 in der chart.component.js das einfügen:
this.configuration.data.datasets[dataElement.index].barThickness = 10;
barThickness = Breite in px
Hier die Doku:
https://www.chartjs.org/docs/2.9.4/charts/bar.html#barthickness
Im Anhang ein Besispiel. Wird dann halt überlappt...
LG mr_petz
Edit:
Ist so nicht updatesicher!
@Draco
Bei mir im test funzen 2 Bars.
Hier auch:
https://forum.fhem.de/index.php?topic=117779.msg1271298#msg1271298
Du hast meinen Codeschnipsel zum Test verwendet?
Oder ist bei mir ein Fehler drin?
Ich habs im Chromium aufm Raspi sowie unter Firefox auf ner Windowskiste ausprobiert. Nirgendwo werden mir 2 Bars dargestellt.
@Dracolein
Hatte jetzt erst wieder Zeit. Sorry.
Ich habe nochmal mit gleichen settings getestet.
30d
background-color="#00cc3350" color="#00cc33" type="bar" fill label="Ertrag"
background-color="#ffcc0050" color="#ffcc00" type="bar" fill label="Einspeisung"
und ohne controls.
Es werden 2 Bars angezeigt wenn du das wie oben erwähnt einfügst Bsp.:
this.configuration.data.datasets[dataElement.index].barThickness = 10;https://forum.fhem.de/index.php?topic=117779.msg1275588#msg1275588
Breite musst du halt testen.
Wenn ich das nicht drin habe, dann werden mir auch keine Bars angezeigt. Warum? Durch das flex im barThickness denke ich.
Scheint sich bei 30d extrem auszuwirken...
LG mr_petz
Ne keine Chance bei mir. Auch nicht, wenn ich "30d" beispielsweise durch "week" ersetzen, um bei gleicher Diagrammbreite weniger Balken zu haben. Egal, wie ich es drehe, ich sehe maximal eine Datenreihe als Balkendiagramm.
Das gilt auch für andere FTUI3 Seiten mit anderen Datenreihen.
Seis drum, ich finde mich mit einer Niederlage ab ;D
Moin,
ich bekomme eine Sache bei FTUI3 nicht umgesetzt, und ich weiß nicht warum.
In den Logs zu Chart 3 (Pool_Solar_Stellmotor) habe ich keine Werte, sondern "on" und "off":
2023-06-09_17:46:13 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-09_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_13:09:26 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
Darum benutze ich in FTUI2 die folgenden Zeilen, die ich dank des Forums so zum laufen bekommen hatte:
data-columnspec='["3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[2]=~\\x22on\\x22?0:1"Dies machte aus den "on/off" eine "1/0" und ich konnte prima den Status des Stellmotors anzeogen lassen (siehe Screenshot aus FTUI2).
Nun funktioniert aber genau das in FTUI3 nicht.
Hat jemand eine Idee?
Vielen Dank. :)
<ftui-chart y-label="Temperaturen" y1-label="Solar" y-unit="°C" unit="week">
<ftui-chart-data fill line label="Pooltemperatur" color="blue" log="Log_Temp_Pool" spec="4:ext_temperature_1"
y-axis-id="y"></ftui-chart-data>
<ftui-chart-data line label="Außentemperatur" color="danger" log="Log_Temp_Aussentemperatur" spec="4:ext_temperature_0"
y-axis-id="y"></ftui-chart-data>
<ftui-chart-data line label="Solar aktiv" color="warning" log="Pool_Solar_Stellmotor" spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[2]=~\\x22on\\x22?0:1"
y-axis-id="y1"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>
Hallo,
das sollte genau das machen was du suchst aber mit logdb.
<ftui-chart-data [update]="HK_VR:actorState:time" label="Heizung" fill stepped fill color="white" log="logdb" file="-" spec="HK_VR:actorState:0::$val=($val=~'on'?1:0)"></ftui-chart-data>
Gruß
Eisix
Du mußt den Anfang der spec leicht umbauen, so in der Art denke ich.Eventuell ein ":" zu viel.
spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$val=($val=~'on'?1:0)"
Du warst zu schnell. :) Bin da selbst drauf gekommen, weil ich erst gepostet und dann nachgedacht hatte. :)
Danke! Ich habe nun eine gelbe Linie.
Was mir nur wundert: diese ist dauerhaft auf 0
Laut den Logs hat der Status aber mehrfach gewechselt. In FTUI2 wird es auch nach wie vor richtig angezeigt.
2023-06-09_17:46:13 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-09_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_13:09:26 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_13:15:31 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_14:22:04 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_14:22:38 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_14:24:57 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_14:27:55 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_15:03:21 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_15:06:33 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
Experimentier mal mit den Feldern also mal ein ":" weglassen.
spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01:$val=($val=~'on'?1:0)"
Jetzt ist die gelbe Linie komplett weg.
Somit waren die zwei "::" korrekt. Der String on wird nicht erkannt und somit auf default 0 gesetzt. Wir sind nah an der Lösung.
Ich stelle die funktionierende FTUI2 Zeile und die nicht nichtig funktionierenden FTUI3 Zeile untereinander:
HMW_IO_12_Sw14_DR_NEQ0308160_01::$val=($val=~'on'?1:0)"
HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[2]=~\\x22on\\x22?0:1"
Ich muss aber zugeben, dass dies nicht grad mein Fachgebiet ist :o
schon mal so probiert?
HMW_IO_12_Sw14_DR_NEQ0308160_01::$val=($val=~\\x22on\\x22?1:0)"
Ist auch nicht mein Fachgebiet :))
Hatte ich auch schon probiert :o ;D
Ich hoffe das jemand über den Post stolpert, der weiß wie man es löst. Aber vielen Dank für deine Hilfe! :)
Noch eine Frage:
Welche Werte sind denn für unit="xxx" möglich?
Bei github steht nur das Default (day), nicht aber welche Werte alle möglich sind.
Habe ich das überlesen?
@M.Piet
Es sollte wie bei:
units="day, week, 24h, 30d, month, year, hour"
auch bei unit gehen.
LG
Hallo,
ich experimentiere schon eine Weile mit ftui3, ziemlich cool :)
Aber ich verstehe einen Punkt bei den charts, genauer bei "spec=..." nicht. Kann es sein, dass der Name des Readings nicht "exakt" genommen wird sondern im Sinne von "enthält"?
Folgende Situation:
Mein Log enthält Daten der Form
2023-06-01_00:02:41 Delock01 ENERGY_Power: 0
2023-06-01_00:02:41 Delock01 ENERGY_Power_max_day: 622.0
Im Chart will ich "ENERGY_Power" über den Tagesverlauf darstellen (Solarertrag Balkonkraftwerk ;) ).
Die spec in der chart-data sieht so aus:
<ftui-chart class="row" width="300px" height="200px" unit="day">
<ftui-chart-data
fill
log="FileLog_Delock01"
spec="4:Delock01.ENERGY_Power::"
[update]="Delock01:state:time">
</ftui-chart-data>
Leider werden für das chart nicht nur die Werte für "ENERGY_Power" genommen, sondern alle die mit "ENERGY_Power" beginnen - also sehe ich im chart auch die Werte für "ENERGY_Power_max_day".
Was mache ich falsch?
(Sorry wenns schon irgendwoe steht, ich habs nirgends gefunden...)
Danke Euch!
Hi @hapege.
Könntest mal die 2 letzten Doppelpunkte im spec raus nehmen und testen.
LG
Hi,
Habe ich schon probiert, ändert nix :(
Ok.
Vielleicht hilft dir das weiter:
https://forum.fhem.de/index.php?topic=117779.msg1214814#msg1214814
Vielleicht eine Leerstelle nach Delock01.ENERGY_Power einfügen?
LG
Ich habe auch das Problem dass ich bei einem Säulendiagramm die Säulen nebeneinander dargestellt haben möchte und habe auch schon eine Lösung gefunden: Man muss bei den einzelnen charts (also im ftui-chart-data) unterschiedliche stacks festlegen. So sieht das bei mir aus:
<ftui-chart title="Tageserträge" y-unit=" kWh" unit="30d" stacked-x>
<ftui-chart-data type="bar" fill log="gl.fl.Strom" spec="4:gl.dl.Strom.Tagesertrag"
[update]="gl.dl.Strom:Tagesertrag" stack="stack1"></ftui-chart-data>
<ftui-chart-data type="bar" fill log="gl.fl.Strom" spec="4:gl.dl.Strom.Netzbezug"
[update]="gl.dl.Strom:Netzbezug" color="red" stack="stack2"></ftui-chart-data>
<ftui-chart-data type="bar" fill log="gl.fl.Strom" spec="4:gl.dl.Strom.Einspeisung"
[update]="gl.dl.Strom:Einspeisung"></ftui-chart-data>
<ftui-chart-controls units="day,week,30d, year" color="white" stack="stack3"></ftui-chart-controls>
</ftui-chart>
Allerdings habe ich hier auch das gleiche Problem (wie bei den Liniencharts auch) dass die Zuordnung vom Datum nicht passt. Beim Mouse Hover passen die Werte nicht zu den Säulenhöhen.
Ich muss mir selbst antworten. Offensichtlich hat chart.js beim Tooltip (also dieser Hover Frame mit den Werten) ein Problem wenn bei den Datensätzen etwas durcheinander ist. Die Chart Darstellung läuft und die Charts der unterschiedlichen Datenreihen stehen aufeinander. Aber die genau Wertdarstellung läuft nicht. Man kann das aber ändern, steht hier beschrieben: https://www.chartjs.org/docs/latest/configuration/interactions.html#modes
Ich habe jetzt mal direkt im chart.component.js geändert und diese Zeilen vor "scales"eingefügt:
interaction: {
mode: 'nearest'
},
Mit dem mode nearest wird nur der Wert des gehoverten charts angezeigt und nicht mehr die anderen Werte. Zumindest sehe ich so genau den Wert an dem ich mit dem Cursor über den Chart fahre. Ich suche nur ein Möglichkeit, dies direkt im HTML zu machen, damit ich chart.component.js so lassen kann und update-sicher bin. Wenn einer eine Idee hat wie das geht bitte melden. Ansonsten suche ich jetzt mal weiter.
@hapege
probier mal so
spec="4:Delock01:ENERGY_Power"
Gruß
Eisix
Zitat von: teichtaucher am 26 Juni 2023, 10:24:34Ich muss mir selbst antworten. Offensichtlich hat chart.js beim Tooltip (also dieser Hover Frame mit den Werten) ein Problem wenn bei den Datensätzen etwas durcheinander ist. Die Chart Darstellung läuft und die Charts der unterschiedlichen Datenreihen stehen aufeinander. Aber die genau Wertdarstellung läuft nicht. Man kann das aber ändern, steht hier beschrieben: https://www.chartjs.org/docs/latest/configuration/interactions.html#modes
Ich habe jetzt mal direkt im chart.component.js geändert und diese Zeilen vor "scales"eingefügt:
interaction: {
mode: 'nearest'
},
Mit dem mode nearest wird nur der Wert des gehoverten charts angezeigt und nicht mehr die anderen Werte. Zumindest sehe ich so genau den Wert an dem ich mit dem Cursor über den Chart fahre. Ich suche nur ein Möglichkeit, dies direkt im HTML zu machen, damit ich chart.component.js so lassen kann und update-sicher bin. Wenn einer eine Idee hat wie das geht bitte melden. Ansonsten suche ich jetzt mal weiter.
Hinweis.
Die aktuell benutzte Version ist die v3.0.2
Also wäre das der richtige Verweis:
https://www.chartjs.org/docs/3.0.2/configuration/interactions.html#modes
LG
@hapege
Zitat von: hapege am 25 Juni 2023, 10:07:50...
Aber ich verstehe einen Punkt bei den charts, genauer bei "spec=..." nicht. Kann es sein, dass der Name des Readings nicht "exakt" genommen wird sondern im Sinne von "enthält"?
...
Habe es mal nachgestellt und du hast Recht mit deiner Vermutung.
Da es ein regexp Ausdruck ist, funktioniert das im spec:
spec="4:Delock01.ENERGY_Power\b"
Mit \b sagt man Ende des Wortes. Ansonsten nimmt er alles was in deinem Beispiel -> ENERGY_Power beinhaltet..
LG mr_petz
Edit:
Info von @setstate zu spec:
Zitat von: setstate am 01 Dezember 2021, 12:15:18Diese Funktion bietet FHEM beim Log-abrufen out of the box.
die Spec-Angabe ist so aufgebaut: Column:Regexp:DefaultValue:Function
log="FileLog_WCLuefter" spec="4:WCLuefter.status-get:0:$fld[3]=~'on'?1:0"...
Zitat von: M.Piet am 12 Juni 2023, 15:25:33Hatte ich auch schon probiert :o ;D
Ich hoffe das jemand über den Post stolpert, der weiß wie man es löst. Aber vielen Dank für deine Hilfe! :)
Gerade nachgestellt und getestet. Es läuft bei mir so:
HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[3]=~'on'?1:0"
Zitat von: OdfFhem am 02 Dezember 2021, 19:19:59@Eisix
$fld[3] heißt in dem Fall lt. Wiki $val
LG
Zitat von: mr_petz am 27 Juni 2023, 14:50:07Gerade nachgestellt und getestet. Es läuft bei mir so:
Hey :)
Grad wollte ich posten wie ich es gelöst habe.
Hintenrum...durch die Brust ins Auge. Aber danke für deine Anregung!
Ein Notify setzt einen Dummy auf 1 wenn Solar an geht. Ein anderes Notify setzt den gleichen Dummy auf 0, wenn Solar aus geht.
Und für den Dummy habe ich ein Filelog erzeugt, was mir diese Daten ausgibt:
2023-06-29_14:46:30 DummyLogSolar 0
2023-06-29_14:47:56 DummyLogSolar 1Es gibt nur eins, was mich wundert. Ich habe den Chart als "bar" eingerichtet. Dann würde ich auch ausschließlich senkrechte "Bars" erwarten. In FTUI 2 hatte ich das "data-ptype='["fsteps"]' erreicht.
Ich bekomme (wie im Screenshot zu sehen) schräge Linien. Gibt es denn die Möglichkeit, nur Stufen zu bekommen?
<ftui-chart-data fill bar label="Solar aktiv" color="warning" log="FileLog_Pool_Solar_Status" spec="3" y-axis-id="y1"></ftui-chart-data>
Zitat von: M.Piet am 29 Juni 2023, 15:21:43Zitat von: mr_petz am 27 Juni 2023, 14:50:07Gerade nachgestellt und getestet. Es läuft bei mir so:
Hey :)
Grad wollte ich posten wie ich es gelöst habe.
Hintenrum...durch die Brust ins Auge. Aber danke für deine Anregung!
...
Hi
Die "Anregung" würde ich gern umgesetzt sehen ob sie funktioniert ;)
LG
Zitat von: mr_petz am 27 Juni 2023, 14:31:32@hapege
Zitat von: hapege am 25 Juni 2023, 10:07:50...
Aber ich verstehe einen Punkt bei den charts, genauer bei "spec=..." nicht. Kann es sein, dass der Name des Readings nicht "exakt" genommen wird sondern im Sinne von "enthält"?
...
Habe es mal nachgestellt und du hast Recht mit deiner Vermutung.
Da es ein regexp Ausdruck ist, funktioniert das im spec:
spec="4:Delock01.ENERGY_Power\b"
Mit \b sagt man Ende des Wortes. Ansonsten nimmt er alles was in deinem Beispiel -> ENERGY_Power beinhaltet..
Super, das wars - Danke Dir!
@M.Piet
Wenn dann type="bar"
Bsp:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/chart.html#L61
LG
Hallo,
ich möchte meinen Reststromverbrauch und meine PV-Erzeugung stacked darstellen was mit dem code hier auch funktioniert aber nur wenn der Timestamp jeden Tag gleich ist. Das passt aber nicht immer, was dazu führt das nichts angezeigt wird.
<ftui-chart title="Stromverbrauch kWh" unit="month" y-min="0" stacked-y>
<ftui-chart-data label="kWh Tag" type="bar" color="#ff0000" log="lp" spec="DbLog:logdb,offset=-60*60*24:ShellyEM3_Zaehler:ShellyEM3_Zaehlerstand_EnergyDayLast"></ftui-chart-data>
<ftui-chart-data label="PV kWh Tag" type="bar" color="yellow" log="lp" spec="DbLog:logdb,offset=-60*60*24:SUN_2000_Ertrag:Schalter_SUN_2000_ENERGY_Total_EnergyDayLast"></ftui-chart-data>
<ftui-chart-controls units="day, month"></ftui-chart-controls>
</ftui-chart>
Ich würde gerne sowas wie eine Toleranz einbauen die mehrere Sekunden abdeckt. Also alle Werte von 0-5 Sekunden kriegen den Wert 0.
OddFhem hatte hier in einem alten post schon mal mit "ts" gearbeitet
<ftui-chart-data
[update]="Gateway:connection:time"
log="logdb"
spec="Gateway:connection:0::$val=((($ts)=~':.8:..$')?8:(($val)=~'active'?4:0))"
Jemand einen Plan wie man sowas macht?
Gruß
Eisix
@Eisix
Du meist bestimmt das:
https://forum.fhem.de/index.php?topic=117779.msg1191097#msg1191097
$ts bringt glaube bei Filelog nichts? Bin ich auch überfragt.
Ich weis nicht ob das auch mit DbLog funzt. Mit Filelog schon:
$fld[0]=~'.*:..:.0|.*:..:.1|.*:..:.2|.*:..:.3|.*:..:.4|.*:..:.5'?0:$fld[3]
hier werden alle Sekunden die auf 0-5 enden, auf 0 gesetzt.
Geht bestimmt auch eleganter/kürzer...
$fld[0]ist hier der timestamp.
$fld[3] ist das value.
LG
Hallo mr_petz,
für dblog ist mir eine Möglichkeit eingefallen. Und zwar verschiebe ich über offset das ganze ja um einen Tag.
spec="DbLog:logdb,offset=-86400:ShellyEM3_Zaehler:ShellyEM3_Zaehlerstand_EnergyDayLast"
wenn ich es jetzt schaffe diesen offset Wert über die Sekunden auszuwählen sollte es funktionieren.
Sowas in der Art. Syntax ist so aber nicht korrekt.
spec="DbLog:logdb,offset=(~'.*:..:.0'?-86400|~'.*:..:.1'?-86401|~'.*:..:.2'?-86402):SUN_2000_Ertrag:Schalter_SUN_2000_ENERGY_Total_EnergyDayLast"
Verschiedene offset Werte habe ich schon getestet und damit wurden auch die mit dem entsprechenden Timestamp angezeigt.
Eine Idee wie das gehen könnte?
Gruß
Eisix
Vll so in der Art?:
$ts=~ '.*:..:.0' ? offset=-86400 : '.*:..:.1' ? offset=-86401 : '.*:..:.2' ? offset=-86402 : 0
? = then
: = else
| = or
alles in Hochkommas = regexp
Ich weis nur nicht wie der $ts aussieht.
OdfFhem hat gerade wenig Zeit zum unterstützen...
LG
Hallo,
wie kriege ich das ganze vom rest getrennt? Mit einfachen ( ) funktioniert es nicht
spec="DbLog:logdb,($ts=~':00:01$' ? offset=-86401 : offset=-86400):ShellyEM3_Zaehler:ShellyEM3_Zaehlerstand_EnergyDayLast"
Gruß
Eisix
Ok. Ich kann es leider nicht testen. Tut mir leid. Ein Versuch habe ich aber noch:
offset=($ts=~':00:01$' ? -86401 : -86400)
Ist vll das selbe, aber versuch macht gluch...
LG
Hallo mr_petz,
Versucht macht Aua. Fhem crasht ;D
Denke aber das ist nah dran.
Wenn ich es so probiere kriege ich zumindest was im Log
offset=(~':00:01$' ? offset=-86401 : offset=-86400)
lp: offset=(~': Can't find string terminator "'" anywhere before EOF at (eval 3509) line 1.
DBD::mysql::st execute failed: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '2023-07-01 00:00:00', '%Y-%m-%d %H:%i:%s') AND TIMESTAMP <= STR_TO_DATE('2023...' at line 6 [for Statement "SELECT
DATE_FORMAT(TIMESTAMP, '%Y-%m-%d %H:%i:%s'),
DEVICE,
READING,
VALUE
FROM history WHERE 1=1 AND DEVICE = '00' AND READING = '01$'' AND TIMESTAMP >= STR_TO_DATE('2023-07-01 00:00:00', '%Y-%m-%d %H:%i:%s') AND TIMESTAMP <= STR_TO_DATE('2023-08-01 00:00:00', '%Y-%m-%d %H:%i:%s') ORDER BY TIMESTAMP"] at ./FHEM/93_DbLog.pm line 6613.
Gruß
Eisix
Tut mir leid. Da kann ich nichts mehr machen. Kann es selber nicht testen. Sonst gern. Vllt das $ noch weg.
Du brauchst OdfFhem oder einen anderen Wissenden...
LG
Edit:
habe gerade nochmal nachgelesen:
https://wiki.fhem.de/wiki/LogProxy#M%C3%B6gliche_%3Coptions%3E
da geht vllt nur was mit postFn?
offset ist eine reine Zeitangabe oder Zeitberechnung.
LG
Zitat von: mr_petz am 29 Juni 2023, 18:32:04Zitat von: M.Piet am 29 Juni 2023, 15:21:43Zitat von: mr_petz am 27 Juni 2023, 14:50:07Gerade nachgestellt und getestet. Es läuft bei mir so:
Hey :)
Grad wollte ich posten wie ich es gelöst habe.
Hintenrum...durch die Brust ins Auge. Aber danke für deine Anregung!
...
Hi
Die "Anregung" würde ich gern umgesetzt sehen ob sie funktioniert ;)
LG
Hey,
war ein wenig im Urlaub, daher kommt das Ergebnis von dem Test jetzt,
Es hat in der Tat nun für einen Strich gesorgt. Aber der passt so gar nicht zu den Daten.
<ftui-chart-data line label="Solar aktiv" color="warning" log="Pool_Solar_Stellmotor" spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[3]=~'on'?1:0"
y-axis-id="y1"></ftui-chart-data>2023-07-07_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-07_17:09:01 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-07_17:21:13 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-07_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-08_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-08_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-09_10:00:01 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-09_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-10_10:00:03 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-10_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-11_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-11_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-12_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-12_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-07-13_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-07-13_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 offUnd wenn ich es mit type="bar" ergänze, habe ich gar keine gelbe Anzeige mehr.
Hierzu mache ich ein neues Posting auf, da es mit der anderen Sache nichts zu tun hat.
Ich verstehe den Sinn nicht, wie der "Bar" arbeitet. Oder mache ich hier einen gewaltigen Denkfehler?
Nehme ich den 11.08. mal als Beispiel.
2023-08-10_20:30:17 DummyLogSolar 0
2023-08-11_10:01:55 DummyLogSolar 1
2023-08-11_20:30:18 DummyLogSolar 0
2023-08-15_09:30:05 DummyLogSolar 0
Ich hätte einen "Bar" erwartet, der von 10:01 bis 20:30 geht (siehe Anhang "SOLL-Zustand).
Warum sieht es so aus wie auf dem Screenshot (IST-Zustand)?
<ftui-chart-data type="bar" label="Solar aktiv" color="warning" log="FileLog_Pool_Solar_Status" spec="3"
y-axis-id="y1"></ftui-chart-data>
Vielen Dank für die Aufklärung. :)
@M.Piet
Dein Bsp hat 0 1 0 0 als Zeitdaten über den Zeitraum und da wird nur 10:01 mit 1 als Bar angezeigt.
0 und 1 heißt einfach kein bzw ein Datenpunkt.
LG
Ok...danke. Ich hatte mir fast sowas gedacht.
Also kann mein "bar" so gar nicht funktionieren.
Nur damit ich es verstehe:
Wenn:
10:00 = 1
12:00 = 1
Dann würde er einen Bar von 10:00 bis 12:00 machen.
Wenn:
10:00 = 1
12:00 = 0
dann macht er nur ein Bar für den kurzen Moment um 10:00
Die Quelldaten müssten dann also so sein:
10:00 = 1
12:00 = 1
12:01 = 0
Ich denke das ist mit meinen Quelldaten nicht machbar, da ja immer der Zustandswechsel geloggt wird, richtig?
//edit: wenn ich aber dafür Sorgen würde, dass alle 5 Minuten das Log mit dem aktuellen Wert gefüllt wird, sollte das doch gehen oder?
Leider nicht. Er macht bei bar immer nur den Balken am Datenpunkt.
Was du willst kannst du mit line und fill erreichen.
LG
Edit.
Wenn du aller 5 min einen Logeintrag hast macht er immer einen neuen Bar (Balken).
Hallo,
aktuell läuft der Chart immer in der aktuellen Stunde und beginnt bei jeder neuen Stunde wieder von links.
Wie kann ich den Chart rechts "ankleben" und immer 1 oder 2 Stunden anzeigen lassen?
<ftui-chart titel="Energie" unit="hour" width="600px" height="400px" y-label="" y-unit=" W" data-hoursago_end="now" >
<ftui-chart-data fill stepped label="W" point-radius="0" color="lightgreen"
log="Gen24_ApiLog.File"
file="CURRENT"
spec="Gen24_Api:PowerFlow_Site_P_PV"
point-radius="1"
[update]="Gen24_ApiLog.File:linesInTheFile">
<ftui-chart-data fill stepped label="Verbrauch" point-radius="0" color="blue"
log="Gen24_ApiLog.File"
file="CURRENT"
spec="Gen24_Api:PowerFlow_Site_P_Load"
point-radius="1"
[update]="Gen24_ApiLog.File:linesInTheFile">
<ftui-chart-data fill stepped fill label="EVU" point-radius="0" color="red"
log="Gen24_ApiLog.File"
file="CURRENT"
spec="Gen24_Api:PowerFlow_Site_P_Grid"
point-radius="1"
[update]="Gen24_ApiLog.File:linesInTheFile">
<ftui-chart-controls units="hour, day, week"></ftui-chart-controls>
</ftui-chart-data>
</ftui-chart>
FTUI_Charts.png
Gibt es hier keine Idee?
Du müsstest das analog der "24h" Anzeige machen.
Um es generell für "Hour" zu haben, kannst du in
chart.component.cs (in components/chart/) folgendes ändern:
switch (this.unit) {
case 'hour':
date = new Date(ts + offset * HOUR);
date.setMinutes(0, 0, 0);
break;
nach
switch (this.unit) {
case 'hour':
date = new Date(ts + offset * HOUR - HOUR);
break;
Das wird ggf. beim update überschrieben.
Man könnte auch ein "1h" zusätzlich einbauen um beide Varianten zu ermöglichen.
Zitat von: TimoD am 31 März 2023, 13:33:03Stehe vor folgendem Problem:
ich würde gerne einen Plot erstellen, welcher eine horizontale Linie aus einer Variable des FHEM Devices macht.
Variable
EVU_Tibber:fc0_avg
Aufruf
ConstY:????
Habe nun herausgefunden, wie ich es als Plot löse:
Link (https://forum.fhem.de/index.php?topic=132946.0)
Bekomme es aber nicht in die Definition von FTUI3:
<ftui-chart-data
point-radius="1" color="red" fill="false"
fill log="myLogProxy" spec="ConstY:(ReadingsVal("EVU_Tibber","fc0_avg","0")/100)" [update]="TeslaSkipFull:Update:Time">
</ftui-chart-data>
Funktioniert nicht, wie müsste den die Deklaration aussehen für ConstY & lokale Variable in FTUI3? Vielen lieben Dank :-)
Hallo,
ich hätte auch Interesse daran, Konstantwert-Linien in Plots anzuzeigen. Hattest Du hierfür zwischenzeitlich schon eine Lösung gefunden?
Evtl. könnte man dieses Plugin einbauen?
chartjs-plugin-annotation (https://github.com/chartjs/chartjs-plugin-annotation)
schöne Grüße
Jo
Zitat von: mr_petz am 16 Juni 2023, 18:00:16@M.Piet
Es sollte wie bei:
units="day, week, 24h, 30d, month, year, hour"
auch bei unit gehen.
LG
Moin,
gibt es denn inzwischen auch größere Abstände? Ich möchte den Zeitraum von 10 Jahren angezeigt bekommen (Jahresverbrauch über mehrere Jahre). Geht das überhaupt?
Und noch eine ganz andere Frage. Kann es sein, dass die Charts immer nur auf die letzte Log-Datei (siehe Markierung) zugreifen?
Wenn ich im Chart auf Daten von 2023 zurückblättere, ist der Chart leer. Müsste ich dann umstellen, dass alle Werte nur in ein Log geschrieben werden?
...Kann keiner was dazu sagen? ???
Hmmm, dann muss ich die Logs umbauen, dass alles in ein File geschrieben wird.
Hallo,
Seit dem letzten Update werden bei mir Charts im popup nicht mehr angezeigt. Habe ich was verpasst, muss da was am Code angepasst werden?
Gruß
Eisix