# Display datas from influxdb in an UI-Chart
**URL:** https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006
**Category:** Dashboard
**Created:** [31 December 2022 22:34 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006 "2022-12-31T22:34:57Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@championc](https://discourse.nodered.org/u/championc)
#### Post date: [31 December 2022 22:34 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/1 "2022-12-31T22:34:58Z")
Hi all,
Following up from a 2021 thread - [Display datas from influx in an UI-Chart](https://discourse.nodered.org/t/display-datas-from-influx-in-an-ui-chart/38579) - I need help with getting data from an Influxdb into a Bar Chart.
I am recording a daily total of Solar generated - one figure per day - which I simply want to chart the month.
I'm using the SQL query "SELECT solar FROM mydb". This extracts the timestamp and the solar data. Here is my data after processing it through my function
```auto
var series = ["Date"];
var labels = ["kWh"];
msg.payload.map(point => { return { x: point[0], y: point[1] } });
msg.payload = [{ series: series, data: [msg.payload], labels: labels }];
return msg;
```
And apart from just saving the timestamp, I also saved the date in YYYY-MM-DD format in it's own field called "date", thinking that I could use the SQL query "SELECT date,solar FROM mydb" instead. But then, how would I use elements 1 and 2 instead of 0 and 1 ? The extracted data would look like this
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 December 2022 23:02 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/2 "2022-12-31T23:02:21Z")
The db returns an array of objects, map loops through the array. You then would be working on the object `point`, not an array.
I would probably do this
```auto
msg.payload = [
{
series: ["Date"],
data: [msg.payload.map(point => { return { x: point.time, y: point.solar } })],
labels: ["kWh"]
}
]
return msg;
```
To do it your way you would assign your map of `payload` to a variable.
```auto
let series = ["Date"];
let labels = ["kWh"];
let data = msg.payload.map(point => { return { x: point.time, y: point.solar } });
msg.payload = [{ series: series, data: [data], labels: labels }];
return msg;
```
[edit] To format how the chart displays the ISO timestamp you can set that in the ui-chart node config.
---
### Author:  [@championc](https://discourse.nodered.org/u/championc)
#### Post date: [31 December 2022 23:29 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/3 "2022-12-31T23:29:52Z")
> [@E1cid](#):
>
> ```auto
> let data = msg.payload.map(point => { return { x: point.time, y: point.solar } });
> msg.payload = [{ series: series, data: [data], labels: labels }];
>
> ```
Great - nearly there. That gives me a perfect Line Graph - but what about for a Bar Chart ? It didn't display anything for it.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [31 December 2022 23:37 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/4 "2022-12-31T23:37:34Z")
One way
```auto
let series = ["kWh"];
let labels = msg.payload.map(point => point.time );
let data = msg.payload.map(point => point.solar);
msg.payload = [{ series: series, data: [data], labels: labels }];
return msg;
```
untested as i do not have your data.
---
### Author:  [@championc](https://discourse.nodered.org/u/championc)
#### Post date: [1 January 2023 00:08 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/5 "2023-01-01T00:08:58Z")
Genius - Thank you
---
### Author:  [@championc](https://discourse.nodered.org/u/championc)
#### Post date: [1 January 2023 00:19 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/6 "2023-01-01T00:19:53Z")
Quick Question
Can I have all bars the one colour ? What would I need to change for this to happen ?
NOTE: I only have Solar data from 20/12/2022, so the chart is correct
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [1 January 2023 01:05 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/7 "2023-01-01T01:05:05Z")
If you look at all the settings in the ui-chart config or read the node help you may have noticed a check box or the read me links to chart array formats
> for bars of the same colour, set the flag `Use first colour for all bars` in the node configuration, and set labels for each column
> See **[this information](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)** for how to pre-format data to be passed in as a complete chart.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [15 January 2023 01:05 UTC](https://discourse.nodered.org/t/display-datas-from-influxdb-in-an-ui-chart/73006/8 "2023-01-15T01:05:58Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.