Display datas from influxdb in an UI-Chart

Dashboard
1

Hi all,

Following up from a 2021 thread - Display datas from influx in an UI-Chart - 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

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;

image
image328Ă—717 11.4 KB

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

image

2

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

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.

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.

3

Great - nearly there. That gives me a perfect Line Graph - but what about for a Bar Chart ? It didn't display anything for it.

4

One way

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.

1 Like
5

Genius - Thank you

6

Quick Question
image

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

7

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 for how to pre-format data to be passed in as a complete chart.

8

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