Plotting values wont work

[Olivia]

Hello evryone,

i have a script where i wanna print the output. I tried many things, from a chart to a table but i cant print the output.

i prefer to see te values is a linechart. but i thing it will be to difficult to do that because the values change every second.

can anyone help me out please

[{"id":"0a37fbed066ab815","type":"mqtt in","z":"5eb1333e969a781e","name":"Real-time energy data (1-second data)","topic":"servicelocation/dff5be04-8398-4c18-8ccb-d1bd13eb46f7/etc/measuredvalues","qos":"2","datatype":"json","broker":"2197f44a.ad9f2c","nl":false,"rap":true,"rh":0,"inputs":0,"x":170,"y":40,"wires":[["ad27b5f1ced3c088","2020359f83190249"]]},{"id":"ad27b5f1ced3c088","type":"function","z":"5eb1333e969a781e","name":"Stromen","func":"\nconst rotated = {\n    Stroom_Net_L1: [],\n    Stroom_Net_L2: [],\n    Stroom_Net_L3: [],\n    Stroom_Pv_L1: [],\n    Stroom_Pv_L2: [],\n    Stroom_Pv_L3: [],\n}\n/*\nconst chartData = [{\n    \"series\": [\"Net L1\", \"Net L2\", \"Net L3\", \"PV L1\", \"PV L2\", \"PV L3\"],\n    \"data\": [\n        [],\n        [],\n        [],\n        [],\n        [],\n        []\n    ],\n    \"labels\": [\"\"]\n}]*/\n\nconst APIdata = msg.payload.ctCurrents;\nfor (var i = 0; i < APIdata.length; i++) {\n\n    rotated.Stroom_Net_L1[i] = APIdata[0]\n    rotated.Stroom_Net_L2[i] = APIdata[1]\n    rotated.Stroom_Net_L3[i] = APIdata[2]\n    rotated.Stroom_Pv_L1[i] = APIdata[3]\n    rotated.Stroom_Pv_L2[i] = APIdata[4]\n    rotated.Stroom_Pv_L3[i] = APIdata[5]\n /*   \n    chartData[0].data[0].push({\"x\": rotated.Tijd[i],  \"y\": rotated.INet_L1[i] })\n    chartData[0].data[1].push({\"x\": rotated.Tijd[i],  \"y\": rotated.INet_L2[i] })\n    chartData[0].data[2].push({\"x\": rotated.Tijd[i],  \"y\": rotated.INet_L3[i] })\n    chartData[0].data[3].push({\"x\": rotated.Tijd[i],  \"y\": rotated.IPv_L1[i] })\n    chartData[0].data[4].push({\"x\": rotated.Tijd[i],  \"y\": rotated.IPv_L2[i] })\n    chartData[0].data[5].push({\"x\": rotated.Tijd[i],  \"y\": rotated.IPv_L3[i] })*/\n}\n\n//msg.rotatedData = rotated;\nmsg.payload = rotated;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":40,"wires":[["2020359f83190249","57d7aa3163732d75"]]},{"id":"2020359f83190249","type":"debug","z":"5eb1333e969a781e","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":80,"wires":[]},{"id":"57d7aa3163732d75","type":"ui_template","z":"5eb1333e969a781e","group":"1f205f83897b88ef","name":"","order":1,"width":"6","height":"6","format":"<style>\ntable{\n    background:white;\n    border: 1px;\n    padding: 2px;\n}\nth, td{ \n    text-align: left;\n    border: 1px;\n    padding: 2px;\n}\n\n</style><table>\n    <tr>\n        <th ng-repeat=\"(key, value) in msg.payload\">{{key}}</th>\n    </tr>\n    <tr ng-repeat=\"(index,row) in msg.payload.Naam \">\n        <td>{{msg.payload.Stroom_Net_L1}}</td>\n        <td>{{msg.payload.Stroom_Net_L2}}</td>\n        <td>{{msg.payload.Stroom_Net_L3}}</td>\n        <td>{{msg.payload.Stroom_PV_L1}}</td>\n        <td>{{msg.payload.Stroom_PV_L2}}</td>\n        <td>{{msg.payload.Stroom_PV_L3}}</td>\n    </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":580,"y":40,"wires":[["c6961f92cce4dbb5"]]},{"id":"c6961f92cce4dbb5","type":"debug","z":"5eb1333e969a781e","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":750,"y":40,"wires":[]},{"id":"f3d10892b94bf851","type":"ui_chart","z":"5eb1333e969a781e","d":true,"name":"","group":"1f205f83897b88ef","order":1,"width":"6","height":"7","label":"Stromen","chartType":"line","legend":"true","xformat":"","interpolate":"linear","nodata":"","dot":true,"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":760,"y":80,"wires":[[]]},{"id":"2197f44a.ad9f2c","type":"mqtt-broker","name":"","broker":"192.168.0.105","port":"1883","clientid":"","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"1f205f83897b88ef","type":"ui_group","name":"Stromen","tab":"66b359519dbdf72d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"66b359519dbdf72d","type":"ui_tab","name":"Real time waarden","icon":"dashboard","order":17,"disabled":false,"hidden":true}]

the values from the mqtt reader:

{"totalPower":1485.592,"solarPower":2104.354,"importPower":0,"exportPower":618.761,"storagePower":0,"ctActivePowers":[596.749,-147.636,-1067.874,450.205,474.27,468.78,711.097],"ctCurrents":[3.022,0.731,4.574,1.958,2.057,2.023,3.032],"voltages":[236.5,236.7,237.5],"gridCurrents":[3.022,0.731,4.574],"ctPublishIndexes":[0,1,2,3,4,5,6],"voltagePhaseIds":[0,1,2,0,1,2,2],"gridPublishIndexes":[0,1,2],"gridActivePowers":[596.749,-147.636,-1067.874]}

Thanks in advance

[Olivia]

i would like to see something like this but instead of just 1 value, a constant changing linechart

[Olivia]

Updated script:

[{"id":"0a37fbed066ab815","type":"mqtt in","z":"5eb1333e969a781e","name":"Real-time energy data (1-second data)","topic":"servicelocation/dff5be04-8398-4c18-8ccb-d1bd13eb46f7/etc/measuredvalues","qos":"2","datatype":"json","broker":"2197f44a.ad9f2c","nl":false,"rap":true,"rh":0,"inputs":0,"x":170,"y":40,"wires":[["ad27b5f1ced3c088","2020359f83190249"]]},{"id":"ad27b5f1ced3c088","type":"function","z":"5eb1333e969a781e","name":"Stromen","func":"\nconst rotated = {\n    Tijd: [],\n    Stroom_Net_L1: [],\n    Stroom_Net_L2: [],\n    Stroom_Net_L3: [],\n    Stroom_Pv_L1: [],\n    Stroom_Pv_L2: [],\n    Stroom_Pv_L3: [],\n}\n\nconst chartData = [{\n    \"series\": [\"Net L1\", \"Net L2\", \"Net L3\", \"PV L1\", \"PV L2\", \"PV L3\"],\n    \"data\": [\n        [],\n        [],\n        [],\n        [],\n        [],\n        []\n    ],\n    \"labels\": [\"\"]\n}]\n\nconst APIdata = msg.payload.ctCurrents;\nfor (var i = 0; i < APIdata.length; i++) {\n    rotated.Tijd= Date()\n    rotated.Stroom_Net_L1[i] = APIdata[0]\n    rotated.Stroom_Net_L2[i] = APIdata[1]\n    rotated.Stroom_Net_L3[i] = APIdata[2]\n    rotated.Stroom_Pv_L1[i] = APIdata[3]\n    rotated.Stroom_Pv_L2[i] = APIdata[4]\n    rotated.Stroom_Pv_L3[i] = APIdata[5]\n  \n    chartData[0].data[0].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Net_L1[i] })\n    chartData[0].data[1].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Net_L2[i] })\n    chartData[0].data[2].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Net_L3[i] })\n    chartData[0].data[3].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Pv_L1[i] })\n    chartData[0].data[4].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Pv_L2[i] })\n    chartData[0].data[5].push({\"x\": rotated.Tijd[i],  \"y\": rotated.Stroom_Pv_L3[i] })\n}\n\nmsg.rotatedData = rotated;\nmsg.payload = chartData;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":40,"wires":[["2020359f83190249","f3d10892b94bf851"]]},{"id":"2020359f83190249","type":"debug","z":"5eb1333e969a781e","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":490,"y":120,"wires":[]},{"id":"f3d10892b94bf851","type":"ui_chart","z":"5eb1333e969a781e","name":"","group":"1f205f83897b88ef","order":1,"width":"6","height":"7","label":"Stromen","chartType":"line","legend":"true","xformat":"","interpolate":"linear","nodata":"","dot":true,"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":600,"y":40,"wires":[[]]},{"id":"2197f44a.ad9f2c","type":"mqtt-broker","name":"","broker":"192.168.0.105","port":"1883","clientid":"","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"1f205f83897b88ef","type":"ui_group","name":"Stromen","tab":"66b359519dbdf72d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"66b359519dbdf72d","type":"ui_tab","name":"Real time waarden","icon":"dashboard","order":17,"disabled":false,"hidden":true}]

[Steve-Mcl]

It looks like you are attempting to send a live data source in the format of historical data (i.e. an array of data to populate the chart points for a time range) when in fact you only need to send a value in msg.payload and the series name in msg.topic. It is as simple as that.

As the chart help says, you can plot live values by sending the value in msg.payload and the series name in msg.topic

So simply move the value of L1 into msg.payload and set the topic. This can easily be achieved with 3 change nodes.

Here is a flow showing how you can do the same in a function node (as your original was a function)

Demo

The function code...

//create 3 new messages and set the topic/payload
const l1 = {
    payload: msg.payload.voltages[0],
    topic: "L1"
}
const l2 = {
    payload: msg.payload.voltages[1],
    topic: "L2"
}
const l3 = {
    payload: msg.payload.voltages[2],
    topic: "L3"
}
//return 3 msgs in one go
//its documented here: https://nodered.org/docs/user-guide/writing-functions#multiple-messages
return [[l1,l2,l3]];

[Steve-Mcl]

One thing I will add.

Putting data into a chart every second will mean your 1h plot will have 60*60 (3600) points

In terms of your display, to see 3600 actual plots, you would need a graph width of 3600 pixels

Additionally, 3600 * 3 == 10800 total plots.

This is not only pointless (you wont be able to read the values) but can slow your browser to a crawl.

The better solution is to either slow down the update rate (e.g. every 60 sec) or use something to average the data out & minimise the number of msgs going to the chart.

[ScheepersJohan]

@Olivia

every second

If you want this type of resolution, maybe use node-red to wright to InfluxDB and Grafana to display.

You can ifram Grafana in nore-red dashboard, but you most probably will run into CPU usage issues, due to your sampling rate.