Line chart problems with X and Y axis

Dashboard
1

Hi

I try to get a chart with the parameters I receive via UDP. The parameters are like '16,1.23'. The first is a time, and the second, a voltage. The first should be the X axis, and the second, the Y axis
i have created this function:

dato = msg.payload.split(",");
var time = dato[0];
var voltage = dato[1];
if(time == "+++"){
time = 0;
voltage = 1;
}
var xydata=;
var dat = {x:time,y:voltage}
xydata.push(dat);
msg.payload=[{
"series": ["voltage"],
"data": [xydata],
"labels": [""]
}];
return msg;

And the debug message of each of the couples of data received is like this:

29/6/2022, 10:02:23[node: msg debug]
msg : Object
object
payload: array[1]
0: object
series: array[1]
data: array[1]
0: array[1]
0: object
x: "2108"
y: "0.9959"
labels: array[1]
fromip: "xxxxxxxxxxxxx"
ip: "xxxxxxxxxxxxx"
port: xxxxxxx
_msgid: "5a883c89.8398d4"

So everything seems OK in the debug, but the chart is completelly EMPTY (the '+++' is the end of the received packets). The variable 'time' comes from 0 to XXXXX, and it is and integer.

Any idea why it doesn't work?

Thanks

2

I think, my problem is that the objects are passed to the chart node as characters instead of numbers:
x: "2108"
y: "0.9959"
I store all the received datas in a csv file and when I send it to the chart node, the parameters are without "", and they are represented correctly.
How can I send the datas without the ""?

Thanks

3 
var time = parseInt(dato[0]);//integer
var voltage = parseFloat(dato[1]);//floating point number
4

Thanks

I have do that and now, the parameters are passed to the chart without "":
x: 4432
y: 0.3212

But the result is the same, so it is not a problem of character/number.

Any other idea?

5

As shown you are only sending a single point to the chart, which may not be easy to see. You must either build up the complete set of points before sending it to the chart or you can, I think, send them one at a time in the format
{topic:"temperature", payload:22, timestamp:1520527095000}
as described in node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub. I think that works for non-time series data, but I have not tried it.

6

No, I am receiving a data (time,voltage) every 4 ms and I send then to the chart in the moment they are received, like this:

0,1.234
4,1.444
8,2.345
.....
2108,0.9959
.....
and so on.

Sorry, I am very new in node red and I don't know how to write in the function node what you see about
{topic:"temperature", payload:22, timestamp:1520527095000}

Is it anything like this?
msg.topic = {payload:22,timestamp:1520527095000}

7

Line charts are meant to display time-series type of data. There is 2 ways the data can be shown.

  1. Live - the payload is single value. The timestamp is created automatically at the moment the chart receives the value.
  2. Historical - the payload contains an array of data points
// an array of objects where x is timestamp and y is value
var data = [
    {x:123456,y:55},
    {x:123567,y:59},
    {x:123678,y:43},
]

Actual format of historical data is a bit more complicated.

You are trying to do something in between. Having both - timestamp and value but feeding data to chart as for Live charting.

That's no go. You need to choose one or other way and then even format your data properly or for live chart, just feed the values.

That will be way too fast for chart. I'll end up with unresponsive dashboard very quickly.

8

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