Request for help with ui_chart in Node-RED for beginners.

[Basileos]

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!

[Colin]

Welcome to the forum @Basileos

I recommend watching this playlist: Node-RED Essentials. 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.

[Basileos]

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!

[ralphwetzel]

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

[zenofmud]

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

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

[Colin]

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

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

Which is close to what you have but not quite.

[Basileos]

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

[ralphwetzel]

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

[Colin]

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

[Basileos]

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 ^^

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

[Basileos]

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 :

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

[Colin]

Show us the full contents of the function node please.

[Basileos]

I only have this (in JSON

[{"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"]]}]

[Colin]

Change the end of the function from

@Basileos

var value = msg.payload.Pbrute

var payload = value


return {timestamp, payload};

to

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.

[smanjunath211]

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

MySQL to dashboard chart - change function

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. [nodered] 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…

[Basileos]

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 ?

I continue to investigate.

[jbudd]

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.

[smanjunath211]

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

Apex Chart with Customization

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…