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

[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.

Code Auswählen Erweitern

                <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:

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

                        <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

[kadef]

hmmm... ist die Frage zu dumm, zu trivial, oder gibt's keine Antwort?
bin gespannt..

[eki]

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:

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

                        <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:

Code Auswählen Erweitern

data-ptype='[
                     "lines",
                     "lines:0"
                     ]'
- und schon geht nichts mehr: es kommt diese popup-Fehlermeldung...
Du darfst diesen Dateianhang nicht ansehen.

[eki]

Kannst Du mal folgendes versuchen:

im widget_chart.js (steht im js Verzeichnis) folgende Änderung machen:

Code Auswählen Erweitern

style.search(/fill/)>=0))
durch

Code Auswählen Erweitern

style[0].search(/fill/)>=0))
ersetzen.