# Display datas from influx in an UI-Chart
**URL:** https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579
**Category:** Dashboard
**Created:** [5 January 2021 10:43 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579 "2021-01-05T10:43:36Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Magnus\_P](https://discourse.nodered.org/u/Magnus_P)
#### Post date: [12 January 2021 08:10 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/21 "2021-01-12T08:10:33Z")
@Colin Here is the input from influxdb and output to the ui\_chart node.
Still the chart is not populated with data, can it be the time format ??
@nicobauer Sorry to hijack this topic with my questions, but we might learn from each other.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 January 2021 10:04 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/23 "2021-01-12T10:04:44Z")
> [@Magnus\_P](#):
>
> Still the chart is not populated with data, can it be the time format
You have provided a string for the data array instead of an array of objects. Please look at the example I posted just above, that should do what you want in only a couple of lines of code. You should just need to adjust the property names a bit.
**[Edit]** So the first line will be something like
`msg.payload = msg.payload.map(point => {x: point._time, y: point._value})`
Also please if you are showing code here then copy/paste rather than screenshot as that is much easier to read. Use the `` button above the forum entry window when pasting it.
---
### Author:  [@Magnus\_P](https://discourse.nodered.org/u/Magnus_P)
#### Post date: [12 January 2021 13:42 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/24 "2021-01-12T13:42:02Z")
@Colin I have tried and tried to use the map function without any success 😬 get compiling issues. If you could help me a bit would be super, the original code without the map function is this one.
```auto
//
// Format the InfluxDB results
//
var series = ["Ampere"];
var labels = ["House L1"];
var data_0 = [];
var time;
for (var i=0; i < msg.payload.length; i++) {
data_0 += '{ "x":' + msg.payload[i]._time +' , "y":' + msg.payload[i]._value + '}';
if (i < (msg.payload.length - 1)) {
data_0 += ","
} else {
data_0 += ""
}
}
data1 = [data_0] // put data_0 in array data1
data = [data1] // put data 1 in array data
msg.payload = [{"series": series, "data": data, "labels": labels}];
return msg;
```
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 January 2021 13:53 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/25 "2021-01-12T13:53:12Z")
> [@Magnus\_P](#):
>
> I have tried and tried to use the map function without any success 😬 get compiling issues.
Oh yes, well I said it was untested, I had simplified it bit too much. Try
`msg.payload = msg.payload.map(point => {return {x: point._time, y: point._value}})`
---
### Author:  [@Magnus\_P](https://discourse.nodered.org/u/Magnus_P)
#### Post date: [12 January 2021 14:27 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/26 "2021-01-12T14:27:13Z")
@Colin - SUPER GREAT! now it works as expected 👍
the code was reduced as well!
```auto
//
// Format the InfluxDB results
//
var My_series = ["Ampere"];
var My_labels = ["House L1"];
msg.payload = msg.payload.map(point => {return {x: point._time, y: point._value}})
msg.payload = [{ series: My_series, data: [msg.payload], labels: My_labels}]
return msg;
```
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [12 January 2021 18:25 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/27 "2021-01-12T18:25:44Z")
Since I don't have the experience with programming in function node, I need your support there. Do you have a link where I can read about the map function, I want to understand how it works.
When I insert the following line in the node function, I get an error message
> msg.payload = msg.payload.map(point =\> {return {x: point[0], y: point[1]}});
> return msg;\
Error message:
> "TypeError: msg.payload.map is not a function"\
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [12 January 2021 19:34 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/28 "2021-01-12T19:34:16Z")
> [@nicobauer](#):
>
> Do you have a link where I can read about the map function,
google 'javascript map w3schools'
---
### Author:  [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [12 January 2021 19:55 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/29 "2021-01-12T19:55:08Z")
Colin
Thank you for reminding me of this MUCH reduced way of achieving this (as opposed to a `for` loop)
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 January 2021 21:31 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/30 "2021-01-12T21:31:58Z")
> [@nicobauer](#):
>
> TypeError: msg.payload.map is not a function
In that case msg.payload is not an array. Earlier you posted this example of the incoming data, is it not correct?
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [15 January 2021 15:28 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/31 "2021-01-15T15:28:55Z")
Now I don't understand it anymore. I'll try to describe the initial situation.
I want temperature data that I have stored in an Influxdb. Let me display in the dashboard in a line chart. The goal is that I get data displayed that goes back several hours. For testing, I only have the one data set written to the DB every 5 minutes.
The data comes from the database as follows. See 1st screenshot. 
The data should look like the following for the line chart as far as I understand. Screenshot 2. 
In the 3rd screenshot I have the data after a changenode. 
The 4th screenshot shows the configuration of the changenode.
Unfortunately I have to do this via the changenode, because I am not so good at programming that I can implement the whole thing in a function node.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [15 January 2021 15:45 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/32 "2021-01-15T15:45:58Z")
> [@nicobauer](#):
>
> The data comes from the database as follows. See 1st screenshot.
Is that the right screenshot? Showing in msg.payload an array of length 1 containing an object which contains a statement\_id and an array called series?
That is very odd data coming from influx. I don't even know how I would get data like that into the db.
**Edit** A big problem with your Change node (if I understand the German?) is that the first line overwrites msg.payload[0].series[0] to "A", then in the next line you try to access the payload value, but you have just destroyed it.
You will need to first move msg.payload to msg.save (for example) and then move it back from there into the payload.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [15 January 2021 16:07 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/33 "2021-01-15T16:07:36Z")
Having said in my previous post that the Change node should not work at all, it does seem that it is almost working, which is odd. The reason the the graph does not draw is that in your payload at the end you have
Whereas you should have
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [15 January 2021 16:12 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/34 "2021-01-15T16:12:29Z")
The data comes so from my netatmo station, which I query via a node and then pass to the influxdb. Until a while ago, I processed the whole thing with Grafana, unfortunately the rasberry is busy with too many other services. Therefore now the other way.
You have understood the german correctly.
As you can see in screenshot 2, the copy does work. But I can implement your way, that I copy the data first to msg.save.
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [15 January 2021 16:14 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/35 "2021-01-15T16:14:51Z")
> [@Colin](#):
>
> Whereas you should have
this is my problem and I have no idea how to get rid of the object.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [15 January 2021 16:51 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/36 "2021-01-15T16:51:19Z")
> [@nicobauer](#):
>
> The data comes so from my netatmo station, which I query via a node and then pass to the influxdb
How are you writing it to influx? Normally influx data consists of just arrays of fields, values and tags.
How are you reading it back from influx to get data like that?
You said that for testing you have only one dataset written to the db. Assuming that you will have to make it work with more then is it the top level results array that will have multiple entries or the results[0].series array that will have multiple entries? Will the multiple datasets need to go to the same chart?
I ask that because it could be very difficult to extend the Change node method to cope with multiple datasets.
However to press on with what you have, I would start by using a Change node to Move `msg.payload.results[0].series[0].values` To `msg.payload[0].data` and see what that gives you. If I have got it right then that should get you most of the way there. If it doesn't then I have probably got something wrong.
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [17 January 2021 18:08 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/37 "2021-01-17T18:08:41Z")
I use the influx node for this.
I think I have found a way to start.
I have a function node that does the splitting of the netatmo data. But I can deactivate it, because it was necessary for Grafana.
```auto
The data comes from the station as follows.
payload.devices[0].dashboard_data.Temperature
payload.devices[0].dashboard_data.CO2
payload.devices[0].dashboard_data.Humidity
```
The values are written to the database every 5 minutes. I only retrieve the last value from the database for testing.
I have tried the following
msg.payload.results[0].series[0].values To msg.payload[0].data
but it didn't work, because the change node does the following msg.payload["0"].data
I would try it now also via a function node if you can support me with that.
I would do the following in a first step
```auto
var temperature = []; //the temperature is to be stored here
var time = []; //the time is to be stored here
var msg.save = msg.payload; //save payload to msg.save
//msg.payload = temperature; //later the temperature & time data should be written here after payload
return msg;
```
but there is an error in line 3 that I don't understand.
---
### Author:  [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [17 January 2021 19:05 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/38 "2021-01-17T19:05:02Z")
Hi there. You do not need the `var` for `msg.save` i.e. line should be; `msg.save = msg.payload`
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [23 January 2021 16:55 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/39 "2021-01-23T16:55:22Z")
I have almost made it. At one point I still need support.
It should look like this:
[{
}, "series": ["A"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
],
"labels": [""]
}]
But looks like this:
[{
}, "series": ["A"],
"data": **[**[
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
]**]**
],
"labels": [""]
}]
After the change node the datas looks like this
My function node looks like this:
```auto
var temperatur = []; //the temperature is to be stored here
var time = []; //the time is to be stored here
var series = ["A"];
var labels = [""];
msg.payload = msg.payload.map(point => {return {x: 0, y: 1}});
msg.payload = [{ series: series, data: [msg.payload], labels: labels}];
return msg;
```
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [23 January 2021 17:24 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/40 "2021-01-23T17:24:41Z")
> [@nicobauer](#):
>
> `data: [msg.payload]`
I am on my phone at the moment so can't investigate fully, but if you need to take one set of brackets off the data property then possibly you need
`data: msg.payload`
---
### Author:  [@nicobauer](https://discourse.nodered.org/u/nicobauer)
#### Post date: [23 January 2021 18:00 UTC](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579/41 "2021-01-23T18:00:51Z")
Now, unfortunately, it writes at x: 0 and at y: 1 and not the values from the array.
Now, unfortunately, it writes at x: 0 and at y: 1 and not the values from the array.
I have certainly another error in the map function. Because it does not take the values from the array, but overwrites them at the positions with 0 and 1. I thought I can address with 0 and 1 the place.
[Previous page](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579.md?page=1)
[Next page](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579.md?page=3)