Gefüllten, zweifarbigen Chart mit Werten von Plus nach Minus zeichnen

Begonnen von Rewe2000, 18 April 2020, 19:38:56

Vorheriges Thema - Nächstes Thema

Rewe2000

Hallo,

leider schaffe ich es nicht alleine einen zweifarbigen Chart zu erstellen, welcher die Batterieladung (Werte von -3000 bis + 3000 Watt) darstellt. Ich habe schon viel experimentiert und wollte den Chart, ähnlich dem Proplanta Beispiel im FUIP Wiki aufbauen (siehe Bild im Anhang) negative Werte in Rot und positive Werte in Blau, ohne irgendwelche Symbole. Die 0 Werte sollen in der Mitte liegen und die Flächen zu den aktuellen Istwert jeweils gefüllt sein.
Die Werte kommen bei mir aus einem einzigen Reading, welches in der SQL-Datenbank (MySQL) liegt, der Wert ändert sich je nach Ladung/Entladung von +3000 bis -3000 Watt.

LogProxy habe ich installiert, aber wie ich die LogProxy-Funktion in 99_myUtils.pm umstellen muss, das ist für mich (derzeit) noch zu hoch.

Oder gibt es ganz andere Darstellungsmöglichkeiten für Werte, welche von Plus nach Minus reichen, um Netzeinspeisung/Netzbezug und Batterieladung/Batterieentladung zu Visualisieren? Sicher bin ich nicht der Einzige, welcher solche Werte in FTUI als Chart, von einer PV-Anlage mit Batteriespeicher darstellen will.

Es wäre nett, wenn mir hier jemand weiterhelfen könnte.

Gruß Reinhard
Fhem 6.3 auf Raspberry Pi4 SSD mit Raspbian Bookworm, Homematic, Homematic IP, CCU3 mit RapberryMatic, WAGO 750-880, E3DC S10E Hauskraftwerk, E3DC Wallbox, my-PV AC ELWA-E Heizstab, Fritz!Box 7590, KIA Bluelinky


eki

Der Link bezieht sich auf FHEMWEB, die Frage ging aber um FTUI.

Du brauchst keine MyUtil und auch kein logproxy, sondern nur die richtige data-styles Definition. Hier https://forum.fhem.de/index.php/topic,48450.msg1034268.html#msg1034268 habe ich das vor einiger Zeit mal genauer erklärt. Falls Du es damit nicht hinbekommst, melde Dich noch mal, falls Du es hinbekommst, kannst Du gern mal das Ergebnis hier posten.

Shadow3561

edit:
hier stand Müll

Rewe2000

Vielen Dank euch beiden, für die Links und die Denkanstöße.

Irgendwie wird bei mir immer der minus Bereich bis zum unteren Rand des Charts eingefärbt. Der Farbverlauf sollte aber nur von der Nullinie bis zum aktuellen Minuswert gehen, so ähnlich wie in den SVG-Charts aus dem Beitrag https://forum.fhem.de/index.php/topic,108858.msg1028300.html#msg1028300
Wenn ich ehrlich bin, habe ich den Thread mehrmals gelesen, werde aber daraus nicht schlau wie ich meine Werte angeben sollte, damit diese so gezeichnet werden.

Was müsste ich bei data-style="" eingeben, damit der Bereich nicht von der Unterseite her mit Farbe gefüllt wird?

Da ich ja nur ein Reading (von -3000 bis 3000) im Chart verarbeiten will, welcher aus einer DBLog Datenbank kommt, fällt mir da nicht viel ein, was ich da umdrehen könnte.

Mein bisheriger chart:
<div data-type="chart"
data-device="Batt_Leistung"
data-get="state"
data-logdevice="DBLogging"
data-logfile="HISTORY"
data-legend="Batterieleistung"
data-minvalue='auto'
data-maxvalue='auto'
data-xticks='auto'
data-yticks='500'
data-yunit=' W'
data-style='[["fill",["-3000","#0000ff","0.7"],["-0","#0000ff","0.5"],["0","#ff0000","0.5"],["3000","#ff0000","0.7"]]]'
data-columnspec='["Batt_Leistung:state"]'
data-title="Batterie Leistungswerte"
data-nofulldays="true"
data-daysago_start="-6H"
data-daysago_end="-9H"
data-width='1100'
data-height='600'>
</div>


ergibt das unten angehängte Ergebnis.
Ich denke da benötige ich noch gewaltig Nachhilfe von euch.

Nachtrag Überlegung:
Oder müsste ich hier das "state" Reading in zwei unabhängige userreadings (einmal negativ und einmal positiv) aufsplitten und damit den Chart versorgen?

Gruß Reinhard
Fhem 6.3 auf Raspberry Pi4 SSD mit Raspbian Bookworm, Homematic, Homematic IP, CCU3 mit RapberryMatic, WAGO 750-880, E3DC S10E Hauskraftwerk, E3DC Wallbox, my-PV AC ELWA-E Heizstab, Fritz!Box 7590, KIA Bluelinky

eki

Wenn Du das so wie in dem Link haben willst, brauchst Du auf jeden Fall 2 Readings. Du kannst das z.B. In FHEM über User Readings lösen. Die Definition könnte so aussehen:

attr Batt_Leistung userReadings negative:state.* {return (ReadingsVal($NAME,"state",0)<0?ReadingsVal($NAME,"state",0):0);}, positive:state.* {return (ReadingsVal($NAME,"state",0)>0?ReadingsVal($NAME,"state",0):0);}

Damit entstehen 2 neue Readings, die nur die negativen bzw. positiven Werte von state enthalten und ansonsten auf 0 sind.

Dann musst Du bei der Chart Definition dafür sorgen, dass ein Graph entsteht, der als obere Grenze die positiven Werte enthält und als untere Grenze die negativen. Das geht dann folgendermaßen:

data-columnspec =  '[["Batt_Leistung:positive","Batt_Leistung:negative"]]'

Die Definition von data-styles sieht OK aus.

Rewe2000

Hallo ecki,

irgendwie passt da bei mir in den Einstellungen noch etwas nicht. Grundsätzlich sieht der Chart so schon so ähnlich aus, aber die blaue Fläche wird (sporadisch ???) zu hoch gezeichnet. Der Fehler tritt unter Edge, Android und Firefox gleich auf.

Experimentiere ich mit den Parametern "data-minvalue" und "data-maxvalue" kann ich die Darstellung meistens berichtigen, aber da ich die einzelnen Zeitabschnitte optisch vergleichen will, kann ich nicht "auto" verwenden (auch unter "auto" tritt das Problem auf.

Anbei mein HTML Code des Charts:
<div data-type="chart"
data-device="Batt_Leistung"
data-get="Batterieladung_neg"
data-logdevice="DBLogging"
data-logfile="HISTORY"
data-legend='["Batterieladung positiv","Batterieladung negativ"]'
data-minvalue='-3000'
data-maxvalue='3000'
data-xticks='auto'
data-yticks='500'
data-yunit=' W'
        data-yunit_sec=' W'
data-style='[["fill",["-3000","#0000ff","0.7"],["-0","#0000ff","0.5"],["0","#ff0000","0.5"],["3000","#ff0000","0.7"]]]'
data-ptype='lines'
        data-columnspec='[["Batt_Leistung:Batterieladung_pos","Batt_Leistung:Batterieladung_neg"]]'
data-title="Batterie Leistungswerte"
data-nofulldays="true"
   data-timeranges='[
   ["1 Stunde","1h","now"],
   ["3 Stunden","3h","now"],
   ["6 Stunden","6h","now"],
   ["12 Stunden","12h","now"],
   ["24 Stunden","24h","now"],
   ["Heute","0D","-1D"],
   ["Gestern","1D","0D"],
   ["Aktuelle Woche","0W","-1W"],
   ["Letzte Woche","1W","0W"],
   ["Aktueller Monat","0M","-1M"],
   ["Letzter Monat","1M","0M"],
   ["Aktuelles Jahr","0Y","-1Y"],
   ["Letztes Jahr","1Y","0Y"]
   ]'
   data-width="1100"
   data-height="550"
   data-cursorgroup="1"
   data-scrollgroup="1"
   data-xticks="auto"
   data-title_class="legend">
</div>


Auch die vorliegenden Daten in der DBLog Datenbank sollten so passen, ich habe eben den angezeigten Bereich nach EXCEL exportiert und geprüft.
Die (derzeit) 2946 "positiven" Readings enthalten nur positive Werte von 0 bis 1636.
Die (derzeit) 2364 "negativen" Readings" enthalten nur 0 und negative Werte von 0 bis -2055.


Hast du da noch einen Tipp für mich?

Gruß Reinhard
Fhem 6.3 auf Raspberry Pi4 SSD mit Raspbian Bookworm, Homematic, Homematic IP, CCU3 mit RapberryMatic, WAGO 750-880, E3DC S10E Hauskraftwerk, E3DC Wallbox, my-PV AC ELWA-E Heizstab, Fritz!Box 7590, KIA Bluelinky

eki

Was heißt denn sporadisch, kannst Du da irgendwelche ,,Gesetzmäßigkeiten" sehen? Schick mal alle Infos, die ich brauche um das bei mir nachzustellen (Logfile Auszug, Chart Definition, Logfile Definition in FHEM), dann schau ich es mir mal an.

Rewe2000

Hallo ecki,

die fehlerhaften Farbflächen treten wirklich nicht vorhersehbar auf, einmal passt alles bei der Tagesdarstellung, betrachte ich z.B. nur die letzten 6 Stunden so läuft das "Blau" wieder über. Heute habe ich nur Minuswerte, da passt alles wieder, gehe ich in die Vergangenheit einige Seiten zurück, so tritt das Problem wieder auf.

Die einzige "Gesetzmäßigkeit", welche ich erkennen kann ist die, das Verhältnis von positiven und negativen Werten muss irgendwie in einem Verhältnis zueinander stehen (hilft dir wahrscheinlich nicht wirklich weiter).

Ich habe die Probleme in FUIP in einem HTML-Fenster, um auszuschließen, dass es von FUIP kommt, habe ich meinen HTML "Code" in eine einfache Seite unter FTUI eingebunden, auch hier treten die gleichen Fehler, wenn auch nicht bei den gleichen Zeiträumen auf.
Fällt dir noch etwas ein, wass ich bei mir noch testen könnte, wenn du den Browser vermutest, so könnte ich noch unter Crome testen?

Hier nun mein einfacher HTML-Code (index.html) unter FTUI:
<!DOCTYPE html>
<html>
<head>
        <!--
         /* FHEM tablet ui */
         /*
         * Just another dashboard for FHEM
         *
         * Version: 1.4.0
         * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
         * URL: https://github.com/knowthelist/fhem-tablet-ui
         *
         * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
         * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
         *
         * - create a new folder named 'tablet' in /<fhem-path>/www
         * - copy all files incl. sub folders into /<fhem-path>/www/tablet
         * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
         * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
         */
        -->
        <title>FHEM-Tablet-UI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="110">
        <meta name="widget_base_height" content="131">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<meta name="gridster_disable" content="1">


        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

</head>
<body>

<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="10" data-sizey="5">
        <header>Chart Test</header>
<div class="top-space">Batterieleistung</div>
<div data-type="chart"
data-device="Batt_Leistung"
data-logdevice="FileLog_Batterie"
data-logfile="-"
data-legend='["Batterieladung positiv","Batterieladung negativ"]'
data-minvalue='-3000'
data-maxvalue='3000'
data-xticks='auto'
data-yticks='500'
data-yunit=' W'
        data-yunit_sec=' W'
data-style='[["fill",["-3000","#0000ff","0.7"],["-0","#0000ff","0.5"],["0","#ff0000","0.5"],["3000","#ff0000","0.7"]]]'
data-ptype='["lines","lines"]'
        data-columnspec='[["4:Batterieladung_pos","4:Batterieladung_neg"]]'
data-title="Batterie Leistungswerte"
data-nofulldays="true"
   data-timeranges='[
   ["1 Stunde","1h","now"],
   ["3 Stunden","3h","now"],
   ["6 Stunden","6h","now"],
   ["12 Stunden","12h","now"],
   ["24 Stunden","24h","now"],
   ["Heute","0D","-1D"],
   ["Gestern","1D","0D"],
   ["Aktuelle Woche","0W","-1W"],
   ["Letzte Woche","1W","0W"],
   ["Aktueller Monat","0M","-1M"],
   ["Letzter Monat","1M","0M"],
   ["Aktuelles Jahr","0Y","-1Y"],
   ["Letztes Jahr","1Y","0Y"]
   ]'
   data-width="1100"
   data-height="550"
   data-cursorgroup="1"
   data-scrollgroup="1"
   data-xticks="auto"
   data-title_class="legend">
</div>

</li>

</ul>
</div>
</body>
    <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
    <script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
    <script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    End for WebViewControl -->
</html>


Um dir das Nachstellen so einfach wie möglich zu machen, habe ich aus meiner DBLog Datenbank ein Logfile erzeugt und dieses hänge ich als Dateianhang hier mit an.

LogDevice als RAW Definition:
defmod FileLog_Batterie FileLog ./log/FileLog_Batterie-%Y-%m.log (Batt_Leistung:Batterieladung_pos:.*|Batt_Leistung:Batterieladung_neg:.*)
attr FileLog_Batterie DbLogExclude .*
attr FileLog_Batterie nrarchive 2
attr FileLog_Batterie room Hofanlagen,OG_Flur


Den angehängten Chart habe ich aus der anhängenden Logdatei unter FTUI (nicht FUIP) erstellt!
Wenn du noch was benötigen solltest, melde dich bitte.

Vielen Dank
Reinhard
Fhem 6.3 auf Raspberry Pi4 SSD mit Raspbian Bookworm, Homematic, Homematic IP, CCU3 mit RapberryMatic, WAGO 750-880, E3DC S10E Hauskraftwerk, E3DC Wallbox, my-PV AC ELWA-E Heizstab, Fritz!Box 7590, KIA Bluelinky