# Plot data in a dashboard chart

**URL:** <https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565>\
**Category:** General\
**Created:** [11 February 2020 21:01 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565 "2020-02-11T21:01:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabio](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@fabio](https://discourse.nodered.org/u/fabio)\
**Post date:** [11 February 2020 21:01 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/1 "2020-02-11T21:01:41Z")

</div>

![plottare](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c090bac79147ff2fa3a674be0fd3d24eda672f12.png)  
Hi,i'm a novice with nodered. I want to plot the output of my pythonshell (in the image my outputs are "media1","media2",etc..) in a chart of a dashboard. How can i do this operation?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 February 2020 22:15 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/2 "2020-02-11T22:15:17Z")

</div>

So I'm sure you read the info tab for the ui-chart node and hopefully tried some of the [example flows](https://flows.nodered.org/search?term=chart&type=flow) so you could understand how it works.

With that in mind, what don't you understand?

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [11 February 2020 23:40 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/3 "2020-02-11T23:40:22Z")

</div>

Have you looked at my suggestion in your previous topic? Rather than printing the raw output to stdout, print the output as json string. Every time you print a line, it gets added to the `msg.payload` coming out of your pythonshell node. Meaning that in order to use it you have to split lines first, then parse the context. If instead you were to format your **entire** output to a python dictionary, then call json.dumps on it and print that, you can convert that single string to an object back in node-red through the JSON node. You can then use regular nodes to get the different outputs out and plot them to a chart, see the link in Paul’s message for that.  
But keep in mind for that to work, you have to deliver properly formatted input first.

Context for others reading this:

> [@Python function](https://discourse.nodered.org/t/python-function/21510/12):
>
> Thank you. I got this thing in the python code and it still works when it runs.I also added the json parser node. Now i have no idea of what i can do to plot my array in a chart of the dashboard.

---

<div class="post-metadata">

**Author:** ![fabio](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@fabio](https://discourse.nodered.org/u/fabio)\
**Post date:** [12 February 2020 11:24 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/4 "2020-02-12T11:24:10Z")

</div>

I followed your suggestion and i did this on my python code (in the photos there are my python code and the flow on nodered). I also added my python file in a txt file in order to share it. As a first step i want to plot only “media1” array  
in a chart of a dashboard.

 ![F85999B7FAF149768F3183FE2AA58F04.png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/677f06bdf711468707faf594c72c7993f90d2513.png)

 ![Screenshot (7).png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96fd9e4bd84668b649538591a4baecb8979f4d8c.png)

 ![Screenshot (8).png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/804a1fd223a00e36c89127763bdf7d39baa6970d.png)

[provaa.txt](https://discourse.nodered.org/uploads/short-url/hI9lMuBTwRZyu6kdEYTRsnhsDkQ.txt) (4.77 KB)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [12 February 2020 15:17 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/5 "2020-02-12T15:17:42Z")

</div>

Hi Fabio, I responded above to this exact post in your other topic, based on the screenshots you posted in here as well.  
I may have (wrongly) assumed that you have Python experience based on how much you were aiming at using Python nodes. You included the screenshot of your python code in the iPython GUI, but have you tried running it there yet? The output you see on the console is the exact output coming out in `msg.payload` when you run it in Node-RED.

In Python, a call to the print function results in a line of output on the console, ended with a line break. In your node-red output in the debug bar you might see those displayed as little arrows. What you're printing now is text, a string with an explanation really, followed by an array, for example `print('media1 vale', media1)`. Since `media1` is an array, Python's print function is friendly enough to print it looking like an array, so it will look in the output as `media1 vale [-5, -5, -5]`. However, in order to plot it, you only need the actual values, namely the array `[-5, -5, -5]`. At the very end of your code you import the json library, and add an extra print call doing the `json.dumps` of the `media1` array. That in itself would be a good way to output it for node-red to load, **however** , since prior to that you have those other print calls Node-RED isn't able to read it as JSON, because the content directly above it in that same `msg.payload` is not part of that JSON.

Instead, and I'm not writing it for you but to give you an idea, you would need to create a dictionary containing all the values you'd like to output.

```auto
import json

# your actual code here

output = {
    'media1': media1,
    # ...
    'sigma2': sig2,
    # ...
}
print(json.dumps(output))

```

The rest of your print function calls would be removed, otherwise it's not helping. That means that the only output to the console becomes that one `print(json.dumps(...))`, resulting in a single JSON object being printed. Next, it can be read through the JSON node in Node-RED, giving you that same object in array form. Hang a debug node behind it to see the actual output. An even more advanced version that you could use later for the chart is rather than having a string key and array value type of dictionary as I've shown above, to use a string key with a dictionary value, where this inner dictionary has a title/name property/key, and another one for the output value. That way you can use that name as label for the chart.

for example:

```auto
output = {
    'media1': {
        'name': 'media1 vale',
        'value': media1
    },
    # ...
    'modellomu': {
         'name': 'modellomu è', 
         'value': modellomu
    }
}

```

Start there, and see if you can understand it and do the rest yourself.

---

<div class="post-metadata">

**Author:** ![fabio](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@fabio](https://discourse.nodered.org/u/fabio)\
**Post date:** [12 February 2020 19:24 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/6 "2020-02-12T19:24:02Z")

</div>

I did it and i obtain the string either in the console and in the debug but when i connect the JSON node to the chart i don’t obtait the plot in the dashboard. I also tried to print only the last iteration (in order to have one string)  
but nothing. I also changed some properties of the json parser (screenshot 12)and in the debug i obtained the array but there is no plot in the chart of the dashboard. I have no idea of how to do this plot.

Posta]([https://go.microsoft.com/fwlink/?LinkId=550986](https://go.microsoft.com/fwlink/?LinkId=550986)) per Windows 10

 ![F85999B7FAF149768F3183FE2AA58F04.png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/677f06bdf711468707faf594c72c7993f90d2513.png)

 ![Screenshot (9).png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/eebf34f9db3aa8f898cc3680097a60adf3e17f31.png)

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

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

 ![Screenshot (12).png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20501487dd070af6af1789738bcc155e55ef729c.png)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [12 February 2020 19:45 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/7 "2020-02-12T19:45:37Z")

</div>

Congratulations, you've now managed to get the data in a format Node-RED can read. Now follow the instructions Paul posted above ([Plot data in a dashboard chart](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/2)), specifically in reading the info tab for the ui-chart node.

 ![Screenshot 2020-02-12 at 20.43.45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec3e05190e5080522ec378c05a123cb7fbe8b3b7.png)  

> <https://github.com/node-red/node-red-dashboard/blob/master/Charts.md>

  
Since your data is complete, check that link above. It shows how to do print it on the chart. Your next step is setting up a function node or change node or whatever floats your boat between the JSON node and the chart node to properly format the data into the format the chart node needs following this.

---

<div class="post-metadata">

**Author:** ![fabio](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@fabio](https://discourse.nodered.org/u/fabio)\
**Post date:** [12 February 2020 20:44 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/8 "2020-02-12T20:44:01Z")

</div>

i don't know exactly what I have to do. If i put a function what I have to do? I have to convert my data to what? or if i use a change node i have to change my msg.payload in what?  
I tried to use that function in the screenshot (with that error that I don't understand)

 ![Screenshot (13)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/785a8689ab464bdd43b74f474ae0e0e172fb7ab5.png) ![Screenshot (14)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0047d03bd27bfbf4fb425f427a533343406d910.png)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [12 February 2020 20:49 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/9 "2020-02-12T20:49:01Z")

</div>

[https://nodered.org/docs/user-guide/messages](https://nodered.org/docs/user-guide/messages)  
[https://nodered.org/docs/user-guide/nodes#change](https://nodered.org/docs/user-guide/nodes#change)  
[https://nodered.org/docs/user-guide/writing-functions](https://nodered.org/docs/user-guide/writing-functions)

> **[JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)**
>
> JavaScript ("JS" for short) is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It was invented by Brendan Eich, co-founder of the Mozilla project, the...

---

<div class="post-metadata">

**Author:** ![fabio](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@fabio](https://discourse.nodered.org/u/fabio)\
**Post date:** [12 February 2020 21:41 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/10 "2020-02-12T21:41:45Z")

</div>

Thank you very much but i don't manage to do. I think also it's maybe impossible to plot the array i've obtained.  
I've obtained my array (that I can see in the debug) but then I don't know how to plot it. I want to use the change node because I don't know javascript. The change node let me set, change, move and delete.But when i put the change mode i have to change the msg.payload (that I think is my array or am i mistaking?) , search for and replace with. But i don't want to replace anything.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [12 February 2020 22:00 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/11 "2020-02-12T22:00:43Z")

</div>

Take a deep dive into those links I just posted. The forum software is so kind to put a badge with the number of times they’re clicked directly, so unless you clicked them from an email update you haven’t read them yet.

The first three are basic parts of the node-red user guide, and explain enough to get you started on this. The last is a beginner’s guide for JavaScript, and has enough information that you should be able to work this out in a function node.

In case you hadn’t noticed it yet, I’m handing you the resources to solve this problem by yourself, and while doing so learn enough about the subject that the next time you can do it yourself, or by falling back to these resources. I’m not going to give you “the answer”, or write the solution for you. One of the best reasons for that is that it will allow you to edit and maintain this flow by yourself in the future. After all there won’t always be someone available and hold your hand while working through the issue step by step, like this and your previous topic have been like.

My first suggestion will be to read the Working with Messages link above. Then read the github link again explaining how to plot the data on the chart and see if you understand the format. Next, to work it out on paper (yes, by hand if physically possible) and see if you can create the object you have to input on that chart. Feel free to ask for feedback once you’re there.  
The next part would be to combine that in the input to the chart. You can use a change node, but it might be easier with a regular function node, where you write JavaScript in. Your next links for reading would be the Working with Functions link, followed by the MDN beginner’s guide for javascript. The goal here is to have the output of the JSON node reformatted into the input that the chart node needs, which you should have worked out previously. That object will be created dynamically, by utilising the change and/or function node through manipulating the `msg.payload` object. This output is then wired to the chart node.

Good luck!

One more thing, I know for a fact it is not impossible to plot the arrays that are coming out, the issue in your previous post is caused by writing code with syntax errors. By following the above steps you should get through.

---

<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:** [12 April 2020 22:00 UTC](https://discourse.nodered.org/t/plot-data-in-a-dashboard-chart/21565/12 "2020-04-12T22:00:47Z")

</div>

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