CSV to graph issues

General
1

Hi everyone;
I'm struggling to convert my CSV into a graph.

My CSV contains:
01-06-2024;evt r�elle;9;18�785;0;18�432
02-06-2024;evt r�elle;9;18�785;0;18�432

After passing to a CSV output I am getting an array:
[{"Date":"01-06-2024","EStimation":"evt r�elle","HC":9,"index":"18�432","HP":0},{"Date":"02-06-2024","EStimation":"evt r�elle","HC":9,"index":"18�432","HP":0}]

Then I am sending the ouput to a function found on this forum:

var payload=msg.payload;
var data_out=[];
var a1=[];

for(let i=0;i<payload.length;i++)
{
var temp1={ "Date":( payload[i]["Date"]), "HC":( payload[i]["HC"]) };
a1.push(temp1);
}

data_out=[a1];
msg.payload=[{
"series": ["esp"],
"data":data_out,
"labels": ["01"]
}];

return msg;

This is however not working; what am I doing wrong?
Thanks a lot

2

What does the output of the function look like in a debug node?

3

You are not really clear as to what graph you are using. I am going to assume a line chart is node-red-dashboard.

Here is an example of how to output data from csv node as required to use in chart data object.

[{"id":"9e7d7547ede9f79c","type":"function","z":"d1395164b4eec73e","name":"function 157","func":"msg.payload = [\n    {\n        \"series\": [\"esp\"],\n        \"data\": [msg.payload],\n        \"labels\": [\"01\"]\n    }\n];\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":4820,"wires":[["7abd2edc6b1e2666","66d463c2776d4ca1"]]},{"id":"88d137de0e5d533c","type":"csv","z":"d1395164b4eec73e","name":"","sep":";","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"x,,y","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":350,"y":4820,"wires":[["9e7d7547ede9f79c"]]},{"id":"7abd2edc6b1e2666","type":"debug","z":"d1395164b4eec73e","name":"debug 2557","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":4820,"wires":[]},{"id":"b445649bd2f367fc","type":"template","z":"d1395164b4eec73e","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"01-06-2024;evt r�elle;9;18�785;0;18�432\n02-06-2024;evt r�elle;9;18�785;0;18�432\n","output":"str","x":220,"y":4820,"wires":[["88d137de0e5d533c"]]},{"id":"cee711f66e85316a","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":80,"y":4820,"wires":[["b445649bd2f367fc"]]}]

How to import/export a flow

4

Thank you to both of you, I'm expecting to create a line chart with the following structure:

[{"labels":["01-06-2024","02-06-2024","..."],"series":["HP","HC"],"data":[[9,0],[9,0],[...,...]]}]
where Date equal the first data in the CSV, HP being the 3rd and HC being the 5th.

How should I update the function to achieve this?
Thx

5

Show us what it looks like at the moment, coming out of the function node, as I asked. So can see what is wrong with it.

6

That does not seem to be what is specified in the section Line Charts in the docs node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub

7

Sure, here is the node:

> [
>     {
>         "id": "9e7d7547ede9f79c",
>         "type": "function",
>         "z": "7f455c807e8e067e",
>         "name": "function 157",
>         "func": "msg.payload = [\n    {\n        \"series\": [\"serieA\", \"serieB\"],\n        \"data\": [msg.payload],\n        \"labels\": [\"01-06-2024\", \"02-06-2024\"]\n    }\n];\nreturn msg;",
>         "outputs": 1,
>         "timeout": 0,
>         "noerr": 0,
>         "initialize": "",
>         "finalize": "",
>         "libs": [],
>         "x": 590,
>         "y": 1640,
>         "wires": [
>             [
>                 "7abd2edc6b1e2666",
>                 "4a9c7322d3ec95db"
>             ]
>         ]
>     },
>     {
>         "id": "88d137de0e5d533c",
>         "type": "csv",
>         "z": "7f455c807e8e067e",
>         "name": "",
>         "sep": ";",
>         "hdrin": "",
>         "hdrout": "none",
>         "multi": "mult",
>         "ret": "\\n",
>         "temp": ",,0,,1",
>         "skip": "0",
>         "strings": true,
>         "include_empty_strings": "",
>         "include_null_values": "",
>         "x": 450,
>         "y": 1640,
>         "wires": [
>             [
>                 "9e7d7547ede9f79c"
>             ]
>         ]
>     },
>     {
>         "id": "7abd2edc6b1e2666",
>         "type": "debug",
>         "z": "7f455c807e8e067e",
>         "name": "debug 2557",
>         "active": true,
>         "tosidebar": true,
>         "console": false,
>         "tostatus": false,
>         "complete": "false",
>         "statusVal": "",
>         "statusType": "auto",
>         "x": 750,
>         "y": 1640,
>         "wires": []
>     },
>     {
>         "id": "b445649bd2f367fc",
>         "type": "template",
>         "z": "7f455c807e8e067e",
>         "name": "",
>         "field": "payload",
>         "fieldType": "msg",
>         "format": "handlebars",
>         "syntax": "mustache",
>         "template": "01-06-2024;evt r�elle;9;18�785;0;18�432\n02-06-2024;evt r�elle;11;18�785;0;18�432\n",
>         "output": "str",
>         "x": 320,
>         "y": 1640,
>         "wires": [
>             [
>                 "88d137de0e5d533c"
>             ]
>         ]
>     },
>     {
>         "id": "cee711f66e85316a",
>         "type": "inject",
>         "z": "7f455c807e8e067e",
>         "name": "",
>         "props": [
>             {
>                 "p": "payload"
>             },
>             {
>                 "p": "topic",
>                 "vt": "str"
>             }
>         ],
>         "repeat": "",
>         "crontab": "",
>         "once": false,
>         "onceDelay": 0.1,
>         "topic": "",
>         "payload": "",
>         "payloadType": "date",
>         "x": 180,
>         "y": 1640,
>         "wires": [
>             [
>                 "b445649bd2f367fc"
>             ]
>         ]
>     },
>     {
>         "id": "4a9c7322d3ec95db",
>         "type": "ui_chart",
>         "z": "7f455c807e8e067e",
>         "name": "",
>         "group": "cc53c59073725950",
>         "order": 3,
>         "width": 0,
>         "height": 0,
>         "label": "chart",
>         "chartType": "line",
>         "legend": "false",
>         "xformat": "Date-Month-Year",
>         "interpolate": "linear",
>         "nodata": "",
>         "dot": false,
>         "ymin": "",
>         "ymax": "",
>         "removeOlder": 1,
>         "removeOlderPoints": "",
>         "removeOlderUnit": "86400",
>         "cutout": 0,
>         "useOneColor": false,
>         "useUTC": false,
>         "colors": [
>             "#1f77b4",
>             "#aec7e8",
>             "#ff7f0e",
>             "#2ca02c",
>             "#98df8a",
>             "#d62728",
>             "#ff9896",
>             "#9467bd",
>             "#c5b0d5"
>         ],
>         "outputs": 1,
>         "useDifferentColor": false,
>         "className": "",
>         "x": 750,
>         "y": 1700,
>         "wires": [
>             []
>         ]
>     },
>     {
>         "id": "cc53c59073725950",
>         "type": "ui_group",
>         "name": "Forecast de demain",
>         "tab": "10b4df16bc5e110d",
>         "order": 1,
>         "disp": true,
>         "width": "6",
>         "collapse": false,
>         "className": ""
>     },
>     {
>         "id": "10b4df16bc5e110d",
>         "type": "ui_tab",
>         "name": "Remote App",
>         "icon": "dashboard",
>         "order": 1,
>         "disabled": false,
>         "hidden": false
>     }
> ]

and here the outcomes of the debug:
[{"series":["serieA","serieB"],"data":[[{"0":9,"1":0},{"0":11,"1":0}]],"labels":["01-06-2024","02-06-2024"]}]

but I had to put series and labels hard coded on the function, and not dynamic

8

Here is the perfect debug node outcomes that I should be able to generate, unfortunately for the moment manually only:
[{"series":["HP","HC"],"data":[[9,10],[0,1]],"labels":["01-06-2024","02-06-2024"]}]

9

It is the non time series format Colin.

@Tomtom
here is an example

[{"id":"cee711f66e85316a","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":5740,"wires":[["b445649bd2f367fc"]]},{"id":"b445649bd2f367fc","type":"template","z":"d1395164b4eec73e","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"01-06-2024;evt r�elle;9;18�785;0;18�432\n02-06-2024;evt r�elle;9;18�785;0;18�432\n","output":"str","x":240,"y":5740,"wires":[["88d137de0e5d533c"]]},{"id":"88d137de0e5d533c","type":"csv","z":"d1395164b4eec73e","name":"","sep":";","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"date,,HP,,HC","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":370,"y":5740,"wires":[["4674bc640d900596"]]},{"id":"4674bc640d900596","type":"function","z":"d1395164b4eec73e","name":"function 157","func":"msg.payload = [\n       {\n       \"labels\": msg.payload.map(obj => obj.date),\n       \"series\": Object.keys(msg.payload[0]).slice(1),\n       \"data\":msg.payload.map(obj => [obj.HC,obj.HP])\n   }\n]\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":5740,"wires":[["7abd2edc6b1e2666"]]},{"id":"7abd2edc6b1e2666","type":"debug","z":"d1395164b4eec73e","name":"debug 2557","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":710,"y":5740,"wires":[]}]

The csv node does some of the work cleaning up the output array.
Then the function does the rest

msg.payload = [
       {
       "labels": msg.payload.map(obj => obj.date),
       "series": Object.keys(msg.payload[0]).slice(1),
       "data": msg.payload.map(obj => [obj.HC,obj.HP])
   }
]
return msg;
10

Thanks E1cid !
I am getting:
[{"labels":["01-06-2024","02-06-2024"],"series":["HP","HC"],"data":[[0,9],[1,9]]}]

and would need 2 data to invert to get the chart display the 2 series in one set:
[{"labels":["01-06-2024","02-06-2024"],"series":["HP","HC"],"data":[[9,9],[0,0]]}]

I shall invert some data in the function or os this requiring a new code?

11

Can you have a non time series line chart?

12

THen reverse this section of code.
Or supply an example flow with the data you feed it, as all your example formats are different, which causes confusion.

@colin, yes, according to the link you posted
For non-timeseries data - for example data in labelled categories, rather than use x and y, the format should be as follows:

[{
    "series": ["X", "Y", "Z" ],
    "data": [ [5,6,9,10], [3,8,5,10], [6,7,2,10] ],
    "labels": [ "Jan", "Feb", "Mar", "Apr" ]
}]
13

Oh yes, I must be going blind.

14

The function displays this yet
Capture d’écran 2024-06-09 160732

I would like to transform it to this
Capture d’écran 2024-06-09 160836

Sorry if It created confusion, my experience in function is very limited :frowning:
I tried to revert but than it just turns the problem the other way around

Shall I post the code of the first chart?

15

You said line chart, you must of selected bar chart in chart node config.
Again please supply flow with csv data added and your desired output array for the supplied csv data.

16

Yes I made it wrong, it is bar chart and not line sorry.

The CSV is
01-06-2024;evt r�elle;9;18�785;1;18�432
02-06-2024;evt r�elle;11;18�785;2;18�432

CSV column as you proposed
date,,HP,,HC

and the expected output (but that I am not able to code completely), this is static data only.
Your last flow was very close, it just need to make all HP data in the first array, and all HC in the second array

msg.payload = [
    {
        "series": ["HP", "HC"],
        "data": [[9,11],[1,2]],
        "labels": ["01-06-2024", "02-06-2024"]
    }
];
return msg;


[
    {
        "id": "83c3799b1c851f40",
        "type": "inject",
        "z": "7f455c807e8e067e",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 170,
        "y": 1760,
        "wires": [
            [
                "7d785165f1c9eb88"
            ]
        ]
    },
    {
        "id": "7d785165f1c9eb88",
        "type": "template",
        "z": "7f455c807e8e067e",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "01-06-2024;evt r�elle;9;18�785;0;18�432\n02-06-2024;evt r�elle;9;18�785;1;18�432\n",
        "output": "str",
        "x": 310,
        "y": 1760,
        "wires": [
            [
                "08072baccbcad56b"
            ]
        ]
    },
    {
        "id": "08072baccbcad56b",
        "type": "csv",
        "z": "7f455c807e8e067e",
        "name": "",
        "sep": ";",
        "hdrin": "",
        "hdrout": "none",
        "multi": "mult",
        "ret": "\\n",
        "temp": "date,,HP,,HC",
        "skip": "0",
        "strings": true,
        "include_empty_strings": "",
        "include_null_values": "",
        "x": 440,
        "y": 1760,
        "wires": [
            [
                "9295367f0335e171"
            ]
        ]
    },
    {
        "id": "9295367f0335e171",
        "type": "function",
        "z": "7f455c807e8e067e",
        "name": "function 157",
        "func": "//msg.payload =Object.keys(msg.payload[0]);\n//return msg;\n\nmsg.payload = [\n     {\n   \"labels\": msg.payload.map(obj => obj.date),\n   \"series\": Object.keys(msg.payload[0]).slice(1),\n   \"data\":msg.payload.map(obj => [obj.HP,obj.HC])\n  }\n]\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 580,
        "y": 1760,
        "wires": [
            [
                "907aea81164f131f",
                "e1a8b48642b5c44e"
            ]
        ]
    },
    {
        "id": "907aea81164f131f",
        "type": "debug",
        "z": "7f455c807e8e067e",
        "name": "debug 2557",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 780,
        "y": 1760,
        "wires": []
    },
    {
        "id": "e1a8b48642b5c44e",
        "type": "ui_chart",
        "z": "7f455c807e8e067e",
        "name": "",
        "group": "cc53c59073725950",
        "order": 3,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "bar",
        "legend": "false",
        "xformat": "Date-Month-Year",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "",
        "ymax": "",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "86400",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 750,
        "y": 1820,
        "wires": [
            []
        ]
    },
    {
        "id": "cc53c59073725950",
        "type": "ui_group",
        "name": "Forecast de demain",
        "tab": "10b4df16bc5e110d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "10b4df16bc5e110d",
        "type": "ui_tab",
        "name": "Remote App",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
17

The output you have shown is impossible as the input does not match, all your example are different, which leads to confusion

But this may be it, reading between the lines.

[{"id":"83c3799b1c851f40","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":80,"y":5880,"wires":[["7d785165f1c9eb88"]]},{"id":"7d785165f1c9eb88","type":"template","z":"d1395164b4eec73e","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"01-06-2024;evt r�elle;9;18�785;1;18�432\n02-06-2024;evt r�elle;10;18�785;2;18�432\n","output":"str","x":220,"y":5880,"wires":[["08072baccbcad56b"]]},{"id":"08072baccbcad56b","type":"csv","z":"d1395164b4eec73e","name":"","sep":";","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"date,,HP,,HC","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":350,"y":5880,"wires":[["9295367f0335e171"]]},{"id":"9295367f0335e171","type":"function","z":"d1395164b4eec73e","name":"function 157","func":"//msg.payload =Object.keys(msg.payload[0]);\n//return msg;\n\nmsg.payload = [\n     {\n   \"labels\": msg.payload.map(obj => obj.date),\n   \"series\": Object.keys(msg.payload[0]).slice(1),\n   \"data\":[msg.payload.map(obj => obj.HP),msg.payload.map(obj => obj.HC)]\n  }\n]\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":5880,"wires":[["907aea81164f131f"]]},{"id":"907aea81164f131f","type":"debug","z":"d1395164b4eec73e","name":"debug 2557","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":5880,"wires":[]}]
18

:pray: YESSSS !!!
Many thanks, this is exactly what I needed.
Sorry for my confusing explanations and thank you for your patience !!
All the best