aus Tabellen Werten ein Graphen darstellen

Saranger

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

liv-in-sky

@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 )

Image 072.png

Image 073.png

liv-in-sky

@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));

Image 075.png

es fehlt eigentlich nur das einlesen der daten anstatt der constanten input !

mickym

Was nützt Du denn für eine Visualiisierung? Das NodeRed Dashboard?

Saranger

@mickym ja hab ich vergessen zu erwähnen, soll im nodered Dashboard dargestellt werden sorry.

liv-in-sky

@saranger

unbedingt erwähnen beim nächsten mal - dann spar ich mir die arbeit !!!!!!

mickym

@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. ;)

Saranger

@liv-in-sky ja sorry hab ich leider zu spät gesehen, dacht ich war im nodered forum.

liv-in-sky

ok - mein fehler , dass schau ich nie an - muss ich mich umgewöhnen

Saranger

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

mickym

@saranger So hier mal der Flow für die Chart Node. ;)

Statt der InjectNode musst halt deine iobroker-In Node verwenden:

[
   {
       "id": "fd717360f0186d05",
       "type": "change",
       "z": "1983aa28392732ca",
       "name": "",
       "rules": [
           {
               "t": "set",
               "p": "payload",
               "pt": "msg",
               "to": "[\t   {\t       \"series\":[\"Power\"],\t       \"data\": [\t           [\t               payload.{\t                   \"x\": $toMillis(Time,'[Y]-[M]-[D] [H]:[m]:[s]'),\t                   \"y\" : Power ~> $replace(\",\",\".\") ~> $number()\t                }\t            ]\t       ]\t}\t]",
               "tot": "jsonata"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 530,
       "y": 2440,
       "wires": [
           [
               "9703d36ee0f5ad21"
           ]
       ]
   },
   {
       "id": "9703d36ee0f5ad21",
       "type": "ui_chart",
       "z": "1983aa28392732ca",
       "name": "",
       "group": "2ac8e3fa.8b8584",
       "order": 5,
       "width": "12",
       "height": "11",
       "label": "Power",
       "chartType": "line",
       "legend": "true",
       "xformat": "dd HH:mm",
       "interpolate": "linear",
       "nodata": "",
       "dot": false,
       "ymin": "",
       "ymax": "",
       "removeOlder": 1,
       "removeOlderPoints": "",
       "removeOlderUnit": "3600",
       "cutout": 0,
       "useOneColor": false,
       "useUTC": false,
       "colors": [
           "#1f77b4",
           "#aec7e8",
           "#ff7f0e",
           "#2ca02c",
           "#98df8a",
           "#d62728",
           "#ff9896",
           "#9467bd",
           "#c5b0d5"
       ],
       "outputs": 1,
       "useDifferentColor": false,
       "className": "",
       "x": 710,
       "y": 2440,
       "wires": [
           []
       ]
   },
   {
       "id": "2ac8e3fa.8b8584",
       "type": "ui_group",
       "name": "Default",
       "tab": "ebb1ed1c.5ebe2",
       "order": 1,
       "disp": true,
       "width": "12",
       "collapse": false
   },
   {
       "id": "ebb1ed1c.5ebe2",
       "type": "ui_tab",
       "name": "Charts",
       "icon": "dashboard",
       "disabled": false,
       "hidden": false
   }
]

Wenn du keine Legende oder Beschriftung willst, dann einfach in der Node entsprechend eintragen:

Saranger

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

mickym

@saranger

So hier nochmal mit Inject- Node:

[
   {
       "id": "9dedd3abd6ec8e15",
       "type": "inject",
       "z": "1983aa28392732ca",
       "name": "",
       "props": [
           {
               "p": "payload"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "[{\"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\"}]",
       "payloadType": "json",
       "x": 330,
       "y": 2440,
       "wires": [
           [
               "fd717360f0186d05"
           ]
       ]
   },
   {
       "id": "fd717360f0186d05",
       "type": "change",
       "z": "1983aa28392732ca",
       "name": "",
       "rules": [
           {
               "t": "set",
               "p": "payload",
               "pt": "msg",
               "to": "[\t   {\t       \"series\":[\"Power\"],\t       \"data\": [\t           [\t               payload.{\t                   \"x\": $toMillis(Time,'[Y]-[M]-[D] [H]:[m]:[s]'),\t                   \"y\" : Power ~> $replace(\",\",\".\") ~> $number()\t                }\t            ]\t       ]\t}\t]",
               "tot": "jsonata"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 530,
       "y": 2440,
       "wires": [
           [
               "9703d36ee0f5ad21"
           ]
       ]
   },
   {
       "id": "9703d36ee0f5ad21",
       "type": "ui_chart",
       "z": "1983aa28392732ca",
       "name": "",
       "group": "2ac8e3fa.8b8584",
       "order": 5,
       "width": "12",
       "height": "11",
       "label": "",
       "chartType": "line",
       "legend": "false",
       "xformat": "HH:mm:ss",
       "interpolate": "linear",
       "nodata": "",
       "dot": false,
       "ymin": "",
       "ymax": "",
       "removeOlder": 1,
       "removeOlderPoints": "",
       "removeOlderUnit": "3600",
       "cutout": 0,
       "useOneColor": false,
       "useUTC": false,
       "colors": [
           "#1f77b4",
           "#aec7e8",
           "#ff7f0e",
           "#2ca02c",
           "#98df8a",
           "#d62728",
           "#ff9896",
           "#9467bd",
           "#c5b0d5"
       ],
       "outputs": 1,
       "useDifferentColor": false,
       "className": "",
       "x": 710,
       "y": 2440,
       "wires": [
           []
       ]
   },
   {
       "id": "2ac8e3fa.8b8584",
       "type": "ui_group",
       "name": "Default",
       "tab": "ebb1ed1c.5ebe2",
       "order": 1,
       "disp": true,
       "width": "12",
       "collapse": false
   },
   {
       "id": "ebb1ed1c.5ebe2",
       "type": "ui_tab",
       "name": "Charts",
       "icon": "dashboard",
       "disabled": false,
       "hidden": false
   }
]

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.

mickym

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

mickym

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?

Saranger

@mickym ich rätsel gerade wo ich das in der change node einfüge das nicht so einfach für mich^^.

mickym

@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?

Homoran

@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

mickym

@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? :grin:

Homoran

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

Wäre aber schön!
Ich gehe immer über Unread und nie über die Kategorie in einen Post

Community Forum

NEWS

aus Tabellen Werten ein Graphen darstellen

Support us

708

32.6k

82.2k

1.3m