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

**URL:** https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863
**Category:** General
**Created:** [8 October 2023 19:00 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863 "2023-10-08T19:00:10Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![My\_Millenium](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@My\_Millenium](https://discourse.nodered.org/u/My_Millenium)
#### Post date: [8 October 2023 19:00 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/1 "2023-10-08T19:00:10Z")

</div>

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:  
 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/269022eeca355145f3e6b29dc67b6327a468b5cc.jpeg)

This is the code:

```auto
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?

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [8 October 2023 19:56 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/2 "2023-10-08T19:56:21Z")

</div>

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

---

<div class="post-metadata">

### Author: ![My\_Millenium](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@My\_Millenium](https://discourse.nodered.org/u/My_Millenium)
#### Post date: [9 October 2023 17:29 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/3 "2023-10-09T17:29:31Z")

</div>

> [@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:

```auto
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:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0db24d7a4e6c5ed78e4f95a8a61ce930527027f6.png)  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b9a7f1213885ae188dab7c4d264104e736364625.png)  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66ede234e40743271f50c2969622271f39b56cd0.png)

And this is what the chart is showing:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/87ebfbb09644ea14aa783f8cbaf0a72b26d77045.png)

What I am expecting the chart to do is, to convert the x-axis to this:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/98a54546a53921ad78c2a2d955fdd6b8a9b9344c.png)

If the chart receives the integer of the timestamps, it shows this:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b46d2aaa7cc5e5f90f2fde31a9ee68e4fa6d90bc.png)

If I change

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

```

to

```auto
dt = new Date(times[i]);

```

the result is:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cac9b1495615a26012a8238e237608281238ee28.png)

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

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [9 October 2023 18:16 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/4 "2023-10-09T18:16:25Z")

</div>

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

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

```

 ![chrome_screenshot_1696875419043](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d25d11e4371f2ba66151fe7e6891f5b65163162.png)

[edit] to pad the hours and minutes try

```auto
    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.

```auto
[{"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.

```auto
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.

---

<div class="post-metadata">

### Author: ![My\_Millenium](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@My\_Millenium](https://discourse.nodered.org/u/My_Millenium)
#### Post date: [9 October 2023 19:33 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/5 "2023-10-09T19:33:55Z")

</div>

> [@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!

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [9 October 2023 19:36 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/6 "2023-10-09T19:36:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [9 October 2023 20:28 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/7 "2023-10-09T20:28:55Z")

</div>

Or you can split array and just send payload and timestamp

---

<div class="post-metadata">

### Author: ![My\_Millenium](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@My\_Millenium](https://discourse.nodered.org/u/My_Millenium)
#### Post date: [15 October 2023 09:07 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/8 "2023-10-15T09:07:28Z")

</div>

Thank you! 🤜

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [29 October 2023 09:08 UTC](https://discourse.nodered.org/t/change-format-of-values-from-array-from-integer-to-unix-timestamp-for-a-chart/81863/9 "2023-10-29T09:08:06Z")

</div>

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