Display datas from influx in an UI-Chart

@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.

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.

@Colin I have tried and tried to use the map function without any success :grimacing: get compiling issues. If you could help me a bit would be super, the original code without the map function is this one.

//
// 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;

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}})

@Colin - SUPER GREAT! now it works as expected :+1:
the code was reduced as well!

//
// 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;

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"</>

google 'javascript map w3schools'

Colin
Thank you for reminding me of this MUCH reduced way of achieving this (as opposed to a for loop)

In that case msg.payload is not an array. Earlier you posted this example of the incoming data, is it not correct?
image

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.1.
The data should look like the following for the line chart as far as I understand. Screenshot 2.2.
In the 3rd screenshot I have the data after a changenode. 3.
The 4th screenshot shows the configuration of the changenode.
4.
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.

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.

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
image
Whereas you should have
image

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.

this is my problem and I have no idea how to get rid of the object.

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.

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.

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

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.

Hi there. You do not need the var for msg.save i.e. line should be; msg.save = msg.payload

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
Bildschirmfoto 2021-01-23 um 17.48.29

My function node looks like this:

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;

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

Now, unfortunately, it writes at x: 0 and at y: 1 and not the values from the array.

Bildschirmfoto 2021-01-23 um 18.46.29

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.