Chart Widget: Graphen sprengen die Chartgrenzen

uron · 29 April 2023, 11:40:18

Hallo,
seit einiger Zeit verlassen meine Kurven die Grenzen des Charts.
Der Darstellungsfehler tritt nur bei meinem iPad auf, am Win10-PC ist das nicht der Fall, könnte also am Safaribrowser liegen dachte ich, aber auch der Firefox auf dem iPad liefert keine korrekte Darstellung.
Ich beiliegende Screenshots ist zu sehen, dass die Grafik zunächst korrekt aufgebaut wird (Bild1), nach Abschluss des Ladevorgangs der Seite sprengen die Graphen allerdings die vorgegebenen Bereiche (Bild2).
Die Einstellungen sind wie folgt

Code Auswählen

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_PV-Anlage">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="9" data-sizey="10">
                <header>Hausstrom</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="chart"
                                data-device="FBDECT_FritzBox_08761_XXXXXXX"
                                data-logdevice='["HausstromLog"]'
                                data-columnspec='["4:powerfox.power.*","4:FBDECT_FritzBox_08761_XXXXXXX.power.*","3:growatt.0.YYYYYYY.devices.SML0CHH0FT.deviceData.pac:.*",["4:powerfox.power.*","4:powerfox.power.*:0:$fld[3]<=0?0:$fld[3]"]]'
                                data-style='[["fill",["-10000","#ff0000","0.0"],["0","#ff0000","0.0"],["0","#DDA400","1.0"],["10000","#DDA400","1.0"]],"ftui l4fill","ftui l6fill",["fill",["-10000","#ff0000","1.0"],["0","#ff0000","1.0"],["0","#DDA400","0.0"],["10000","#DDA400","0.0"]]]'
                                data-ptype='["lines","lines:0","lines:1","lines"]'
                                data-uaxis='["secondary","primary","primary","secondary"]'
                                data-legend='["Strom-Netzbezug [W]","PV-Anlage Laube [W]","PV-Anlage Garage [W]",""]'
                                data-daysago_start="1"
                                data-daysago_end="-1"
                                data-nofulldays="false"
                                data-timeformat="ee\LF\hh:mm dd.MMM"
                                data-showlegend="true"
                                data-legendpos='["left","top"]'
                                data-crosshair="true"
                                data-minvalue="-3000"
                                data-maxvalue="3000"
                                data-yunit=""
                                data-ytext="akt. Leistungsbedarf [W]"
                                data-minvalue_sec="-3000"
                                data-maxvalue_sec="3000"
                                data-yunit_sec=""
                                data-ytext_sec="akt. PV-Leistung [W]"
                                data-title="Hausleistungsbedarf, gestapelt [W]"
                                data-title_class="myHeader"
                                data-prefetch="true">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="cell">
                            <div data-type="chart"
                                data-device="FBDECT_FritzBox_08761_XXXXXXX"
                                data-logdevice='["HausstromLog"]'
                                data-columnspec='["4:powerfox.power.*","4:FBDECT_FritzBox_08761_XXXXXXX.power.*","3:growatt.0.YYYYYYY.devices.SML0CHH0FT.deviceData.pac:.*",["4:powerfox.power.*","4:powerfox.power.*:0:$fld[3]<=0?0:$fld[3]"]]'
                                data-style='[["fill",["-10000","#ff0000","0.0"],["0","#ff0000","0.0"],["0","#DDA400","1.0"],["10000","#DDA400","1.0"]],"ftui l4fill","ftui l6fill",["fill",["-10000","#ff0000","1.0"],["0","#ff0000","1.0"],["0","#DDA400","0.0"],["10000","#DDA400","0.0"]]]'
                                data-ptype='["lines","lines:0","lines:1","lines"]'
                                data-uaxis='["secondary","primary","primary","secondary"]'
                                data-legend='["Strom-Netzbezug [W]","PV-Anlage Laube [W]","PV-Anlage Garage [W]",""]'
                                data-daysago_start="1"
                                data-daysago_end="-1"
                                data-nofulldays="false"
                                data-timeformat="ee\LF\hh:mm dd.MMM"
                                data-showlegend="true"
                                data-legendpos='["left","top"]'
                                data-crosshair="true"
                                data-minvalue="-200"
                                data-maxvalue="800"
                                data-yunit=""
                                data-ytext="akt. Leistungsbedarf [W]"
                                data-minvalue_sec="-200"
                                data-maxvalue_sec="800"
                                data-yunit_sec=""
                                data-ytext_sec="akt. PV-Leistung [W]"
                                data-title="Hausleistungsbedarf, gestapelt [W]"
                                data-title_class="myHeader"
                                data-prefetch="true">
                            </div>
                        </div>
                    </div>                    

                       <div class="row">
                        <div class="cell">
                            <div data-type="chart"
                                data-device='["FBDECT_FritzBox_08761_XXXXXXX"]'
                                data-logdevice='["HausstromLog"]'
                                data-columnspec='["4:FBDECT_FritzBox_08761_XXXXXXX.power.*","3:growatt.0.YYYYYYY.devices.SML0CHH0FT.deviceData.pac:.*","3:growatt.0.YYYYYYY.devices.SML0CHH0FT.historyLast.bdc1Soc","4:FBDECT_FritzBox_08761_XXXXXXX.energy-Summe:0:$val=($fld[3]/1000)"]'
                                data-style='["ftui l4fill","ftui l6fill","ftui l2","ftui l5"]'
                                data-ptype='["lines","lines:0","lines","steps"]'
                                data-uaxis='["primary","primary","secondary","primary"]'
                                data-legend='["PV-Anlage Laube [W]","PV-Anlage Garage [W]","Akku-Füllstand",""]'
                                data-daysago_start="1"
                                data-daysago_end="-1"
                                data-nofulldays="false"
                                data-timeformat="ee\LF\hh:mm dd.MMM"
                                data-showlegend="true"
                                data-legendpos='["left","top"]'
                                data-crosshair="true"
                                data-minvalue="0"
                                data-maxvalue="3000"
                                data-yunit=""
                                data-ytext="akt. PV-Leistung [W]"
                                data-minvalue_sec="0"
                                data-maxvalue_sec="100"
                                data-yunit_sec=""
                                data-ytext_sec="Akku-Füllstand [%]"
                                data-title="solare Ernte der PV-Anlagen"
                                data-title_class="myHeader"
                                data-prefetch="true">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Gibt es für das geschilderte Problem einen Grund bzw. eine Lösung?

eki · 02 Mai 2023, 11:07:48

Du hast ja nicht "auto" bei der Y-Achsen Skalierung angegeben, kann es sein, dass Deine Werte aus dem Log einfach zu groß sind?

uron · 02 Mai 2023, 12:45:49

Hab es mal mit "auto" probiert: keine Änderung!
Ja, die Werte aus dem Log sind im Vergleich zur Skala ziemlich groß aber mindestns die 2. Grafik soll den unteren Wertebereich auch vergrößert darstellen.
Es bleibt aber auch immer noch die Frage, warum es Unterschiede bei der Windows-PC- und Apple-iPad-Darstellung gibt?
Interessanterweise tritt der Fehler nicht beim iPhone auf!

eki · 02 Mai 2023, 12:54:32

Dann habe ich zumindest eine Idee, leider noch keine Lösung. Ich clippe das Chart area, so dass außerhalb des Grafikbereiches eigentlich nichts dargestellt werden sollte, aber manchmal funktioniert das nicht (auch beim Schieben nach links und rechts mit der Maus/Finger passiert das manchmal, ist irgendwie ein timing problem, daher auch auf jedem Browser anders). Wenn ich eine Lösung finde, melde ich mich.

uron · 02 Mai 2023, 13:33:35

Danke, ich bin geduldig

FHEM Forum

Chart Widget: Graphen sprengen die Chartgrenzen

uron

eki

uron

eki

uron