aus Tabellen Werten ein Graphen darstellen
-
Guten MOrgen zusammen,
ich würde gern von meinem IOBroker Adapter PV Forcast den FC für die nächsten 24h darstellen lassen.
Der Adapter gibt entweder direkt einen Json Graph aus oder die Werte in einem String Format. Kann man das relativ einfach umsetzen?
[{"Time":"2023-04-17 06:19:59","Power":"0,000"},{"Time":"2023-04-17 07:00:00","Power":"0,263"},{"Time":"2023-04-17 08:00:00","Power":"0,635"},{"Time":"2023-04-17 09:00:00","Power":"0,895"},{"Time":"2023-04-17 10:00:00","Power":"1,489"},{"Time":"2023-04-17 11:00:00","Power":"2,020"},{"Time":"2023-04-17 12:00:00","Power":"2,105"},{"Time":"2023-04-17 13:00:00","Power":"2,080"},{"Time":"2023-04-17 14:00:00","Power":"1,999"},{"Time":"2023-04-17 15:00:00","Power":"1,965"},{"Time":"2023-04-17 16:00:00","Power":"1,942"},{"Time":"2023-04-17 17:00:00","Power":"1,676"},{"Time":"2023-04-17 18:00:00","Power":"0,633"},{"Time":"2023-04-17 19:00:00","Power":"0,328"},{"Time":"2023-04-17 20:00:00","Power":"0,098"},{"Time":"2023-04-17 20:06:30","Power":"0,000"},{"Time":"2023-04-18 06:18:04","Power":"0,000"},{"Time":"2023-04-18 07:00:00","Power":"0,425"},{"Time":"2023-04-18 08:00:00","Power":"0,844"},{"Time":"2023-04-18 09:00:00","Power":"0,962"},{"Time":"2023-04-18 10:00:00","Power":"1,071"},{"Time":"202...Danke euch.
Saranger
-
relativ einfach ist anders - aber damit kann man über ein script graphen erzeugen - material design widgets
https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
du musst das ungefähr so über ein script umwandeln
{"axisLabels": ["06:19:59", "07:00:00", "08:00:00"], "graphs": [{"data": [0,0.263,1.999]}]}und das dann in einen dp schreiben
das widget macht dann das daraus (habe ich nicht richtig formatiert - geht im widget )
-
@saranger
hier das script:const input = [{"Time":"2023-04-17 06:19:59","Power":"0,000"},{"Time":"2023-04-17 07:00:00","Power":"0,263"},{"Time":"2023-04-17 08:00:00","Power":"0,635"},{"Time":"2023-04-17 09:00:00","Power":"0,895"},{"Time":"2023-04-17 10:00:00","Power":"1,489"},{"Time":"2023-04-17 11:00:00","Power":"2,020"},{"Time":"2023-04-17 12:00:00","Power":"2,105"},{"Time":"2023-04-17 13:00:00","Power":"2,080"},{"Time":"2023-04-17 14:00:00","Power":"1,999"},{"Time":"2023-04-17 15:00:00","Power":"1,965"},{"Time":"2023-04-17 16:00:00","Power":"1,942"},{"Time":"2023-04-17 17:00:00","Power":"1,676"},{"Time":"2023-04-17 18:00:00","Power":"0,633"},{"Time":"2023-04-17 19:00:00","Power":"0,328"},{"Time":"2023-04-17 20:00:00","Power":"0,098"},{"Time":"2023-04-17 20:06:30","Power":"0,000"},{"Time":"2023-04-18 06:18:04","Power":"0,000"},{"Time":"2023-04-18 07:00:00","Power":"0,425"},{"Time":"2023-04-18 08:00:00","Power":"0,844"},{"Time":"2023-04-18 09:00:00","Power":"0,962"},{"Time":"2023-04-18 10:00:00","Power":"1,071"}]; const myDatapoint='0_userdata.0.CONTROL-OWN.AAATEST.TestString6' // Extrahieren der Zeitstempel und Leistungswerte aus der Eingabe const times = input.map(obj => obj.Time); const powers = input.map(obj => parseFloat(obj.Power.replace(',', '.')).toFixed(2)); // Erstellen der Achsenbeschriftungen für den Output const axisLabels = times.map(time => time.substring(11, 16)); // Konvertieren der Leistungswerte in eine geeignete Form für den Output const data = powers.map(power => parseFloat(power)); // Bestimmung der minimalen und maximalen Y-Achsen-Werte const yAxis_min = 0; const yAxis_max = Math.ceil(Math.max(...data) / 1) * 1; const yAxis_step = 1; // Erstellen des Output-Objekts const output = { axisLabels: axisLabels, graphs: [{ data: data, yAxis_min: yAxis_min, yAxis_max: yAxis_max, yAxis_step: yAxis_step, datalabel_show: false }] }; setState(myDatapoint,JSON.stringify(output));
es fehlt eigentlich nur das einlesen der daten anstatt der constanten input !
-
Was nützt Du denn für eine Visualiisierung? Das NodeRed Dashboard?
-
@mickym ja hab ich vergessen zu erwähnen, soll im nodered Dashboard dargestellt werden sorry.
-
unbedingt erwähnen beim nächsten mal - dann spar ich mir die arbeit !!!!!!
-
@saranger Gut dann kannst Du es natürlich mit der Chart Node darstellen.
https://stevesnoderedguide.com/using-the-node-red-chart-node
Ich helfe Dir gleich mit einem Flow.
-
@liv-in-sky ja sorry hab ich leider zu spät gesehen, dacht ich war im nodered forum.
-
ok - mein fehler , dass schau ich nie an - muss ich mich umgewöhnen
-
@mickym said in aus Tabellen Werten ein Graphen darstellen:
@saranger Gut dann kannst Du es natürlich mit der Chart Node darstellen.
https://stevesnoderedguide.com/using-the-node-red-chart-node
Ich helfe Dir gleich mit einem Flow.
danke dir
-
@saranger So hier mal der Flow für die Chart Node.
Statt der InjectNode musst halt deine iobroker-In Node verwenden:
Wenn du keine Legende oder Beschriftung willst, dann einfach in der Node entsprechend eintragen:
-
@mickym ich hab das mal eingefügt, allerdings bleibt der Chart leer. Wenn ich die debug aber an die inject node hänge wird beim neu laden die debug node gfüllt.
-
So hier nochmal mit Inject- Node:
Jetzt müsstest Du in jedem Fall was sehen. Wenn das Array in der Inject Node anders ist, als was aus Deinem Datenpunkt kommt - musst ggf. noch eine JSON Node dazwischenschalten.
-
das Einzige was nicht stimmt ist die Zeit, da das Teil denkt es ist UTC Zeit die eingegeben wurde und dann 2 Stunden draufrechnet.
Um die Zeit also anzupassen:
den JSONATA Code noch wie folgt ändern:
[ { "series":["Power"], "data": [ [ payload.{ "x": $toMillis(Time & " GMT+2:00",'[Y]-[M]-[D] [H]:[m]:[s] [z]'), "y" : Power ~> $replace(",",".") ~> $number() } ] ] } ]Die Formatierung bzgl. der Zeitformate entnimmst Du bitte hier:
https://www.w3.org/TR/xpath-functions-31/#func-format-date -
Um sich nicht mit Zeitzonen rum zu quälen, ist die Moments Bibliothek besser. Also Du kannst die Change Node wie folgt abändern (warum das valueOf() für die Umwandlung in ms nicht funktioniert - weiß ich nicht).
[ { "series":["Power"], "data": [ [ payload.{ "x": $moment(Time,("YYYY-MM-DD HH:mm:ss")).unix()*1000, "y" : Power ~> $replace(",",".") ~> $number() } ] ] } ]Funktioniert es denn nun?
-
@mickym ich rätsel gerade wo ich das in der change node einfüge das nicht so einfach für mich^^.
-
@saranger Dann zeig halt mal Deinen ganzen Flow (bzw. mach halt einen Screenshot) - und wo dieses Objekt dass Du oben gepostet hast, rauskommt. Funktioniert denn der Chart mit meiner Inject Node?
@saranger sagte in aus Tabellen Werten ein Graphen darstellen:
@mickym ich rätsel gerade wo ich das in der change node einfüge das nicht so einfach für mich^^.
Im Prinzip, wenn das Array mit den Datenpunkten so rauskommt, wie oben - einfach vor die Chart Node. Wenn Du mein Flow importiert hast, brauchst doch nur die Inject Node ersetzen?
-
@saranger sagte in aus Tabellen Werten ein Graphen darstellen:
dacht ich war im nodered forum.
im Titel wäre besser. Die Breadcrumbs übersieht man meist
-
@homoran Na ich nicht
- Sonst wüsste ich ja nicht, wann ich puzzeln muss oder Nodes zeichnen darf. Ich hab mich dann meist entschuldigt, wenn ich festgestellt habe, dass ich mich im falschen Unterforum befinde. Und die meisten Blocklies schreiben auch nicht immer Blockly in die Überschrift. Oder müssen sich hier Minderheiten besonderen Regeln unterwerfen? 
-
@mickym sagte in aus Tabellen Werten ein Graphen darstellen:
die meisten Blocklies schreiben auch nicht immer Blockly in die Überschrift.
wievielfache Negation ist das denn
Wäre aber schön!
Ich gehe immer über Unread und nie über die Kategorie in einen Post
