Change format of values from array from integer to unix-timestamp for a chart

[My_Millenium]

In my Flow I read values from a database from columns "MINUTESUM" and "TIME".
These values are read from a function that sends these values to a chart.

This works, but the diagram does not recognize the time values as configured. The configuration ist "HH:MM", but the result is this:

This is the code:

var data = [];
var times = [];
var nbrArrayLength;
var i;
var dt;

msg.payload.forEach(function(value) {
    data.push(value['MINUTESUM']);
    times.push(value['TIME']);
});

nbrArrayLength = times.length;

for (i = 0; i < nbrArrayLength; i++)
{
    dt = new Date(Number(times[i]));
    
    times[i] = dt;
};

msg.payload = [{
    series: [],
    data: [data],
    labels: times
}];
return msg;

What am I doing wrong?

[E1cid]

Confused, a unix timestamp is an integer.
Can you supply input values and expected output values, in a text format please.

[My_Millenium]

@E1cid

Confused, a unix timestamp is an integer.

Yes ... But what is the problem with this?

@E1cid

Can you supply input values and expected output values, in a text format please.

This is e.g. the raw-data read from the database:

1696831539163	0
1696831601046	2.58
1696831659189	2.6
1696831719379	2.6
1696831781108	2.83
1696831839203	3.36
1696831899218	3.57
1696831959105	4.26
1696832021111	4.42
1696832079160	4.58
1696832139102	4.8
1696832199151	4.94
1696832259215	5.18
1696832319103	5.82
1696832379210	6.27
1696832439201	6.5
1696832499225	7.26
1696832559245	6.95
1696832619184	7.14
1696832679394	7.83
1696832739283	7.77
1696832799188	8.82
1696832859187	10.42
1696832919285	9.93
1696832979228	9.63
1696833039114	10.76
1696833099187	9.56
1696833159178	10.1
1696833219310	9.69

This is what the chart is receiving:

And this is what the chart is showing:

What I am expecting the chart to do is, to convert the x-axis to this:

If the chart receives the integer of the timestamps, it shows this:

If I change

dt = new Date(Number(times[i]));

to

dt = new Date(times[i]);

the result is:

I hope I could make you understand what I am trying to do.

[E1cid]

Your issue is you are not using a time series data in the chart, so you will need to format your labels array values.
try

 times[i] = `${dt.getHours()}:${dt.getMinutes()}`;

[edit] to pad the hours and minutes try

    times[i] = `${dt.getHours().toString().padStart(2, "0")}:${dt.getMinutes().toString().padStart(2, "0")}`;

output the is
07:05

Or return time series data, Example.

[{"id":"d3b95a9fa28b88da","type":"inject","z":"bf569dbfc3bc07ed","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"TIME\":1696831539163,\"MINUTESUM\":0},{\"TIME\":1696831601046,\"MINUTESUM\":2.58},{\"TIME\":1696831659189,\"MINUTESUM\":2.6},{\"TIME\":1696831719379,\"MINUTESUM\":2.6},{\"TIME\":1696831781108,\"MINUTESUM\":2.83},{\"TIME\":1696831839203,\"MINUTESUM\":3.36},{\"TIME\":1696831899218,\"MINUTESUM\":3.57},{\"TIME\":1696831959105,\"MINUTESUM\":4.26},{\"TIME\":1696832021111,\"MINUTESUM\":4.42},{\"TIME\":1696832079160,\"MINUTESUM\":4.58},{\"TIME\":1696832139102,\"MINUTESUM\":4.8},{\"TIME\":1696832199151,\"MINUTESUM\":4.94},{\"TIME\":1696832259215,\"MINUTESUM\":5.18},{\"TIME\":1696832319103,\"MINUTESUM\":5.82},{\"TIME\":1696832379210,\"MINUTESUM\":6.27},{\"TIME\":1696832439201,\"MINUTESUM\":6.5},{\"TIME\":1696832499225,\"MINUTESUM\":7.26},{\"TIME\":1696832559245,\"MINUTESUM\":6.95},{\"TIME\":1696832619184,\"MINUTESUM\":7.14},{\"TIME\":1696832679394,\"MINUTESUM\":7.83},{\"TIME\":1696832739283,\"MINUTESUM\":7.77},{\"TIME\":1696832799188,\"MINUTESUM\":8.82},{\"TIME\":1696832859187,\"MINUTESUM\":10.42},{\"TIME\":1696832919285,\"MINUTESUM\":9.93},{\"TIME\":1696832979228,\"MINUTESUM\":9.63},{\"TIME\":1696833039114,\"MINUTESUM\":10.76},{\"TIME\":1696833099187,\"MINUTESUM\":9.56},{\"TIME\":1696833159178,\"MINUTESUM\":10.1},{\"TIME\":1696833219310,\"MINUTESUM\":9.69}]","payloadType":"json","x":90,"y":380,"wires":[["04917addcc6292d8"]]},{"id":"04917addcc6292d8","type":"function","z":"bf569dbfc3bc07ed","name":"function 64","func":"const data = [];\n\n\nmsg.payload.forEach(function(value) {\n    data.push({\n        y: value.MINUTESUM,\n        x: value.TIME\n    })\n});\n\n\n\nmsg.payload = [{\n    series: [\"MINUTe SUM\"],\n    data: [data],\n}];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":380,"wires":[["f291eb649626f7bb"]]},{"id":"f291eb649626f7bb","type":"ui_chart","z":"bf569dbfc3bc07ed","name":"","group":"8b5cde76.edd58","order":8,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":380,"wires":[["43b43dd4375a2790"]]},{"id":"43b43dd4375a2790","type":"debug","z":"bf569dbfc3bc07ed","name":"debug 344","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":380,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Also If this is data return from a data base you could have the data base return the data using AS syntax, e.g.

SELECT MINUTESUM AS y, TIME AS x
FROM table_name ......

Then you would not need the function to foreEach through the data, as it will be return in the correct format to simply add to the chart data object property.

[My_Millenium]

@E1cid

to pad the hours and minutes try

Thank you very much! That works perfectly.

BUT...

@E1cid

Your issue is you are not using a time series data in the chart, so you will need to format your labels array

... What do I need to do to generate time series data to send data to the chart so that it can format the x-axis on its own in the chosen time format?

Thank you very much!

[E1cid]

@My_Millenium

What do I need to do to generate time series data to send data to the chart

Please read my full post i have provided an example flow that will output time series data for the chart.

[dceejay]

Or you can split array and just send payload and timestamp

[My_Millenium]

Thank you!