Chart Widget - Neue Version zum Testen

[eki]

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.

[Waldmensch]

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

[eki]

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

[Ulm32b]

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:

- 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

[eki]

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.

[Ulm32b]

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.

Code Auswählen Erweitern

<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=" €&nbsp;"
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>

Code Auswählen Erweitern

/* 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;
}

Code Auswählen Erweitern

/* 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?

[Thorsten Pferdekaemper]

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

[eki]

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.

[Ulm32b]

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.

[eki]

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.

[Thorsten Pferdekaemper]

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:

Code Auswählen Erweitern


<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

[Waldmensch]

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 ______  ____   _________ _____

[eki]

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 ______  ____   _________ _____

Versuche es mal mit folgender Definition:

Code Auswählen Erweitern


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"]]]'


[Waldmensch]

@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

[eki]

Danke, ich schaue es mir an.