# Help with sending an array to a chart

**URL:** <https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574>\
**Category:** General\
**Created:** [27 September 2021 14:42 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574 "2021-09-27T14:42:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [27 September 2021 14:42 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/1 "2021-09-27T14:42:50Z")

</div>

Hi all i am a newbie 😄  
This should be an easy one lol..  
I am having trouble extracting the following data in the picture.  
I want to plot this data into a graph.  
The blue being the date and time, and in red is the value.  
Please help.

 ![node red](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b39601bfb7c9e0f011ccfc249e1ac920da382f7d.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 September 2021 14:59 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/2 "2021-09-27T14:59:55Z")

</div>

Welcome to the forum jhdgkss 😃

This [https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data) describes the format that you need to pass to the Chart node.

You can do it in a Function node something like this

```auto
let labels = [];
let data = [];

msg.payload = msg.payload.results[0].series;
msg.payload.forEach(myFunction);

function myFunction(item, index) {   
  data.push(item.values[1]);  
  labels.push(item.values[0]);
}

msg.payload = [{
    "series": ["Chart Title"],
    "data": [data],
    "labels": labels
}];

return msg;

```

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [27 September 2021 15:33 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/5 "2021-09-27T15:33:09Z")

</div>

Hi thank you for your help it's much appreciated.  
I implemented the code you posted. please see the attached image.  
unfortunately, the data is not showing, but the graph is formated.

My project is to select specific data between a set time frame from infuxdb and display that data on a graph or do other such work with it.

 ![node red 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/124a59d6468bfd5713606bd013d23acf57392d3b.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 September 2021 16:13 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/6 "2021-09-27T16:13:46Z")

</div>

It looks like you only sent a single data point.

Please post an actual example of your data.  
Display the data with a debug node and copy it's value using the button at the right.  
Here's how one of my mesages looks as an example:  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c7f97b3172b8e5c96b7dc782bcb5c822014d451f.jpeg)

Edit: does your array only contain one data point, which you are charting live? One data point per so many seconds?  
If that's so you don't need the function, it can be done with a change node.  
Post the data and we'll sort it out.

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [28 September 2021 08:42 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/7 "2021-09-28T08:42:00Z")

</div>

Hello first off thank you so much for your help.

Here is the copied data as requested.

[{"series":["Chart Title"],"data":[[["2021-09-28T08:34:01.120229573Z",0]]],"labels":[["2021-09-28T08:33:01.000334349Z",0]]}]

And yes there is one data point that is sent to a time-series database (influx) every minute.  
As you can see in the data there is a time/date stamp (2021-09-28T08:33:01.000334349Z) followed by the data point (0).  
It is important that the data point is displayed with the same date/time stamp on the graph.  
The reason is I am querying the database between a set time/date frame.

I also need to get this data into a basic array so i can do further analysis of the information.

Thank you again John.

here is a copy of the original data from the database if that help.

![influx capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d26f4bfc95e95e2d69a83f9e0da43a5e2a6d282.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 September 2021 09:50 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/8 "2021-09-28T09:50:57Z")

</div>

I'm not sure that we understand each other.  
There are two ways to construct a chart.

1. You feed each individual value to the chart as you receive it. The chart plots that data point against the current time.
2. You retrieve a number of timestamps and values from a database and feed them into the chart all at once (in a format that the chart can recognise)  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f95342a09c8d722b5c1793b03492291d2ea40e0a.jpeg)

I think you are trying to use the second approach.  
You have not posted the data which your db query returns so I don't know if it contains a single data point or many,

The data you did post, which you are feeding to the chart, only contains a single point, which will not result in a very satisfactory graph. And it's in the wrong format.

> [@jhdgkss](#):
>
> {"series":["Chart Title"],"data":[[["2021-09-28T08:34:01.120229573Z",0]]],"labels":[["2021-09-28T08:33:01.000334349Z",0]]}]

Edit - deleted my own misleading sample data

If you post a sample of the data as you get it from the database we can help you to format it for the chart.

---

<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:** [28 September 2021 10:14 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/9 "2021-09-28T10:14:18Z")

</div>

If displaying time series data would one not normally use the format

```auto
[{
"series": ["A", "B", "C"],
"data": [
    [{ "x": 1504029632890, "y": 5 },
     { "x": 1504029636001, "y": 4 },
     { "x": 1504029638656, "y": 2 }
    ],
    [{ "x": 1504029633514, "y": 6 },
     { "x": 1504029636622, "y": 7 },
     { "x": 1504029639539, "y": 6 }
    ],
    [{ "x": 1504029634400, "y": 7 },
     { "x": 1504029637959, "y": 7 },
     { "x": 1504029640317, "y": 7 }
    ]
],
"labels": [""]
}]

```

or with just one line

```auto
[{
"series": ["A"],
"data": [
    [{ "x": 1504029632890, "y": 5 },
     { "x": 1504029636001, "y": 4 },
     { "x": 1504029638656, "y": 2 }
    ] ]
],
"labels": [""]
}]

```

which I suspect is what @jhdgkss is aiming for.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 September 2021 10:16 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/10 "2021-09-28T10:16:36Z")

</div>

Yes, I'm sure you are right! Now I'm wondering why my charts work at all. 🥴

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [28 September 2021 10:16 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/11 "2021-09-28T10:16:56Z")

</div>

Hi again.

Yes i am looking at the second approach but with the option of putting a second function between the reformated data and the graph to do extra data. But this is further down the line.

Here is my data straight from the influxdb get request that i am trying to format.

{"results":[{"statement\_id":0,"series":[{"name":"SN0002\_EPM","columns":["time","value"],"values":[["2021-09-28T09:59:00.859512711Z",0],["2021-09-28T10:00:01.039554904Z",0],["2021-09-28T10:01:00.15964071Z",0],["2021-09-28T10:02:00.371930097Z",0],["2021-09-28T10:03:00.458902681Z",0],["2021-09-28T10:04:00.596577388Z",0],["2021-09-28T10:05:00.740338762Z",0],["2021-09-28T10:06:00.976273813Z",0],["2021-09-28T10:06:36.864983764Z",0],["2021-09-28T10:07:00.904672348Z",0],["2021-09-28T10:08:00.100793014Z",0],["2021-09-28T10:09:00.209308785Z",0],["2021-09-28T10:10:00.318047164Z",0],["2021-09-28T10:11:00.432648335Z",0],["2021-09-28T10:12:00.545152705Z",0],["2021-09-28T10:13:00.68670558Z",0]]}]}]}

As you can see i am only ploting one data point ["2021-09-28T10:13:00.68670558Z",0]  
To me, the time stamp does look to be in the right format as you mentioned but is followed by the data value separated by a comma.

It would be good to be able to get this information into a basic table format first so additional data can be extracted from it? But that is for later on.

Here also is my flow.

 ![influx flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43b120069eb35b0b4e7f166b192a1f5fdba29b2f.png)

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [28 September 2021 10:40 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/13 "2021-09-28T10:40:15Z")

</div>

Hi yes, that looks about right.  
But my problem is getting it into that format.  
While I do know how to program in a language such as python i am totally new to node-red and I am trying to learn the differences 😄

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 September 2021 10:41 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/14 "2021-09-28T10:41:38Z")

</div>

What sort of chart are you after - a bar chart or a line chart?  
Why only one point, is it supposed to show just the most recent record in the database?

---

<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:** [28 September 2021 10:50 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/15 "2021-09-28T10:50:14Z")

</div>

> [@jbudd](#):
>
> Why only one point

I suspect that @jhdgkss means that his attempt so far only produces the structure shown and is not correctly including all the data.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 September 2021 11:17 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/16 "2021-09-28T11:17:22Z")

</div>

Yes, maybe I misinterpreted "As you can see i am only plotting one data point"

Here is a line chart using the data you supplied. It's not very exciting, all the values are zero.

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e563e8f916c2bad6ae19cd894647dd5b28ceb81d.jpeg)

```auto
[{"id":"b0461ce72e8b954a","type":"inject","z":"7fa7266f878522cd","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":110,"y":120,"wires":[["5e3849590a4990ee"]]},{"id":"5e3849590a4990ee","type":"function","z":"7fa7266f878522cd","name":"Sample data","func":"msg.payload = {\"results\":[{\"statement_id\":0,\"series\":[{\"name\":\"SN0002_EPM\",\"columns\":[\"time\",\"value\"],\"values\":[[\"2021-09-28T09:59:00.859512711Z\",0],[\"2021-09-28T10:00:01.039554904Z\",0],[\"2021-09-28T10:01:00.15964071Z\",0],[\"2021-09-28T10:02:00.371930097Z\",0],[\"2021-09-28T10:03:00.458902681Z\",0],[\"2021-09-28T10:04:00.596577388Z\",0],[\"2021-09-28T10:05:00.740338762Z\",0],[\"2021-09-28T10:06:00.976273813Z\",0],[\"2021-09-28T10:06:36.864983764Z\",0],[\"2021-09-28T10:07:00.904672348Z\",0],[\"2021-09-28T10:08:00.100793014Z\",0],[\"2021-09-28T10:09:00.209308785Z\",0],[\"2021-09-28T10:10:00.318047164Z\",0],[\"2021-09-28T10:11:00.432648335Z\",0],[\"2021-09-28T10:12:00.545152705Z\",0],[\"2021-09-28T10:13:00.68670558Z\",0]]}]}]}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":120,"wires":[["464b89bf1683b407"]]},{"id":"464b89bf1683b407","type":"function","z":"7fa7266f878522cd","name":"Format for chart","func":"let labels = [];\nlet data = [];\n\nmsg.payload = msg.payload.results[0].series[0].values;\nmsg.payload.forEach(myFunction);\n\nfunction myFunction(item, index) { \n timestamp=item[0];\n value=item[1];\n foo={\"x\": timestamp, \"y\": value }\n data.push(foo); \n}\n\nmsg.payload = [{\n \"series\": [\"My Data\"],\n \"data\": [data],\n \"labels\": labels\n}];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":120,"wires":[["7f951b84563b1f26"]]},{"id":"7f951b84563b1f26","type":"ui_chart","z":"7fa7266f878522cd","name":"","group":"3ce32370.c60f1c","order":0,"width":0,"height":0,"label":"Time Series Data","chartType":"line","legend":"false","xformat":"HH:mm:ss","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":710,"y":120,"wires":[[]]},{"id":"3ce32370.c60f1c","type":"ui_group","name":"Demo","tab":"d74bbed4.c2cfb","order":2,"disp":false,"width":"6","collapse":false,"className":""},{"id":"d74bbed4.c2cfb","type":"ui_tab","name":"Demo","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [28 September 2021 11:39 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/18 "2021-09-28T11:39:54Z")

</div>

Hi again. Thank you that's perfect.  
This should also give me a small foundation to move forward with other things i want to do.

Thank you all.

---

<div class="post-metadata">

**Author:** ![jhdgkss](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@jhdgkss](https://discourse.nodered.org/u/jhdgkss)\
**Post date:** [28 September 2021 11:46 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/19 "2021-09-28T11:46:40Z")

</div>

Hi one last thing.... Sorry..  
Can you explain how the Format for chart code works??  
Just for my better understanding.

let labels = ;  
let data = ;

msg.payload = msg.payload.results[0].series[0].values;  
msg.payload.forEach(myFunction);

function myFunction(item, index) {  
timestamp=item[0];  
value=item[1];  
foo={"x": timestamp, "y": value }  
data.push(foo);  
}

msg.payload = [{  
"series": ["Chart Title"],  
"data": [data],  
"labels": labels  
}];

return msg;

Thank you

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [28 September 2021 12:13 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/20 "2021-09-28T12:13:31Z")

</div>

Not really, I just copied someone else's code.

Firstly I declare variables "labels" and "data" as empty arrays.

The data that you want to plot happens to be in msg.payload.results[0].series[0].values and it is an array.

forEach() loops through the array, each time putting the current value into "item" and passing it to myFunction().  
In this case "item" also happens to be an array with timestamp in item[0] and value in item[1]

I format it into a Javascript object "foo" and add (push) that to another array "data".

Finally it creates an array in msg.payload. For this graph the array only has one element, a javascript object with the properties "series", "data" and "labels".

"Chart Title" was a bad choice for series. It should describe the data, so "Temperature" or "rpm" would be better.

---

<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 October 2021 12:14 UTC](https://discourse.nodered.org/t/help-with-sending-an-array-to-a-chart/51574/21 "2021-10-12T12:14:15Z")

</div>

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