# Drawing live data

**URL:** <https://discourse.nodered.org/t/drawing-live-data/42364>\
**Category:** Dashboard\
**Created:** [9 March 2021 20:04 UTC](https://discourse.nodered.org/t/drawing-live-data/42364 "2021-03-09T20:04:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [9 March 2021 20:04 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/1 "2021-03-09T20:04:11Z")

</div>

Hello every body how can I draw data in node red chart and gauge from api http link that contained data updated every several seconds .which node red icons used for this scenario

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 March 2021 21:23 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/2 "2021-03-09T21:23:23Z")

</div>

Welcome to the forum @Maf.

Before you start, I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

Then, if you still need help, which part of the requirement do you not know how to do?

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [9 March 2021 21:45 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/3 "2021-03-09T21:45:35Z")

</div>

Thank you, I'll watch them ,although I draw a figure using node (http request with choose jason parse ,to gauge and chart ,pay load msg ) but the chart and gauge has no data drawn. hint the api link has data like channel of asksensors

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 March 2021 22:03 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/4 "2021-03-09T22:03:19Z")

</div>

After you have watched the videos add debug nodes after each node in your flow and work out where it is going wrong. If you think everything looks right then show us what you are sending to the gauge. Start with the gauge because that is simpler than the chart.

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [9 March 2021 22:14 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/5 "2021-03-09T22:14:35Z")

</div>

Thanks I'll try .do you mean connect the output or the input of each node in the flow by debug.Can I leave the input of http request without connection

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 March 2021 07:32 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/6 "2021-03-10T07:32:12Z")

</div>

Add the debug nodes where you need them to see where the flow is going wrong.

After you have watched the videos also read carefully the node red docs page Working with Messages.

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [10 March 2021 10:24 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/7 "2021-03-10T10:24:36Z")

</div>

Thank you for your response  
The issue is look like as in this ticket

> [@Thingspeak data to node-red](https://discourse.nodered.org/t/thingspeak-data-to-node-red/11330):
>
> I have data in thingspeak but unsure how do i send it to node-red. here is the feed link and data format. [https://api.thingspeak.com/channels/782876/feeds.json?results=2](https://api.thingspeak.com/channels/782876/feeds.json?results=2) {"channel":{"id":782876,"name":"Floodsensed","latitude":"3.2038","longitude":"101.7367","field1":"temperature","field2":"pressure","field3":"current","created\_at":"2019-05-17T16:31:42Z","updated\_at":"2019-05-17T16:47:25Z","last\_entry\_id":127},"feeds":[{"created\_at":"2019-05-20T14:48:58Z","entry\_id":126,"field1":"30","field2":…

---

<div class="post-metadata">

**Author:** ![Achronite](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achronite/32/31868_2.png) [@Achronite](https://discourse.nodered.org/u/Achronite)\
**Post date:** [10 March 2021 10:56 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/8 "2021-03-10T10:56:23Z")

</div>

You need to do some data manipulation before you pass it to a dashboard chart/gauge node. You cannot just pipe data from HTTP response into a dashboard node. It needs to know what to display.

Assuming you are using the chart node with line graph, pass in a single data item and assign a topic for each data entry passed in. For example:

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

The 'topic' for the blue line is 'Air', and a different topic is used for 'Ground' temperature. Check out the 'template' node this will probably do what you are trying to achieve, or use a 'function' node if you know javascript.

One other thing to check if you are trying to extract a datapoint from the JSON is to ensure the data is an object before it reaches the dashboard node; try adding a JSON parser in between the request and chart nodes.

As @Colin points out, make heavy use of 'debug' nodes to check the format of your messages at all stages.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 March 2021 11:02 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/9 "2021-03-10T11:02:51Z")

</div>

> [@Maf](#):
>
> The issue is look like as in this ticket

Are you using thingspeak?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 March 2021 11:04 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/10 "2021-03-10T11:04:12Z")

</div>

> [@Achronite](#):
>
> Assuming you are using the chart node with line graph,

It is due to the additional complexity of the chart node that I suggested getting it going with the gauge first.

---

<div class="post-metadata">

**Author:** ![Achronite](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achronite/32/31868_2.png) [@Achronite](https://discourse.nodered.org/u/Achronite)\
**Post date:** [10 March 2021 11:21 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/11 "2021-03-10T11:21:09Z")

</div>

Gauge operates on a single numeric value, here is one of mine for reference:

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

msg.payload MUST be an number for this to work, you can see this in the right column.

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [10 March 2021 11:47 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/12 "2021-03-10T11:47:39Z")

</div>

yes thingspeak

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 March 2021 12:04 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/13 "2021-03-10T12:04:29Z")

</div>

So if you add a debug node after the http request and set the http node up as in the thread you linked (which presumably you have already done) what does the debug node show and what data are you trying to extract?

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [12 March 2021 12:59 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/14 "2021-03-12T12:59:38Z")

</div>

hello again I learned how the chart and gauge by numeric function , but how can convert the data from HTTP request to numbers for chart or gauge . the data sample  
"entry\_id":1315,"field4":"1092.00000"},{"created\_at":"2021-03-11T22:10:16Z",  
"entry\_id":1316,"field4":"1091.00000"},{"created\_at":"2021-03-11T22:10:32Z",  
"entry\_id":1317,"field4":"1092.00000"},{"created\_at":"2021-03-11T22:10:48Z",  
"entry\_id":1318,"field4":"1094.00000"},{"created\_at":"2021-03-11T22:11:04Z",  
"entry\_id":1319,"field4":"1092.00000"},{"created\_at":"2021-03-11T22:11:20Z",  
"entry\_id":1320,"field4":"1092.00000"},{"created\_at":"2021-03-11T22:11:36Z",  
"entry\_id":1321,"field4":"1093.00000"},{"created\_at":"2021-03-11T22:12:01Z",

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 March 2021 13:41 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/15 "2021-03-12T13:41:46Z")

</div>

If you are in a Function node then, assuming that you have the above data in a javascript array, which is what it looks like, you can use `Number(theArray[i].field4)` to convert it to a number. Or you can use the Array.map function to convert the whole array in one go. It can also be done in a Change node using JSONata but I will leave that for someone else to tell you how to do it.

I expect googling for  
javascript convert string to number  
would have found that.  
I think the gauge will work with a string value, also I think the chart may be ok with strings for live data but not if you are preloading the chart with existing data. I may be wrong however.

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [12 March 2021 21:10 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/17 "2021-03-12T21:10:03Z")

</div>

![nodred32 - Copy](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b91da3772e5b6c4a6907381a264648f37cbb541.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 March 2021 21:30 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/18 "2021-03-12T21:30:27Z")

</div>

Are you asking a question?  
If you are asking how to extract data from the array then first read the node-red docs page Working with Messages which should be helpful. Is the data in the array historical data? If so then what is it that you want to send to the gauge? Usually a gauge is used for showing live data.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 March 2021 21:38 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/19 "2021-03-12T21:38:01Z")

</div>

> [@Achronite](#):
>
> msg.payload MUST be an number for this to work

In fact both the gauge and (for live data) the chart will accept Strings (containing numbers of course). They don't have to be Number type.

---

<div class="post-metadata">

**Author:** ![Maf](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@Maf](https://discourse.nodered.org/u/Maf)\
**Post date:** [12 March 2021 22:01 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/20 "2021-03-12T22:01:32Z")

</div>

The data each 30 second in array of 100 object as in the flow above how can draw it or take average then draw

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 March 2021 22:12 UTC](https://discourse.nodered.org/t/drawing-live-data/42364/21 "2021-03-12T22:12:46Z")

</div>

This document shows you how you have to arrange the data to use it to fill the chart. [node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

[Next page](https://discourse.nodered.org/t/drawing-live-data/42364.md?page=2)