# Request for help with ui\_chart in Node-RED for beginners.

**URL:** <https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352>\
**Category:** Dashboard\
**Tags:** docker\
**Created:** [1 December 2023 14:06 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352 "2023-12-01T14:06:18Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [1 December 2023 14:06 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/1 "2023-12-01T14:06:18Z")

</div>

Hello to you, I am completely new to Node-RED (under Docker).  
Currently, I am exploring the tools and I am struggling to create a chart using a CSV file. I have successfully read the CSV file and displayed a table, but I am stuck on the chart.  
I created a function to format it correctly, but I can't get anything to display.  
Can I send you the source CSV file and the JSON export of my Node-RED flow?  
Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 December 2023 14:24 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/2 "2023-12-01T14:24:16Z")

</div>

Welcome to the forum @Basileos

I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

When you have watched those, if you still have the problem then use a debug node to show us what you are sending to the chart node and paste it here. You can paste an image here directly.

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [5 December 2023 07:40 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/3 "2023-12-05T07:40:44Z")

</div>

Hello!  
Thank you for the playlist. It's very interesting, and I've learned a lot.  
Unfortunately, I still can't resolve my chart issue. I assume that my object is not correct and is not readable by my 'chart' node. I'm attaching a screenshot of my flow and the latest debug just before my 'chart' node.

Thank you in advance for your help!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20060548fce42aaf7f9e4f353352b28b35bc2d08.png)

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [5 December 2023 09:32 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/4 "2023-12-05T09:32:54Z")

</div>

> [@Basileos](#):
>
> I assume that my object is not correct and is not readable by my 'chart' node.

Did you check the help file that comes with the node. There's a lot of info how to structure a `msg` that the chart understands. Yours looks definitely wrong...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 December 2023 09:38 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/5 "2023-12-05T09:38:44Z")

</div>

First thing you should do is  
(1) click on the `chart` node  
(2) select the `help` tab in the right hand sidebar  
(3) read what it says

 ![Screenshot 2023-12-05 at 4.24.29 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72da810f85448daa84b33bb972ddb87dac9bd872.jpeg)

Then look at what you are sending to the chart and see if you can figure out the issue.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 December 2023 09:45 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/6 "2023-12-05T09:45:45Z")

</div>

To add historical data one sample at a time you need to follow the link from the help text to [https://github.com/node-red/node-red-dashboard/blob/master/Charts.md](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md). There, this section tells you how to do it:

You can also insert extra data points by specifying the `timestamp` property. This must be in either epoch time (in miliseconds, not seconds), or ISO8601 format.

```auto
{topic:"temperature", payload:22, timestamp:1520527095000}

```

Which is close to what you have but not quite.

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [7 December 2023 13:05 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/7 "2023-12-07T13:05:02Z")

</div>

Thank you for your help. I had already gone through the documentation, and despite that, I am struggling either to format my dataset or to configure my node (which requires minimal configuration). I have tried several nodes (split and join), functions to format my object, but nothing seems to work...

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [7 December 2023 13:22 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/8 "2023-12-07T13:22:31Z")

</div>

> [@Colin](#):
>
> `{topic:"temperature", payload:22, timestamp:1520527095000}`

Colin gave you the `msg` format that you should try to create.  
If that isn't enough for you to achieve your learning, you should consider to share a flow that we can use to investigate what's going wrong.  
Hint: A screenshot is great to visualize a topic - yet it doesn't help to examine the details...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 December 2023 13:38 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/9 "2023-12-07T13:38:36Z")

</div>

> [@Basileos](#):
>
> I have tried several nodes (split and join), functions to format my object, but nothing seems to work..

If you look at your debug you will see that you are putting the timestamp in msg.timestamp (which is correct) and the value in msg.y, where, from the docs, you need to put the value in msg.payload. You can additionally provide a msg.topic if you wish, that will identify that individual line on the chart.

If you go in your flow to where you are setting up msg.y and instead make it setup msg.payload, and also add a msg.topic if you wish, then that should do it. If you can't make it work show us how you are setting up msg.y.

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [7 December 2023 13:55 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/10 "2023-12-07T13:55:55Z")

</div>

Here is the function that formats my data. I repeat myself, I am a total beginner in Javascript and Node-RED, so please be kind ^^

```auto
var dateString = msg.payload.timestamp; // Format : "YYYY/MM/DD HH:MM"
// Séparer la chaîne en composants
var components = dateString.split(/[\s\/:]/); // Divise la chaîne en fonction des espaces, des barres obliques et des deux-points

// Extraire les composants
var annee = parseInt(components[0], 10);
var mois = parseInt(components[1], 10)-1; // Note: Les mois commencent à 0, donc on soustrait 1
var jour = parseInt(components[2], 10);
var heure = parseInt(components[3], 10);
var minutes = parseInt(components[4], 10);

// Créer l'objet Date
var timestamp = new Date(Date.UTC(annee, mois, jour, heure, minutes)).getTime();

var value = msg.payload.Pbrute

var toto = {"timestamp": timestamp, "payload": value}

return {msg:toto};

```

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [7 December 2023 14:07 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/11 "2023-12-07T14:07:53Z")

</div>

I finally have something! I understood my mistake due to a lack of knowledge in JavaScript, but I'm on the right track!  
It's not perfect, but I have a start of a chart!  
My code :

```auto
var dateString = msg.payload.timestamp; // Format : "YYYY/MM/DD HH:MM"
// Séparer la chaîne en composants
var components = dateString.split(/[\s\/:]/); // Divise la chaîne en fonction des espaces, des barres obliques et des deux-points

// Extraire les composants
var annee = parseInt(components[0], 10);
var mois = parseInt(components[1], 10)-1; // Note: Les mois commencent à 0, donc on soustrait 1
var jour = parseInt(components[2], 10);
var heure = parseInt(components[3], 10);
var minutes = parseInt(components[4], 10);

// Créer l'objet Date
var timestamp = new Date(Date.UTC(annee, mois, jour, heure, minutes)).getTime();

var value = msg.payload.Pbrute

var payload = value

return {timestamp, payload};

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 December 2023 14:18 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/12 "2023-12-07T14:18:55Z")

</div>

Show us the full contents of the function node please.

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [7 December 2023 14:45 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/13 "2023-12-07T14:45:27Z")

</div>

I only have this (in JSON

```auto
[{"id":"236da7589c3489fa","type":"function","z":"a8eb3517f2306f24","name":"StringToDate","func":"var dateString = msg.payload.timestamp; // Format : \"YYYY/MM/DD HH:MM\"\n// Séparer la chaîne en composants\nvar components = dateString.split(/[\\s\\/:]/); // Divise la chaîne en fonction des espaces, des barres obliques et des deux-points\n\n// Extraire les composants\nvar annee = parseInt(components[0], 10);\nvar mois = parseInt(components[1], 10)-1; // Note: Les mois commencent à 0, donc on soustrait 1\nvar jour = parseInt(components[2], 10);\nvar heure = parseInt(components[3], 10);\nvar minutes = parseInt(components[4], 10);\n\n// Créer l'objet Date\nvar timestamp = new Date(Date.UTC(annee, mois, jour, heure, minutes)).getTime();\n\nvar value = msg.payload.Pbrute\n\nvar payload = value\n\nreturn {timestamp, payload};","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":790,"y":420,"wires":[["df58b3f4b145018e","6d3cbb46efcc2714"]]}]

```

 ![image_2023-12-07_154508165](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f7780d0d7f6924806b9d6e6b0fe38347234fcf3.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 December 2023 15:21 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/14 "2023-12-07T15:21:21Z")

</div>

Change the end of the function from

> [@Basileos](#):
>
> ```auto
> var value = msg.payload.Pbrute
> 
> var payload = value
> 
> return {timestamp, payload};
> 
> ```

to

```auto
msg.timestamp = timestamp
msg.payload = msg.payload.Pbrute

return msg

```

I am pretty sure you can get the date more efficiently but lets get it working first.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [7 December 2023 15:35 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/15 "2023-12-07T15:35:51Z")

</div>

this helped me a lot while starting with NR-Chart.

> [@MySQL to dashboard chart - change function](https://discourse.nodered.org/t/mysql-to-dashboard-chart-change-function/14418):
>
> This will be a newbie question, so please bear with me... I have a MySQL database with a test schema in. I can read and write to it using node red. So far so good. I gather that to get the information in to a chart I have to use the 'change' function. However, I just can't wrap my head around how to make it work. I have zero background in JS. Would anyway one able to point me in the right direction? My test schema uses id (int) Value (real) and Timestamp (DT) My test query bri…

---

<div class="post-metadata">

**Author:** ![Basileos](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@Basileos](https://discourse.nodered.org/u/Basileos)\
**Post date:** [11 December 2023 13:19 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/16 "2023-12-11T13:19:19Z")

</div>

It works! Thank you very much. Is it possible to 'zoom in' on the X-axis to display only the beginning and the end of my series ?

 ![image_2023-12-11_141851368](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/856041ba2abafbba06ed76269f50a638d5d702fd.png)  
I continue to investigate.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 December 2023 14:26 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/17 "2023-12-11T14:26:44Z")

</div>

The standard dashboard chart does not offer zooming in, but you can restrict the range of data and redraw the chart.

You can have dashboard input fields for start and end date to show on the graph.

If your data was in a database then your SELECT statement could include WHERE clauses to restrict the date range.  
Since it is in a CSV file I guess a function or switch node could do the same job, though comparing dates can be tricky.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [11 December 2023 15:20 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/18 "2023-12-11T15:20:55Z")

</div>

Try this. I had done this project for my own requirement.

> [@Apex Chart with Customization](https://discourse.nodered.org/t/apex-chart-with-customization/77207):
>
> I spent most of my time last month in trying to find an alternative to ui\_chart in node-red-dashboard. the built in chart is good enough, the only drawback i faced was not having the zoom feature. so i was directed towards many alternatives but none of them had a simple and easy tutorial how to get the data from a mysql database and plot the same on dashboard. with the help of few experts, I could get the Apex chart start to look like what i wanted it to do. i am just putting a sample flow here…

---

<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:** [10 January 2024 15:21 UTC](https://discourse.nodered.org/t/request-for-help-with-ui-chart-in-node-red-for-beginners/83352/19 "2024-01-10T15:21:48Z")

</div>

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