FTUI Neue Version chart_widget

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

Vorheriges Thema - Nächstes Thema

eki

Zitat von: ulobo60 am 14 Mai 2021, 17:30:24
Habe mein aktuelles Chart zur "7-Tage-Inzidenz" unten beigefügt.
Bin eigentlich sehr zufrieden und glücklich damit.
Als "ewiger Pingel" hätte ich trotzdem noch eine klitzekleine Frage.
Ich finde einfach keine CSS-Eigenschaft(en), um den Kasten um die Legende unten links in der Höhe kleiner zu machen.
Oder die Kastengröße zu belassen und den Schriftabstand 'bottom' größer bzw. 'top' kleiner zu machen - damit' schön akkurat aussieht :)
Darf auch ruhig '!important' beinhalten, da das mein einziges Chart im FTUI ist, das eine Legende hat.
Hat jemand ne Lösung dafür?

packe mal folgendes in Deine user CSS (eventuell musst Du mit den Werten etwas rumspielen, bis es so aussieht, wie Du es willst):


.legend.lback {
height: 25px;
transform: translateY(8px);
}

eki

Zitat von: somansch am 17 Mai 2021, 09:32:30
Ich hatte das log bereits verkleinert, um die Loggröße als Ursache auszuschliessen. Anbei das aktuelle Log mit den zusätzlichen Einträgen von heute.

Das Problem liegt an data-xticks="1d", xticks kann entweder einen Wert in Minuten oder "auto" sein. So etwas wie 1d wird hier nicht berücksichtigt (könnte man im Prinzip machen, geht aber bisher nicht). In Deinem Fall führt das dazu, dass er versucht alle Minute einen XTick zu zeichnen (durch das data-xticks_round="auto" wird dann zwar im Endeffekt doch nichts gezeichnet (weil er durch die Rundung die Zwischenstriche weglässt) aber die Schleife läuft eben mit 168*60 Durchläufen und das dauert.

Also setze mal data-xticks="auto" dann sollte es passen.

somansch

Zitat von: eki am 17 Mai 2021, 10:35:15
Das Problem liegt an data-xticks="1d", xticks kann entweder einen Wert in Minuten oder "auto" sein. So etwas wie 1d wird hier nicht berücksichtigt (könnte man im Prinzip machen, geht aber bisher nicht). In Deinem Fall führt das dazu, dass er versucht alle Minute einen XTick zu zeichnen (durch das data-xticks_round="auto" wird dann zwar im Endeffekt doch nichts gezeichnet (weil er durch die Rundung die Zwischenstriche weglässt) aber die Schleife läuft eben mit 168*60 Durchläufen und das dauert.

Also setze mal data-xticks="auto" dann sollte es passen.

Hi eki,

das ist die Lösung  :D.

Vielen Dank für deinen (wie immer) hervorragenden und schnellen Support.

Viele Grüße
Andreas

somansch

Da die Charts recht klein sind, und ich aber die Achsenzahlen zur Orientierung benötige, möchte ich die Anzahl der Werte der y-Achse auf drei Zahlen beschränken (drittes Beispiel von unten). Durch "data-yticks=auto" ist die Anzahl der angezeigten Zahlen leider unterschiedlich bzw. abhängig von den Werten. "data-minvalue" bzw. "data-maxvalue" in Verbindung mit einem festen Wert von "data-yticks" geht leider auch nicht, da die Inzidenzwerte in Summe zu große Schwankungen haben. Gibt es irgendeine Möglichkeit, die ich übersehen habe? Falls nicht, wäre es ein Feature-Wunsch, auch die Anzahl der Werte einer Achse definieren zu können bei "data-yticks=auto"  ;)

Speedy68

#679
Hallo zusammen,

habe jetzt ein Update ALL gemacht, davor war mein letztes Update im Dezember.
Leider werden bei meinem Widget jetzt keine Hilfslinien mehr gezogen. Im Wiki habe ich keine Änderung der Syntax gefunden. Ist eine Grafik für Stromerzeugung/Stromverbrauch:


class="normal"
         data-type="chart"
         data-device='["Stromzaehler_Verbrauch_Daten","Stromzaehler_Solaranlage_Daten"]'
         data-logdevice='["FileLog_Stromzaehler_Verbrauch_Daten","FileLog_Stromzaehler_Solaranlage_Daten"]'
         data-columnspec='["4:Stromzaehler_Verbrauch_Daten.power::","4:Stromzaehler_Solaranlage_Daten.power::"]'
         data-style='["ftui l0fill","ftui l4fill"]'
         data-ptype='["lines","lines"]'
         data-uaxis='["primary","primary"]'
         data-legend='["Stromverbrauch","Stromerzeugung"]'
         data-yunit="kW"
data-ytype="log"
data-height="300"
         data-minvalue="100"
         data-maxvalue="22000"
         data-yticks='[[0,"0"],[200,"0,2"],[500,"0,5"],[1000,"1"],[2000,"2"],[3000,"3"],[5000,"5"],[8000,"8"],[11000,"11"],[16000,"16"],[22000,"22"]]'
data-daysago_start="0"
         data-daysago_end="-1"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">


Hat jemand eine Idee, was da jetzt schiefläuft?
Nachtrag: die automatische Aktualisierung geht jetzt auch nicht mehr...
Habe widget_chart.js und ftui_chart.css aus dem Backup zurückgeholt, jetzt sind die Hilfslinien wieder da und der Auto-Refresh geht auch wieder. Liegt der Fehler bei mir (neue Anpassungen --> welche?) - oder in der neuen Version?

Vielen Dank und Grüße

eki

Zitat von: somansch am 17 Mai 2021, 22:21:57
Da die Charts recht klein sind, und ich aber die Achsenzahlen zur Orientierung benötige, möchte ich die Anzahl der Werte der y-Achse auf drei Zahlen beschränken (drittes Beispiel von unten). Durch "data-yticks=auto" ist die Anzahl der angezeigten Zahlen leider unterschiedlich bzw. abhängig von den Werten. "data-minvalue" bzw. "data-maxvalue" in Verbindung mit einem festen Wert von "data-yticks" geht leider auch nicht, da die Inzidenzwerte in Summe zu große Schwankungen haben. Gibt es irgendeine Möglichkeit, die ich übersehen habe? Falls nicht, wäre es ein Feature-Wunsch, auch die Anzahl der Werte einer Achse definieren zu können bei "data-yticks=auto"  ;)

Die Möglichkeit gibt es bisher nicht. Ich schau mal wie aufwändig das werden würde.

eki

Zitat von: Speedy68 am 19 Mai 2021, 11:11:22
Hallo zusammen,

habe jetzt ein Update ALL gemacht, davor war mein letztes Update im Dezember.
Leider werden bei meinem Widget jetzt keine Hilfslinien mehr gezogen. Im Wiki habe ich keine Änderung der Syntax gefunden. Ist eine Grafik für Stromerzeugung/Stromverbrauch:


class="normal"
         data-type="chart"
         data-device='["Stromzaehler_Verbrauch_Daten","Stromzaehler_Solaranlage_Daten"]'
         data-logdevice='["FileLog_Stromzaehler_Verbrauch_Daten","FileLog_Stromzaehler_Solaranlage_Daten"]'
         data-columnspec='["4:Stromzaehler_Verbrauch_Daten.power::","4:Stromzaehler_Solaranlage_Daten.power::"]'
         data-style='["ftui l0fill","ftui l4fill"]'
         data-ptype='["lines","lines"]'
         data-uaxis='["primary","primary"]'
         data-legend='["Stromverbrauch","Stromerzeugung"]'
         data-yunit="kW"
data-ytype="log"
data-height="300"
         data-minvalue="100"
         data-maxvalue="22000"
         data-yticks='[[0,"0"],[200,"0,2"],[500,"0,5"],[1000,"1"],[2000,"2"],[3000,"3"],[5000,"5"],[8000,"8"],[11000,"11"],[16000,"16"],[22000,"22"]]'
data-daysago_start="0"
         data-daysago_end="-1"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">


Hat jemand eine Idee, was da jetzt schiefläuft?
Nachtrag: die automatische Aktualisierung geht jetzt auch nicht mehr...
Habe widget_chart.js und ftui_chart.css aus dem Backup zurückgeholt, jetzt sind die Hilfslinien wieder da und der Auto-Refresh geht auch wieder. Liegt der Fehler bei mir (neue Anpassungen --> welche?) - oder in der neuen Version?

Vielen Dank und Grüße

Da ist in die letzte Version leider ein Fehler gerutscht. Kannst Du mal prüfen, ob es mit der angehängten Änderung wieder repariert ist?

Speedy68

Zitat von: eki am 20 Mai 2021, 08:32:39
Da ist in die letzte Version leider ein Fehler gerutscht. Kannst Du mal prüfen, ob es mit der angehängten Änderung wieder repariert ist?
Vielen Dank für die schnelle Antwort!
Die Hilfslinien sind zwar wieder da, die Auto-Aktualisierung funktioniert aber leider nach wie vor nicht.

eki

ZitatDie Hilfslinien sind zwar wieder da, die Auto-Aktualisierung funktioniert aber leider nach wie vor nicht.

OK, hier noch mal eine neue Testversion, mit der sollte hoffentlich auch das mit den Auto Updates wieder klappen. Das Problem trat nur auf, wenn data-prefetch nicht gesetzt wurde, daher habe ich es beim Testen übersehen.

Speedy68

Zitat von: eki am 21 Mai 2021, 08:23:16
OK, hier noch mal eine neue Testversion, mit der sollte hoffentlich auch das mit den Auto Updates wieder klappen. Das Problem trat nur auf, wenn data-prefetch nicht gesetzt wurde, daher habe ich es beim Testen übersehen.
Super, vielen Dank!
Damit funktioniert nun alles wieder.

eki

Zitat von: somansch am 17 Mai 2021, 22:21:57
Da die Charts recht klein sind, und ich aber die Achsenzahlen zur Orientierung benötige, möchte ich die Anzahl der Werte der y-Achse auf drei Zahlen beschränken (drittes Beispiel von unten). Durch "data-yticks=auto" ist die Anzahl der angezeigten Zahlen leider unterschiedlich bzw. abhängig von den Werten. "data-minvalue" bzw. "data-maxvalue" in Verbindung mit einem festen Wert von "data-yticks" geht leider auch nicht, da die Inzidenzwerte in Summe zu große Schwankungen haben. Gibt es irgendeine Möglichkeit, die ich übersehen habe? Falls nicht, wäre es ein Feature-Wunsch, auch die Anzahl der Werte einer Achse definieren zu können bei "data-yticks=auto"  ;)

Ich habe jetzt mal eine Version gebaut, die das können sollte (muss man aber sicher noch ausführlicher testen, z.B. mit Logarithmischen Achsen). Du kannst jetzt einen neuen Parameter data-maxyticks der die maximale Zahl der Abschnitte auf der Y-Achse angibt benennen (den gibt es natürlich für jede y-Achse entsprechend).
data-maxyticks="3"
Bitte probiers mal aus.

somansch

Zitat von: eki am 21 Mai 2021, 12:40:09
Ich habe jetzt mal eine Version gebaut, die das können sollte (muss man aber sicher noch ausführlicher testen, z.B. mit Logarithmischen Achsen). Du kannst jetzt einen neuen Parameter data-maxyticks der die maximale Zahl der Abschnitte auf der Y-Achse angibt benennen (den gibt es natürlich für jede y-Achse entsprechend).
data-maxyticks="3"
Bitte probiers mal aus.

Läuft bei mir ohne Fehler  :D. Manchmal sind es dann nur 2 Werte, aber das hängt sicherlich an den Daten. Mein problem ist damit auf jden Fall gelöst, super Arbeit.

Vielen Dank!

somansch

Mir ist heute noch etwas aufgefallen bzgl. "Popup". Ich weiß jedoch nicht, ob es am Chart-Widget oder Popup-Widget liegt?!

Ich habe ein kleines Chart definiert und möchte ein umfangreicheres Chart als Popup öffnen. Dies funktioniert auch problemlos im Chrome Browser. Dort kann ich in das Chart klicken und das Popup wird geöffnet. Auf dem iPad funktioniert dies nicht. Dort muss ich vor das Chart klicken. Mit dem Widget "simplechart" funktioniert es übrigens problemlos...

<header>PREISVERLAUF - 7 TAGE - SUPER</header>
<section>
<div data-type="popup" data-width="90%" data-height="90%">
<div class="nobuttons"
data-type="chart"
data-device="BK"
data-logdevice="FileLog_Spritpreise"
data-columnspec='["4:OMV.SuperE5\\x3a:","4:Aral.SuperE5\\x3a:","4:SIT.SuperE5\\x3a:","4:BK.SuperE5\\x3a:","4:Gruber.SuperE5\\x3a:"]'
data-style='["ftui l18","ftui l14","ftui l13","ftui l12","ftui l10"]'
data-ptype='["lines","lines","lines","lines","lines"]'
data-legend='["OMV","Aral","Total","BK","Gruber"]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-uaxis='["primary","primary"]'
data-xticks="auto"
data-xticks_round="auto"
data-yticks="0.03"
data-yticks_prio="primary"
data-show_both_axes="false"
data-yunit="€"
data-y_margin="20"
data-width="100%"
data-height="320px"
data-nofulldays="true"
data-daysago_start="168h"
data-daysago_end="0h"
data-timeformat="ee"
data-prefetch="true"
></div>
<div class="dialog">
<div class="fullsize showbusy"
data-type="chart"
data-device="BK"
data-logdevice="FileLog_Spritpreise"
data-columnspec='["4:OMV.SuperE5\\x3a:","4:Aral.SuperE5\\x3a:","4:SIT.SuperE5\\x3a:","4:BK.SuperE5\\x3a:","4:Gruber.SuperE5\\x3a:"]'
data-style='["ftui l18","ftui l14","ftui l13","ftui l12","ftui l10"]'
data-ptype='["lines","lines","lines","lines","lines"]'
data-legend='["OMV","Aral","Total","BK","Gruber"]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-uaxis='["primary","primary"]'
data-xticks="auto"
data-xticks_round="auto"
data-yticks="0.03"
data-yticks_prio="primary"
data-show_both_axes="false"
data-ytext="Preis pro Liter"
data-yunit="€"
data-y_margin="20"
data-width="100%"
data-height="100%"
data-nofulldays="true"
data-daysago_start="168h"
data-daysago_end="0h"
data-timeformat="hh:mm\LF\dd.MM.."
data-prefetch="true"
data-timeranges='[
["Aktueller Monat","0M","-1M"],
["Letzter Monat","1M","0M"],
["Letzte 3 Monate","3M","0M"],
["Aktuelle Woche","0W","-1W"],
["Letzte Woche","1W","0W"],
["Heute","0D","-1D"],
["Gestern","1D","0D"]
]'
></div>
</div>
</div>
</section>

eki

Das liegt daran, dass das Chart auf der Darstellungsfläche die Mausevents für das Realisieren der Swipe/Pinch/Cursor Features abgreift. In normalen Browsern kann ich dazu ein Mausmovement bei gedrückter Maustaste verwenden und die restlichen Events durchlassen (dadurch geht ein Klick Event durch und öffnet das Popup). Bei einem Device, das mit Touchgesten arbeitet (Pads, Smartphones) habe ich nichts gefunden, das ich verwenden kann, ohne dadurch auch die Tap Gesten abzufangen, dadurch geht dieser Event nicht durch, und das Popup öffnet sich nicht. Ich kann noch mal forschen, eventuell hat ja jemand hier im Forum eine Idee, will aber nichts versprechen.

SKg

Hallo,

ich versuche seit einer gefühlten Ewigkeit ein Kuchendiagram ans laufen zu bekommen.
Das Diagramm selbst funktioniert einwandfrei nur die Aktualisierung klappt nicht so wie ich es gerne hätte. (vielleicht verlange ich auch zu viel)
Ich habe in einen voran gegangenen Antwort gelesen das man die Zeile "data-device=" hinzufügen soll.
Leider wird das Diagramm nicht aktualisiert wenn im Log der Eintrag "2021-06-06 10:23:09 dummy Prozent_Netz_Monat 15" auftaucht.
Wenn ich die Seite neu lade werden die Werte aktualisiert.
ich würde das ganze gerne betreiben ohne die ganze Zeit die Seite neu zu laden.

Vielleicht weiß jemand eine Lösung?

MFG
Stephan


<div class="normal noaxes nobuttons"
data-type="chart"
data-logdevice='["LogProxy2"]'
data-logfile="CURRENT"
data-columnspec='[
"Func:logProxy_values2PieChart(\"Prozent_Akku_Monat\",\"state\",0,1,0,\"Akku\")",
"Func:logProxy_values2PieChart(\"Prozent_PV_Monat\",\"state\",ReadingsVal(\"Prozent_Akku_Monat\",\"state\",0),1,0,\"PV\")",
"Func:logProxy_values2PieChart(\"Prozent_Netz_Monat\",\"state\",ReadingsVal(\"Prozent_Akku_Monat\",\"state\",0)+ReadingsVal(\"Prozent_PV_Monat\",\"state\",0),1,0,\"Netz\")"
                ]'
data-device="Prozent_Netz_Monat"
data-style='["ftui l3fill","ftui l4fill","ftui l1fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["PV","Akku","Netz"]'
data-legendpos='["left","above"]'
data-yunit=""
data-height="300"
data-width="300"
data-ddd='["-40","0","0"]'
data-dddspace='["-10"]'
data-dddwidth='["10"]'
data-showlegend="true"
data-legend_horiz="true"
data-xticks="auto">
</div>