Ich habe mal wieder eine neue Version des Chart Widgets soweit fertig, und würde, bevor ich sie freigeben mal Interessierte Nutzer zum Testen aufrufen.
Die wesentliche Neuerung (neben einer Reihe von Fehler Korrekturen) ist, dass die Charts interaktiver geworden sind. Man kann die Charts entweder mit der Maus oder, bei Touch Displays, mit dem Finger in X-Richtung schieben oder zoomen. Zum Zoomen muss man auf touch Displays die üblichen pinch Gesten machen (also Finter auseinander oder zusammen bewegen). Ohne Touch wird das Zoomen durch drücken der CTRL Taste udn gleichzeitiges Bewegen der Maus aktiviert. Damit das funktioniert, muss der "Crosshair Cursor" deaktiviert sein (sonst wird ja bei Maus/Finger Bewegung die Cursor Linie mit den dargestellten Werten gezeigt). Ein weiteres Setting das Enfluss hat, ist data-prefetch. Wird data-prefetch auf "true" gesetzt, dann holt sich das Chart ja nicht nur die Daten vom aktuell im Fenster sichtbaren Bereich, sonder auch die Daten von Zeiten davor und danach. Im Fall des Schiebens/Zoomens werden diese vorher geladenen Bereiche dann ins Fenster hinein geschoben/gezoomt und das Verschieben ist quasi nahtlos. Sobald man um die ganze dargestellte x-Breite verschoben oder um mehr als einen Faktor 2 heraus/hinein gezoomt hat, wird entsprechend wieder nachgeladen (so also ob man den +/- bzw. den </> Knopf gedrückt hätte). Dadurch gibt es u.U. einen, je nach dem wie viele Daten geholt werden müssen und wie schnell die Verbindung ist, kurzen oder längeren Stop beim Zoomen/Schieben. Danach geht alles wieder wie gehabt weiter.
Anbei die neue Version. Viel Spaß beim Testen.
Kurze Frage: sind 2 Y Achsen möglich? Ich würde gerne die Photovoltaik Energieerzeugung/Verbrauch in 0-10000 Watt auf y1 und den Batterie SoC in Prozent auf y2 in einem Chart anzeigen.
Gesendet von iPhone mit Tapatalk
Es sind beliebig viele primär und sekundär Y-Achsen möglich. Genaue Beschreibung siehe hier (kommt dann demnächst auch ins Wiki):
https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935 (https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935)
Zitat von: eki am 10 Mai 2019, 11:48:19
Anbei die neue Version. Viel Spaß beim Testen.
Funktioniert bei mir wie beschrieben. Sauber. :)
Allerdings scheint ein anderes Feature bereits vor einiger Zeit verloren gegangen zu sein:
Zitat- Bei der X-Achse werden, wenn sich durch auto-Formatierung z.B. Tages- und Stundenangaben mischen, die großen Werte fett gemacht
Wenn noch Ideen für weitere Features gesucht werden: Cool fände ich, wenn - basierend auf den aktuell angezeigten Werten - die y-Achse dynamisch skaliert werden könnte:
- Min-Wert-Achse = Min-Wert Daten * Faktor a
- Max-Wert-Achse = Max-Wert Daten * Faktor b
Also bei mir klappt das mit dem Fettnachen der Haupttexte auf der x-Achse noch. Kannst Du mal eine Beispielkonfiguration posten, bei der das ging und jetzt nicht mehr geht.
Zitat von: eki am 11 Mai 2019, 10:23:57
Also bei mir klappt das mit dem Fettnachen der Haupttexte auf der x-Achse noch. Kannst Du mal eine Beispielkonfiguration posten, bei der das ging und jetzt nicht mehr geht.
Nachfolgend mein Code, den ich schon seit langem nicht mehr geändert habe. Anschließend der css-Style für den Tag; der dürfte keinen Einfluss haben. Schon eher zu vermuten ist dies bei den css-Definitionen, die speziell auf das Chart-Widget zugeschnitten sind.
<div class="big">Benzinpreis Super E10</div>
<div data-type="chart"
data-prefetch="true"
data-device="bft"
data-get="SuperE10"
data-logdevice="DBLogging"
data-columnspec="Benzinpreis_bft:SuperE10"
data-style='["ftui l0fill"]'
data-ptype="steps"
data-minvalue="0.9"
data-maxvalue="1.65"
data-nofulldays="false"
data-title="Aktuell: $data{currval1} €"
data-title_class="title-gas"
data-width="800px"
data-height="500px"
data-xticks="auto"
data-xticks_round="auto"
data-xtext_offset="auto"
data-yticks_format="#.##"
data-yunit=" € "
data-daysago_start="1"
data-timeranges='[["Heute","0D","-1D"],["2 Tage","1D","-1D"],["Aktuelle Woche","0W","-1W"],["Aktueller Monat","0M","-1M"],["Aktuelles Quartal","2M","-1M"],["Aktuelles Jahr","0Y","-1Y"]]'
class="top-space big bg-transparent">
</div>/* Hintergrundbild Tag */
body {
background-image: url(../images/Hintergrund_Wolken.jpg) !important;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
/* pagebutton widget */
/* foreground on */
[data-type="pagebutton"]:not([data-colors]):not([data-on-color]):not([data-color]) .active i#fg {
color: rgba(23, 48, 61, 1) !important;
}
/* switch widget */
/* foreground off */
[data-type="switch"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#fg,
[data-type="dimmer"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#fg,
[data-type="button"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#fg {
color: rgba(23, 48, 61, 1) !important;
}
/* popup layout */
.dialog {
background-image: url(../images/Hintergrund_Wolken.jpg) !important;
}/* start of styles for chart widget */
/* Definition of the axes generally*/
.text.axes {
font-size: 20px !important;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
}
/* Legende und Cursor ausblenden*/
svg.legend text.caption {
display: none;
}
/* Definition of size etc. for the buttons */
.buttons {
font-size: 50px!important;
}
/* Definition von size etc. für den Titel Benzin */
.title-gas {
font-size: 20px!important;
fill: #888;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
}
.chart-background {
fill-opacity: 0 !important;
}In der neuesten Widget-Version wird an den Tagesübergängen oft, aber nicht immer die Füllung unterbrochen. Ist das Absicht?
Hi,
ich habe mir das mal runtergeladen, um es mit FUIP zu testen. Also jedenfalls stürzt es nicht gleich ab und die Charts werden dargestellt. Ich glaube auch, dass der Bug mit der Endlosschleife tatsächlich gefixt ist. Allerdings funktioniert das mit dem Verschieben nur selten bis gar nicht. Wenn es mal funktioniert, dann wird nichts nachgeladen, rechts bzw. links davon ist dann halt leer. Außerdem kann man das Verschieben nicht mehr abschalten. Wenn es mal geklappt hat, dann verschiebt sich das Chart immer, auch wenn man keine Maustaste drückt.
Ctrl+Maus hatte nie einen Effekt.
Die Navigation ansonsten (die Pfeile und +/-) funktioniert auch nicht immer. Wenn ich mit + reinzoome bis ich auf ungefähr Wochen-Ebene bin, und dann Pfeil Links klicke, dann saust das Chart nach rechts raus und kommt von links wieder rein. Das Ergebnis sieht genauso aus wie es vorher war.
Es scheint auch noch irgendwo eine Endlosschleife oder ein Memory Leak drin zu sein. Wenn ich ein bisschen rumklicke, dann kommt es manchmal vor, dass gar nichts mehr geht und der Browser mehr und mehr Speicher allokiert. Irgendwann schmiert's dann ab.
Sorry, dass ich Dir da nichts besseres liefern kann, aber vielleicht hilft das schon ein bisschen.
Gruß,
Thorsten
Da ich dieses Verhalten bei mir nicht habe, müsstest Du mir mal eine Definition hier posten, mit der ich das nachvollziehen kann (ich habe es leider immer noch nicht geschafft FUIP mal bei mir anzuwerfen, der erste Versuch ging ziemlich in die Hose). Komischerweise scheint es ja bei Ulm32b auch zu klappen.
Zitat von: eki am 14 Mai 2019, 11:42:31
Komischerweise scheint es ja bei Ulm32b auch zu klappen.
Ich benutze aber kein FUIP, sondern ganz traditionell FTUI.
Die von mir beschriebenen Lücken an den Tagesübergängen rühren wahrscheinlich daher, dass offenbar beim Wischen immer die Daten von 2 Tagen nachgeladen werden, auch wenn prefetch aktiviert ist. Damit das Tagesprofil hinreichend genau ist, werden die Daten alle 10 Minuten geholt. Andererseits verdichte ich in der Datenbank die einen Monat zurückliegenden Daten auf den Tagesdurchschnitt und halte damit den Umfang der Daten ganz gut im Zaume.
Ja, mir geht es ja genau so, dass ich FUIP bisher nicht nutze, aber nichts desto trotz würde ich das gerne reparieren, da FUIP ja eine coole Sache ist.
Was die Übergänge betrifft, das ist bisher aus Software internen Gründen noch so, weil ich eigentlich immer erst anfange zu zeichnen, wenn der erste Messpunkt da ist (ich bin der Meinung das Chart sollte möglichst wenig dazu basteln, was nicht im Datenbestand ist) und weil ich darüber hinaus intern im Code immer noch die einzelnen Perioden (die Angezeigte und die davor und dahinter) getrennt betrachte und nicht verbinde. Vielleicht fällt mir dazu noch eine Lösung ein, mal schauen.
Zitat von: eki am 14 Mai 2019, 11:42:31
Da ich dieses Verhalten bei mir nicht habe, müsstest Du mir mal eine Definition hier posten, mit der ich das nachvollziehen kann
Ja, sowas habe ich mir gedacht...
Also die Definition eines Beispiels sieht so aus:
<div data-type="chart"
data-device='["ESPEasy_ESP_Easy_CO2SensorMHZ19","ESPEasy_ESP_Easy_CO2SensorMHZ19","ESPEasy_ESP_Easy_CO2SensorMHZ19"]'
data-logdevice='["esjaylog","esjaylog","esjaylog"]'
data-columnspec='["4:ESPEasy_ESP_Easy_CO2SensorMHZ19.PPM\\x3a::$fld[3]>1000?1000:$fld[3]","4:ESPEasy_ESP_Easy_CO2SensorMHZ19.PPM\\x3a::$fld[3]>1500?1500:$fld[3]","4:ESPEasy_ESP_Easy_CO2SensorMHZ19.PPM\\x3a::$fld[3]>2000?2000:$fld[3]"]'
data-timeranges='[["Letzte Stunde","1h","0h"],["3 Stunden","3h","0h"],["6 Stunden","6h","0h"],["12 Stunden","12h","0h"],["24 Stunden","24h","0h"],["Heute","0D","-1D"],["Gestern","1D","0D"],["Aktuelle Woche","0W","-1W"],["Vorherige Woche","1W","0W"],["Aktueller Monat","0M","-1M"],["Vorheriger Monat","1M","0M"],["Aktuelles Jahr","0Y","-1Y"],["Vorheriges Jahr","1Y","0Y"]]'
data-daysago_start="0D"
data-daysago_end="-1D"
data-nofulldays="false"
data-yticks='[[750,"good"],[1250,"ok"],[1750,"bad"]]'
data-style='["SVGplot fuipchart l1fill lwidth1","SVGplot fuipchart l4fill lwidth1","SVGplot fuipchart l0fill lwidth1"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","primary"]'
data-legend='["Luft gut","Luft ok","Luft schlecht"]'
data-minvalue="450"
data-maxvalue="2000"
data-minvalue_sec="450"
data-maxvalue_sec="2000"
data-title="<L1>"
data-title_class="fuipchart title fuip-color-foreground"
data-ytext="CO2 Wert"
data-ytext_sec=""
data-legendpos='["left","top"]'
data-width="100%" data-height="100%"
style="width:100%;height:calc(100% - 4px);">
</div>
(Sorry für die Formatierung, das ist halt generiertes Coding.)
Das Log-Device esjaylog enthält nur eine Datei, die ich hier angehängt habe.
Wenn Du Dir das so zusammenbastelst, dann wirst Du erst einmal gar nichts sehen. Im Chart dann den Zeitraum "Vorheriger Monat" wählen und dann einmal "Pfeil links" drücken. Dann nochmal "+" drücken. Das sollte dann in etwa so aussehen wie im Screenshot.
Jetzt nochmal "Pfeil links" und das Ding wandert einmal durch und das ganze sieht so aus wie vorher. Man kann jetzt auch mit "Pfeil rechts" denselben Effekt erzielen. Erst beim zweiten Mal klicken scrollt es wirklich weiter.
Wenn ich versuche, das ganze mit der Maus zu verschieben, dann ruckelt es höchstens ein bisschen.
Jetzt versuche ich das ganze noch mehr zu vergrößern, also "+"-Taste. Daraufhin sehe ich wieder nichts (das ist wohl richtig so), ich kann aber weder mit der Maus noch mit der "Pfeil links/rechts"-Taste irgendwohin scrollen.
Das soll es jetzt erstmal gewesen sein. Die anderen Probleme hatte ich nur bei komplexeren Sachen...
Gruß,
Thorsten
Hallo,
Hat jemand eine Idee, wie ich einen Graphen als unterbrochene gerade Linie darstellen kann? Ich habe einen Wert, der 0 oder 1 ist. Bei 1 soll eine gerade Linie erscheinen, die bei 0 unterbrochen wird und bei 1 entsprechend wieder gezeichnet wird. In etwa so ______ ____ _________ _____
ZitatHat jemand eine Idee, wie ich einen Graphen als unterbrochene gerade Linie darstellen kann? Ich habe einen Wert, der 0 oder 1 ist. Bei 1 soll eine gerade Linie erscheinen, die bei 0 unterbrochen wird und bei 1 entsprechend wieder gezeichnet wird. In etwa so ______ ____ _________ _____
Versuche es mal mit folgender Definition:
data-ptype="steps"
data-minvalue="-0.1"
data-maxvalue="1.1"
data-style='[["fill",["-1","#FFFFFF","0"],["0.999","#FFFFFF","0"],["0.999","#FFFFFF","1"],["1.01","#FFFFFF","1"],["1.01","#FFFFFF","0"],["2","#FFFFFF","0"]]]'
@eki: kannst Du Dir bitte mal diesen Thread anschauen insbesondere die letzten Beiträge? Du hast da ein Memleak im Chart Widget. Mein komplettes FTUI läuft gerade seit 2 Stunden konstant mit 6,5MB Speicherverbrauch. Ohne den Fix wären es locker schon 200M
https://forum.fhem.de/index.php/topic,102179.0.html
Danke, ich schaue es mir an.
Ich habe mittlerweile die Prototypen wieder an ihrem Platz. Das schien nur Linderung zu bringen, weil die Arrays, die im Speicher festhingen, halt kleiner waren. Die einzige Änderung die nötig ist, ist die letzte. Nicht dass Du jetzt alles umbaust. :)
Gesendet von iPhone mit Tapatalk
Danke, hätte mich auch gewundert, wenn das wirklich das Thema gewesen wäre (aber manchmal wundert man sich eben ???). Die andere Änderung checke ich mal ob das Seiteneffekte haben könnte, glaube es aber aktuell nicht.
Zitat von: Thorsten Pferdekaemper am 14 Mai 2019, 20:49:23
...
Wenn Du Dir das so zusammenbastelst, dann wirst Du erst einmal gar nichts sehen. Im Chart dann den Zeitraum "Vorheriger Monat" wählen und dann einmal "Pfeil links" drücken. Dann nochmal "+" drücken. Das sollte dann in etwa so aussehen wie im Screenshot.
Jetzt nochmal "Pfeil links" und das Ding wandert einmal durch und das ganze sieht so aus wie vorher. Man kann jetzt auch mit "Pfeil rechts" denselben Effekt erzielen. Erst beim zweiten Mal klicken scrollt es wirklich weiter.
Wenn ich versuche, das ganze mit der Maus zu verschieben, dann ruckelt es höchstens ein bisschen.
Jetzt versuche ich das ganze noch mehr zu vergrößern, also "+"-Taste. Daraufhin sehe ich wieder nichts (das ist wohl richtig so), ich kann aber weder mit der Maus noch mit der "Pfeil links/rechts"-Taste irgendwohin scrollen.
Das soll es jetzt erstmal gewesen sein. Die anderen Probleme hatte ich nur bei komplexeren Sachen...
Gruß,
Thorsten
Ich habe das Verhalten jetzt mal nachgestellt und einige Korrekturen am Thema "automatische Settings für die x-Achse" gemacht, in der angehängten Version ist das hoffentlich weg. Wäre schön, wenn Du das mal testen könntest.
Zitat von: eki am 22 Juli 2019, 09:51:57Wäre schön, wenn Du das mal testen könntest.
Ich habe mal versucht, das ursprüngliche Problem noch einmal nachzuvollziehen, aber ich habe es selbst nicht geschafft. (Auch nicht mit einer älteren Version.) Die neue Version hat daran auch nichts geändert.
Allerdings habe ich (mit dem meiner Meinung nach gleichen Setup wie vorher) jetzt eine andere seltsame Reaktion des Systems: Ich gehe über "Vorheriger Monat" und dann den Pfeil nach links bis in den März, so dass die Grafik wieder auftaucht. Dann drücke ich "+". Der Ausschnitt ist jetzt tatsächlich ungefähr auf "halber Monat", aber er geht von 1. bis 17. Mai (oder so).
Wenn ich auf Tages-Ebene bin, dann machen die Pfeiltasten gar nichts.
...außerdem scheint es hin und wieder eine Endlosschleife zu geben, bei der ich sogar den Browser abschießen muss.
Gruß,
Thorsten
Danke fürs Testen
Das mit dem 17. ist eigentlich so gewollt. Bei der automatischen Einteilung der X-Achse wird bei halben Monaten immer auf ganze Tage gerundet. Bei genauer Berechnung würde bei einem Monat wie dem März sonst ja die Grenze um 12:00 des 15. sein. Daher werden in dem Fall einmal 16 und einmal 15 ganze Tage gesetzt (die Beschriftung ist eventuell etwas irreführend, aber da der 16. ja komplett in die Ansicht mit hineingenommen wird, und da immer der Beginn des Tages für die Striche genommen wird, landet man eben ganz am Ende beim 17.). Wenn dieses Verhalten zu irreführend ist, könnte man natürlich auch wieder auf die halben Tage gehen.
Was die Endlosschleife betriff, bräuchte ich noch ein bisschen mehr Info ??? Ich habe auch noch an einer anderen Stelle ein komisches Verhalten gefunden, muss also auf jeden Fall noch mal ran.
Zitat von: eki am 29 Juli 2019, 08:57:19
Das mit dem 17. ist eigentlich so gewollt.
Das hatte ich mir schon so gedacht. ...aber ich kann mir kaum vorstellen, dass es zum 1. bis 17.
Mai springen soll, wenn man vom
März aus die "+"-Taste drückt.
Gruß,
Thorsten
tja, das war genau das andere Problem, das ich erwähnt hatte. ;)
...und die Endlosschleife konnte ich nicht wirklich wiederholen.
Gruß,
Thorsten