Neuigkeiten:

Am Sonntag den 8.12.2024 kann es ab ca. 8:00 Uhr zu kurzzeitigen Einschränkungen / Ausfällen bei den Diensten des FHEM Vereines kommen.
Die Server müssen mal gewartet und dabei neu gestartet werden ;)

Hauptmenü

FTUI 2 chart widget: Anzeige von +/- Daten zweifarbig gefüllt

Begonnen von kadef, 28 August 2024, 13:52:41

Vorheriges Thema - Nächstes Thema

kadef

hallo liebe Gemeinde,
ich verzweifle gerade an einem vermutlich recht einfachen Problem - die Darstellung der Lade/Entlade-Leistung in einer Kurve relativ zur Nulllinie.
Die (positiven) Werte oberhalb der Nulllinie sollen z.B. rot gefüllt werden, die negativen blau.

Was funktioniert:
Analog zu https://forum.fhem.de/index.php?topic=133372.0 #2 eine Nulllinie anlegen und eine gefüllte Kurve darüber legen.

                <Header>Speicher</header>
                        <div data-type="chart"
                                data-device='mqtt_Solix'
                                data-get='R15_energy_daily_home'
                                data-logdevice='[
                                                        "R15_LogProxy",
                                                        "log_Solar_Power"
                                                        ]'
                                data-logfile="CURRENT"
                                data-columnspec='[
                                                        "ConstY:0",
                                                        "4:mqtt_Solix.R15_power_charge"
                                                        ]'
                                data-style='[
                                                "ftui l5dash",
                                                "ftui l2fill"
                                                ]'
                                data-ptype='["lines","lines:0"]'
                                data-uaxis='primary'
                                data-legend='[
                                                "",
                                                "Akku-Ladung"
                                                ]'
                                data-showlegend='true'
                                data-minvalue='-1000'
                                data-maxvalue='1000'
                                data-yticks='500'
                                data-yunit='W'
                                data-ytext='Ladeleistung'
                                data-legendpos='["95%","20%"]'
                                data-scrollgroup="1"
                                data-cursorgroup="1"
                                data-width='95%'
                                data-height='95%'
                                class="nobuttons">
                        </div>
Abgesehen von der fehlenden 2-Farbigkeit hat das Diagramm noch das Problem, dass die Kurve jenseits von 'now' bis zum Ende das Tags extrapoliert wird, von der Darstellung her keine Sinn macht (siehe Screenshot 1).

Was nun aber überhaupt nicht funktioniert, ist das ganze 2-farbig zu bekommen.
Nach der Beschreibung im Wiki sollte sowas funktionieren:

data-style='["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["50","#ff0000","0.7"]]'
In meinem Fall, erst mal ganz einfach ohne die Nulllinie:

                        <div data-type="chart"
                                data-device='mqtt_Solix'
                                data-get='R15_energy_daily_home'
                                data-logdevice='[
                                                        "log_Solar_Power"
                                                        ]'
                                data-logfile="CURRENT"
                                data-columnspec='[
                                                        "4:mqtt_Solix.R15_power_charge"
                                                        ]'
                                data-style='["fill",["-1000","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["1000","#ff0000","0.7"]]'
                                data-ptype='["lines"]'
                                data-uaxis='primary'
                                data-legend='[
                                                "Akku-Ladung"
                                                ]'
                                data-showlegend='true'
                                data-minvalue='-1000'
                                data-maxvalue='1000'
                                data-yticks='500'
                                data-yunit='W'
                                data-ytext='Ladeleistung'
                                data-legendpos='["95%","20%"]'
                                data-scrollgroup="1"
                                data-cursorgroup="1"
                                data-width='95%'
                                data-height='95%'
                                class="nobuttons">
                        </div>
- das liefert nur ein schwarzes Diagramm (siehe Screenshot 2), was auch immer ich versuche.

Was mache ich falsch?
(ich verwende das chart widget das eki in post #18 von https://forum.fhem.de/index.php?topic=128863.0 angehängt hat - kann das das Problem sein?)

viele Grüße -
Karsten
FHEM auf RasPi 4, zigbee, REST, MQTT

kadef

hmmm... ist die Frage zu dumm, zu trivial, oder gibt's keine Antwort?
bin gespannt.. ;)
FHEM auf RasPi 4, zigbee, REST, MQTT

eki

#2
Sorry hab's gerade erst gesehen, habe aktuell nur begrenzt Zugriff auf's Internet.

Ich kann aktuell nur mutmaßen, da ich nichts debuggen kann. Das einzige was mir auffällt, ist, dass Du bei den anderen Einstellungen mit Arrays arbeitest (wahrscheinlich als Vorbereitung für später mehrere Graphen), beim Style aber nicht (das ist zwar auch ein Array aber nur deshalb, weil es Übergänge haben soll).

Probier mal:
data-style='[["fill",["-1000","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["1000","#ff0000","0.7"]]]'

kadef

Danke! Einen Schritt weiter..
mit der data-style Zeile als Array klappt die zweifarbige Darstellung.
Du darfst diesen Dateianhang nicht ansehen.
Die Definition sieht dann also so aus:
                        <div data-type="chart"
                                data-device='mqtt_Solix'
                                data-get='R15_energy_daily_home'
                                data-logdevice='["R15_LogProxy"]'
                                data-logfile="CURRENT"
                                data-columnspec='[
                                                        "ConstY:0",
                                                        "FileLog:log_Solar_Power:4:mqtt_Solix.R15_power_charge"
                                                        ]'
                                data-style='[
                                                "ftui l5dash",
                                                ["fill",["-1000","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["1000","#ff0000","0.7"]]
                                                ]'
                                data-ptype='[
                                                "lines",
                                                "lines"
                                                ]'
                                data-uaxis='primary'
                                data-legend='[
                                                "-",
                                                "Akku-Ladung"
                                                ]'
                                data-showlegend='true'
                                data-minvalue='-1000'
                                data-maxvalue='1000'
                                data-yticks='500'
                                data-yunit='W'
                                data-ytext='Ladeleistung'
                                data-legendpos='["95%","20%"]'
                                data-scrollgroup="1"
                                data-cursorgroup="1"
                                data-width='95%'
                                data-height='95%'
                                class="nobuttons">
                        </div>

Jetzt noch das Diagramm an die Null-Linie hängen durch Änderung des ptype:
data-ptype='[
                     "lines",
                     "lines:0"
                     ]'

- und schon geht nichts mehr: es kommt diese popup-Fehlermeldung...
Du darfst diesen Dateianhang nicht ansehen.
FHEM auf RasPi 4, zigbee, REST, MQTT

eki

Kannst Du mal folgendes versuchen:

im widget_chart.js (steht im js Verzeichnis) folgende Änderung machen:
style.search(/fill/)>=0))
durch
style[0].search(/fill/)>=0))
ersetzen.