# Plotting values wont work

**URL:** <https://discourse.nodered.org/t/plotting-values-wont-work/59829>\
**Category:** General\
**Created:** [14 March 2022 08:26 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829 "2022-03-14T08:26:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olivia](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olivia/32/57161_2.png) [@Olivia](https://discourse.nodered.org/u/Olivia)\
**Post date:** [14 March 2022 08:26 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/1 "2022-03-14T08:26:28Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f4522569e5f98f976878ce0ae52f34695aceb26.png)

```auto
[{"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:

```auto
{"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

---

<div class="post-metadata">

**Author:** ![Olivia](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olivia/32/57161_2.png) [@Olivia](https://discourse.nodered.org/u/Olivia)\
**Post date:** [14 March 2022 08:40 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/2 "2022-03-14T08:40:08Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1928b4f5c982701051d374b7654da54b5ab318c.png)

---

<div class="post-metadata">

**Author:** ![Olivia](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olivia/32/57161_2.png) [@Olivia](https://discourse.nodered.org/u/Olivia)\
**Post date:** [14 March 2022 09:02 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/3 "2022-03-14T09:02:36Z")

</div>

Updated script:

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 March 2022 09:09 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/4 "2022-03-14T09:09:15Z")

</div>

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`

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc38aa01e28d454e8a9f0f02f5d781ff44238087.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fe5e7eb90bb929708f9fa43f230d876220eac10.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f39a7c16c472b56e04233dcb0520c819e351887.png)

### Demo

![chrome_7LnAzsYTmO](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf84526fb4906f3589ce25b3be4b7ae26594195e.gif)

### The function code...

```auto
//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]];

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 March 2022 09:24 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/5 "2022-03-14T09:24:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [14 March 2022 13:49 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/6 "2022-03-14T13:49:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 March 2022 13:49 UTC](https://discourse.nodered.org/t/plotting-values-wont-work/59829/7 "2022-03-28T13:49:15Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.