Hello guys, I want to display the data from csv file into a dashboard and present it in line chart format.
For example, time will be at the x-axis and the data will be at the y-axis.
May I know how to write the function code so it can read the data from the file automatically?
Thanks for your help!
Have you searched the forum?
There are quite a few threads. Try searching csv chart
If so, how far did you get / what are you stuck on?
Thanks for the replying Steve,
I read a few forums already but I am still stuck on how to let Node-red understand which data I am refering to. May use my data to show an example? I would really appreciate that.
Thanks.
Show us what you have done so far and where you are stuck. Export and attach your flow to a reply.
Unable to use your data as it is an image and can not be copied or pasted.
here is an example of grabbing specific columns from a cvs. then adding a time property to them, which in this case is every second.
[{"id":"7aaa4e06.4f7a1","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":2060,"wires":[["6f217697.9d9008"]]},{"id":"6f217697.9d9008","type":"template","z":"c791cbc0.84f648","name":"simulate file read","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"field1,field2,field3,field4\n1,2,3,4\n2,3,4,5\n3,4,5,6\n4,5,6,7\n","output":"str","x":370,"y":2060,"wires":[["6addd0c9.9cc33"]]},{"id":"6addd0c9.9cc33","type":"csv","z":"c791cbc0.84f648","name":"output columns","sep":",","hdrin":true,"hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":600,"y":2060,"wires":[["e1eee32c.78db58"]]},{"id":"e1eee32c.78db58","type":"change","z":"c791cbc0.84f648","name":"prepare data for chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"(\t$labels := {\"name1\": \"field1\", \"name2\": \"field2\", \"name3\": \"field4\"};\t[\t {\t \"series\": $split(\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\", \"\", $count($labels.*)),\t \"labels\": $keys($labels),\t \"data\": [$labels.*.[\t $map($$.payload, function ($v,$i){\t {\"y\":$lookup($v, $), \"x\": ($i+1) * 1000}\t })\t ]\t ]\t }\t])\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":2100,"wires":[["da13de5e.8621a"]]},{"id":"da13de5e.8621a","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":630,"y":2160,"wires":[]}]
JSONata expression
(
$labels := {"name1": "field1",
"name2": "field2",
"name3": "field4"};
[
{
"series": $split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", "", $count($labels.*)),
"labels": $keys($labels),
"data": [
$labels.*.[
$map($$.payload,function ($v,$i){
{"y":$lookup($v, $), "x": ($i+1) * 1000}
})
]
]
}
]
)
Input
field1,field2,field3,field4
1,2,3,4
2,3,4,5
3,4,5,6
4,5,6,7
Output
[
{
"series": [
"A",
"B",
"C"
],
"labels": [
"name1",
"name2",
"name3"
],
"data": [
[
{
"y": 1,
"x": 1000
},
{
"y": 2,
"x": 2000
},
{
"y": 3,
"x": 3000
},
{
"y": 4,
"x": 4000
}
],
[
{
"y": 2,
"x": 1000
},
{
"y": 3,
"x": 2000
},
{
"y": 4,
"x": 3000
},
{
"y": 5,
"x": 4000
}
],
[
{
"y": 4,
"x": 1000
},
{
"y": 5,
"x": 2000
},
{
"y": 6,
"x": 3000
},
{
"y": 7,
"x": 4000
}
]
]
}
]
msg.payload=[{
"series": ["A", "B", "C"],
"data": [
[{ "x": 1504029635986,"y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": ["Speed RPM","feed rate","MRR"]
}]
return msg;
Hi , actually I am following this method to do a simulation, but this one only contains 3 values and I can't manually just type it one by one.
And this is my output.
That’s not an export of your flow.
May I know what do you mean by flow? As I am quite new to Node-red.
Sorry about that.
Go to the hamburger menu on the upper right of the screen and click on it. Select the 'Export` option. Click on 'all flows' then 'Copy to clipboard' and then paste it into a reply.
When doing the paste, it is important to surround your code with three backticks
```
like this
```
See this post for more details - How to share code or flow json
Hi zenofmud,
This is my flow:
[
{
"id": "bd1fc7314f216e12",
"type": "tab",
"label": "Flow 5",
"disabled": false,
"info": "",
"env": []
},
{
"id": "7c2159ff958405e9",
"type": "function",
"z": "bd1fc7314f216e12",
"name": "",
"func": "var chart = \n[{\n\"series\": [\"A\", \"B\", \"C\"],\n\"data\": [\n [{ \"x\": 1504029632890, \"y\": 5 },\n { \"x\": 1504029636001, \"y\": 4 },\n { \"x\": 1504029638656, \"y\": 2 }\n ],\n [{ \"x\": 1504029633514, \"y\": 6 },\n { \"x\": 1504029636622, \"y\": 7 },\n { \"x\": 1504029639539, \"y\": 6 }\n ],\n [{ \"x\": 1504029634400, \"y\": 7 },\n { \"x\": 1504029637959, \"y\": 7 },\n { \"x\": 1504029640317, \"y\": 7 }\n ]\n],\n\"labels\": [\"Speed\",\"Feed rate\",\"MRR\"]\n}]\nmsg.payload = chart;\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 480,
"y": 300,
"wires": [
[
"56d60651db41b08f"
]
]
},
{
"id": "56d60651db41b08f",
"type": "ui_chart",
"z": "bd1fc7314f216e12",
"name": "",
"group": "cae8f78c1696f4df",
"order": 13,
"width": 0,
"height": 0,
"label": "Test 2",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"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": 750,
"y": 320,
"wires": [
[]
]
},
{
"id": "ed5d24ca183aa238",
"type": "inject",
"z": "bd1fc7314f216e12",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payloadType": "date",
"x": 260,
"y": 300,
"wires": [
[
"7c2159ff958405e9"
]
]
},
{
"id": "cae8f78c1696f4df",
"type": "ui_group",
"name": "Group one ",
"tab": "e59d61d6ed1fd2ed",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "e59d61d6ed1fd2ed",
"type": "ui_tab",
"name": "Tab - Main",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
-
I had to edit your last post because
you did not followthe instructions I provided for posting your flow. If you don't follow the directions people give you they may stop repling to your issues. -
what do you mean by:
but this one only contains 3 values and I can't manually just type it one by one.
give a step by step explaination.
Sorry, sir.
I mean I use this method to present 3 values and I believe you also can view the data.
However, my original data contains more than 3 values
So I wonder is there any way to present more data instead of tying it one by one
Thanks.
You need to be more clear in what you want to do. Are you asking how to read a CSV file and create a graph for all the data in it?
Please be clear if you want help.
Yes, that is what exactly I want. Sir
use a file-in node to read the file. The you can use a function node or change node to format each line into the format the graph will need and then send it to the graph.
Give it a try and if you run into a problem, provide the flow (remember to paste it as I explained it earlier) with an example file and explain where you are having a problem. You should use debug nodes at various points to see what the data looks like.
1 Like
Hi, sir. I plan to use bar chart instead of using line chart and this is my flow.
But it shows me nothing. May I know which part is wrong ? Thanks.
Speed RPM.txt (168 Bytes)
[
{
"id": "9c11c2dca5cbb3e9",
"type": "tab",
"label": "Flow 3",
"disabled": false,
"info": "",
"env": []
},
{
"id": "83f2f31a1156776f",
"type": "function",
"z": "9c11c2dca5cbb3e9",
"name": "",
"func": "//var chart = \n//[{\n//\"series\": [\"A\", \"B\", \"C\"],\n//\"data\": [\n // [{ \"x\": 1504029632890, \"y\": 932 },\n // { \"x\": 1504029636001, \"y\": 932},\n // { \"x\": 1504029638656, \"y\": 1037},\n // { \"x\": 1504029638656, \"y\": 1049}\n // ],\n \n//],\n//\"labels\": [\"Speed\",\"Feed rate\",\"MRR\"]\n//}]\n//msg.payload = chart;\n\n//return msg;\n\nvar data = msg.payload\nvar Speeds = new Array();\n\nfor(let i = 0; i < data.length; i++){\n Speeds.push(data[i].Speed);\n \n }\n\nvar output = [{\"series\": [\"Speed\"],\n \"data\": [ Speeds ],\n //\"labels\": [\"\"]}]\n}]\nmsg.payload=output;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 580,
"y": 460,
"wires": [
[
"a673f03385febe34",
"eac966cd23a953d6"
]
]
},
{
"id": "a673f03385febe34",
"type": "ui_chart",
"z": "9c11c2dca5cbb3e9",
"name": "",
"group": "cae8f78c1696f4df",
"order": 13,
"width": 0,
"height": 0,
"label": "Speed RPM",
"chartType": "bar",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "1500",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": true,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 890,
"y": 440,
"wires": [
[]
]
},
{
"id": "0e19822c664699ae",
"type": "inject",
"z": "9c11c2dca5cbb3e9",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 300,
"y": 420,
"wires": [
[
"400d8d16e25ec2ae"
]
]
},
{
"id": "723dad371e55a1ec",
"type": "comment",
"z": "9c11c2dca5cbb3e9",
"name": "Width of cut :12mm",
"info": "",
"x": 930,
"y": 260,
"wires": []
},
{
"id": "e9e2b98338505024",
"type": "csv",
"z": "9c11c2dca5cbb3e9",
"name": "",
"sep": ",",
"hdrin": "",
"hdrout": "none",
"multi": "one",
"ret": "\\n",
"temp": "",
"skip": "0",
"strings": true,
"include_empty_strings": "",
"include_null_values": "",
"x": 510,
"y": 360,
"wires": [
[
"83f2f31a1156776f"
]
]
},
{
"id": "400d8d16e25ec2ae",
"type": "file in",
"z": "9c11c2dca5cbb3e9",
"name": "",
"filename": "C:\\Users\\Zhang Shuai\\OneDrive\\桌面\\Speed RPM.csv",
"format": "utf8",
"chunk": false,
"sendError": false,
"encoding": "none",
"allProps": false,
"x": 440,
"y": 260,
"wires": [
[
"e9e2b98338505024"
]
]
},
{
"id": "eac966cd23a953d6",
"type": "debug",
"z": "9c11c2dca5cbb3e9",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 900,
"y": 360,
"wires": []
},
{
"id": "cae8f78c1696f4df",
"type": "ui_group",
"name": "Group one ",
"tab": "e59d61d6ed1fd2ed",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "e59d61d6ed1fd2ed",
"type": "ui_tab",
"name": "Tab - Main",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Let's see if you can figure it out with some hints.
In your function node, line 18 is:
var data = msg.payload
add this line after it:
node.warn(data)
save and run the flow and look at the output (I'd suggest editing the data file to three data items so the debug won't be over whelmed)
The node.warn will output to the debug sidebar and you'll see a yellow-orange strip next to them.
So, what do you see in the debug?
Is it what you expected?
Is what you see what you are using later in your code?
Also, just for reference you might want to look at this flow:
https://flows.nodered.org/flow/2938d98507c81648a2ab5ac1ba6e7d31
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
