Autor Thema: FTUI Neue Version chart_widget  (Gelesen 124725 mal)

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #675 am: 17 Mai 2021, 10:00:50 »
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);
}

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #676 am: 17 Mai 2021, 10:35:15 »
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.

Offline somansch

  • Full Member
  • ***
  • Beiträge: 387
Antw:FTUI Neue Version chart_widget
« Antwort #677 am: 17 Mai 2021, 12:14:00 »
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

Offline somansch

  • Full Member
  • ***
  • Beiträge: 387
Antw:FTUI Neue Version chart_widget
« Antwort #678 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"  ;)

Offline Speedy68

  • New Member
  • *
  • Beiträge: 16
Antw:FTUI Neue Version chart_widget
« Antwort #679 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
« Letzte Änderung: 19 Mai 2021, 16:45:27 von Speedy68 »

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #680 am: 20 Mai 2021, 08:31:07 »
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.
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #681 am: 20 Mai 2021, 08:32:39 »
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?

Offline Speedy68

  • New Member
  • *
  • Beiträge: 16
Antw:FTUI Neue Version chart_widget
« Antwort #682 am: 20 Mai 2021, 14:49:36 »
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.

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #683 am: 21 Mai 2021, 08:23:16 »
Zitat
Die 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.

Offline Speedy68

  • New Member
  • *
  • Beiträge: 16
Antw:FTUI Neue Version chart_widget
« Antwort #684 am: 21 Mai 2021, 10:50:33 »
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.

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #685 am: 21 Mai 2021, 12:40:09 »
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.
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline somansch

  • Full Member
  • ***
  • Beiträge: 387
Antw:FTUI Neue Version chart_widget
« Antwort #686 am: 22 Mai 2021, 15:09:40 »
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!

Offline somansch

  • Full Member
  • ***
  • Beiträge: 387
Antw:FTUI Neue Version chart_widget
« Antwort #687 am: 24 Mai 2021, 14:51:59 »
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>

Offline eki

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1393
Antw:FTUI Neue Version chart_widget
« Antwort #688 am: 25 Mai 2021, 09:39:54 »
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.
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline SKg

  • Full Member
  • ***
  • Beiträge: 114
Antw:FTUI Neue Version chart_widget
« Antwort #689 am: 06 Juni 2021, 10:46:24 »
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>

 

decade-submarginal