[gelöst] FTUI Chart - "Schlauch"-Darstellung aus dem Wiki

[FosCo]

Hi,

die im Wiki abgebildete Darstellung will bei mir einfach nicht funktionieren.

Die "normale" Darstellung funktioniert wunderbar:

Code Auswählen Erweitern

            <div data-type="chart" data-device="WetterProplanta" data-logdevice='["myLogProxy","myLogProxy","myLogProxy"]' data-columnspec='[
      "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22weatherDayIcon\\x22,$from,$to,12,\\x22day\\x22)",
      "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
      "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMin\\x22,$from,$to,12,\\x22day\\x22)"
      ]' data-style='["ftui l99icon","ftui l2","ftui l6"]' data-ptype='["icons:1","quadraticSmooth","quadraticSmooth"]'
                data-uaxis='["primary","primary","primary"]' data-legend='["Wetterbedingung","Max. Temperatur","Min. Temperatur"]'
                data-yunit="°C" data-ytext="Temperature (°C)" data-timeformat="ee\LF\dd.MM" data-minvalue="auto" data-maxvalue="auto"
                data-minvalue_sec="auto" data-maxvalue_sec="auto" data-daysago_start="0" data-y_margin="20" data-daysago_end="-4"
                data-xticks="1440" data-yticks="auto" data-showlegend="false" class="nobuttons">
            </div>

Sobald ich das Array in der columnspec einfüge, wird das Widget nciht mehr angezeigt, die Konsole zeigt aber auch keinen Fehler.  Der Farbverlauf ohne tempMin als untere Grenze ist leider nicht sehr hübsch, funktioniert aber.

Code Auswählen Erweitern

<div data-type="chart" data-device="WetterProplanta" data-logdevice='["myLogProxy","myLogProxy","myLogProxy"]'
                 data-columnspec='[
                              "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22weatherDayIcon\\x22,$from,$to,12)",
                              [
                                  "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMax\\x22,$from,$to,12)",
                                  "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMin\\x22,$from,$to,12)"
                              ]
                                  ]'
                data-style='["ftui l99icon",["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["50","#ff0000","0.7"]]]'
                data-ptype='["icons:1","quadraticSmooth","quadraticSmooth"]'
                data-uaxis='["primary","primary","primary"]' data-legend='["Wetterbedingung","Max. Temperatur","Min. Temperatur"]'
                data-yunit="°C" data-ytext="Temperature (°C)" data-timeformat="ee\LF\dd.MM" data-minvalue="auto" data-maxvalue="auto"
                data-minvalue_sec="auto" data-maxvalue_sec="auto" data-daysago_start="0" data-y_margin="20" data-daysago_end="-4"
                data-xticks="1440" data-yticks="auto" data-showlegend="false" class="nobuttons">
            </div>

Hat jemand einen Tipp für mich, was ich an dem Array in der columnspec falsch mache oder welchen Wert ich zusätzlich ändern muss, damit ich die Hübsche Darstellung aus dem wiki bekomme?

https://wiki.fhem.de/wiki/Datei:FTUI_Widget_Chart_DynamicStyles.png

[eki]

Es gibt 2 Probleme:
2. Du hast in Deiner Config manchmal 2 (in data-columnspec und data-style) und machmal 3 Felder lange Arrays (in data-ptype, data-uaxis, data-legend) definiert (der Schlauch wird wie ein Graph behandelt). Das Chart macht dann folgendes: Es wird geschaut, wie lang das längste Array ist, das legt die Anzahl der Graphen fest. Wenn irgenwo kürzere Arrays vorhanden sind, dann wird einfach das letzte Array Element wiederholt. In Deinem Fall würde also der Schlauch zwei mal gezeichnet.

Allerdings gibt es da noch ein 2. Problem
1. Im Chart ist ein Fehler, der sich wohl genau in Deiner Konstellation auswirkt (da es ein Timing Problem im Zusammenhang mit dem Asynchronen Abholen der Daten bei FHEM ist, kann ich noch nicht mal sagen, wann er wirklich auftritt). Der Fehler ist gefunden und eine Korrektur wird mit der nächsten Version verteilt.

Wenn Du zwischenzeitlich den Fehler umgehen willst, dann setze am besten, wie im Beispiel, noch einen Graphen (ohne Array) hinter den Schlauch (im Beispiel sind das, glaube ich, die Regenmengen). Müsste dann in etwa so aussehen:

Code Auswählen Erweitern


<div
    data-type="chart"
    data-device="WetterProplanta"
    data-logdevice='["myLogProxy","myLogProxy","myLogProxy"]'
    data-columnspec='[
                              "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22weatherDayIcon\\x22,$from,$to,12)",
                                    [
                                      "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMax\\x22,$from,$to,12)",
                                      "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMin\\x22,$from,$to,12)"
                                  ],
                                  "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22rain\\x22,$from,$to,0,\\x22day\\x22)"
                              ]'
    data-style='["ftui l99icon",["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["50","#ff0000","0.7"]],"ftui l1fill"]'
    data-ptype='["icons:1","quadraticSmooth","steps"]'
    data-uaxis='["primary","primary","secondary"]'
    data-legend='["Wetterbedingung","Max. Temperatur","Rain"]'
    data-yunit="°C" data-ytext="Temperature (°C)"
    data-timeformat="ee\LF\dd.MM" data-minvalue="auto"
    data-maxvalue="auto"
    data-minvalue_sec="auto"
    data-maxvalue_sec="auto"
    data-daysago_start="0"
    data-y_margin="20"
    data-daysago_end="-4"
    data-xticks="1440" data-yticks="auto" data-showlegend="false" class="nobuttons">
</div>


[FosCo]

Hi eki,

vielen lieben Dank für die schnelle Hilfe!

Das Problem mit unterschiedliche großen Arrays hatte ich schon vermutet, der gepostete Stand war einer von mehreren Versuchen.

Mit der zusätzlichen Zeile funktioniert es wunderbar und ich spare mir das zweite Diagramm für die Regenwahrscheinlichkeit, das wurde ohnehin schon als "unübersichtlich" kritisiert

Code Auswählen Erweitern

            <div data-type="chart" data-device="WetterProplanta" data-logdevice='["myLogProxy","myLogProxy","myLogProxy"]'
                 data-columnspec='[
                              "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22weatherDayIcon\\x22,$from,$to,12)",
                              [
                                  "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMax\\x22,$from,$to,12)",
                                  "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22tempMin\\x22,$from,$to,12)"
                              ],
                                "Func:logProxy_proplanta2Plot(\\x22WetterProplanta\\x22,\\x22chOfRain_\\x22,$from,$to,0,\\x22day\\x22)"
                              ]'
                data-style='["ftui l99icon",["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["50","#ff0000","0.7"]],"ftui l5"]'
                data-ptype='["icons:1","quadraticSmooth","quadraticSmooth"]'
                data-uaxis='["primary","primary","secondary"]' data-legend='["Wetterbedingung","Min./Max. Temperatur","Regenwahrscheinlichkeit"]'
                data-yunit="°C" data-ytext="Temperature (°C)" data-yunit_sec="%" data-ytext_sec="Regenwahrscheinlichkeit" data-timeformat="ee\LF\dd.MM" data-minvalue="auto" data-maxvalue="auto"
                data-minvalue_sec="0" data-maxvalue_sec="100" data-daysago_start="0" data-y_margin="20" data-daysago_end="-4"
                data-xticks="1440" data-yticks="auto" data-showlegend="false" class="nobuttons">
           </div>