Good day innovation people,
I would like to show this value on the bar chart, unfortunately my chart appear no data. above is the msg from the debug node.
Below I attach my chart value. please help me show this value into the bar chart.
It would be helpful if you would create a small flow - with an insert sending in the data - showing the problem. Then you could export the flow and attach it to a reply so someone could look at it and help you out.
When ever you are going to show data -like youe debug, it is better to grab the actual data so no oe has to spend their time (if they are willing to) typing in your data to help you. For example, here is a screen shot of a debug output:
and here is a copy of the data
{
"_msgid" : "7505b51a2580945d",
"headers" : {
"access-control-allow-origin" : "*",
"connection" : "close",
"content-length" : "112",
"content-type" : "application/json",
"date" : "Thu, 07 Jul 2022 09:30:33 GMT",
"server" : "nginx/1.10.3",
"x-node-red-request-node" : "10a810be"
},
"payload" : {
"iss_position" : {
"latitude" : "9.2798",
"longitude" : "-18.9108"
},
"message" : "success",
"timestamp" : 1657186233
},
"redirectList" : [],
"responseUrl" : "http://api.open-notify.org/iss-now.json",
"retry" : 0,
"statusCode" : 200,
"url" : "http://api.open-notify.org/iss-now.json"
}
Which would you rather use if you were going to try and reproduce an error to help someone?
There’s a great page in the docs (Working with messages : Node-RED) that will explain how to use the debug panel to find the right path to any data item.
Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.
What are you expecting the bar chart to look like? Normally the data points would be numbers, but all you have is a string "03:58"
Here I share example of my flow.
if the array have only bracket (msg.payload[0]. it is no problem to display on chart.
nut when the array become like msg.payload[0][1], the value not appear.
I am sorry to mention that I do not know how to create dummy data for array like msg.payload [0][0].
[
{
"id": "a235bc9fdfe320a9",
"type": "inject",
"z": "7231f873cc3353d6",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "1",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payloadType": "date",
"x": 730,
"y": 140,
"wires": [
[
"ec7327eab779212c",
"8d3b967e3c240b74",
"c72b305d408cde34"
]
]
},
{
"id": "ec7327eab779212c",
"type": "delay",
"z": "7231f873cc3353d6",
"name": "",
"pauseType": "random",
"timeout": "5",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1000",
"randomLast": "3000",
"randomUnits": "milliseconds",
"drop": false,
"outputs": 1,
"x": 920,
"y": 180,
"wires": [
[
"3c84a49272bae731"
]
]
},
{
"id": "8d3b967e3c240b74",
"type": "delay",
"z": "7231f873cc3353d6",
"name": "",
"pauseType": "random",
"timeout": "5",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "200",
"randomLast": "400",
"randomUnits": "milliseconds",
"drop": false,
"outputs": 1,
"x": 920,
"y": 220,
"wires": [
[
"91c92a63f7f341cb"
]
]
},
{
"id": "c72b305d408cde34",
"type": "change",
"z": "7231f873cc3353d6",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "first",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1070,
"y": 140,
"wires": [
[
"667977e5011873c3",
"f9d59985dbe57a6a"
]
]
},
{
"id": "3c84a49272bae731",
"type": "change",
"z": "7231f873cc3353d6",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "second",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1070,
"y": 180,
"wires": [
[
"667977e5011873c3",
"f9d59985dbe57a6a"
]
]
},
{
"id": "91c92a63f7f341cb",
"type": "change",
"z": "7231f873cc3353d6",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "third",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1070,
"y": 220,
"wires": [
[
"667977e5011873c3",
"f9d59985dbe57a6a"
]
]
},
{
"id": "667977e5011873c3",
"type": "random",
"z": "7231f873cc3353d6",
"name": "",
"low": 1,
"high": "5000",
"inte": "true",
"property": "payload",
"x": 1320,
"y": 180,
"wires": [
[]
]
},
{
"id": "85eb3c0122e5f2c7",
"type": "debug",
"z": "7231f873cc3353d6",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1590,
"y": 80,
"wires": []
},
{
"id": "f9d59985dbe57a6a",
"type": "join",
"z": "7231f873cc3353d6",
"name": "",
"mode": "custom",
"build": "array",
"property": "payload",
"propertyType": "msg",
"key": "topic",
"joiner": "\\n",
"joinerType": "str",
"accumulate": false,
"timeout": "",
"count": "3",
"reduceRight": false,
"reduceExp": "",
"reduceInit": "",
"reduceInitType": "",
"reduceFixup": "",
"x": 1290,
"y": 80,
"wires": [
[
"85eb3c0122e5f2c7",
"42bbe0f34a6a69fc"
]
]
},
{
"id": "42bbe0f34a6a69fc",
"type": "function",
"z": "7231f873cc3353d6",
"name": "ArrayBuilder",
"func": "\nvar m={\n \"series\":[\"X\"],\n \"data\":[[msg.payload[0],3,2,1]],\n \"labels\":[\"a\",\"b\",\"c\",\"d\"]\n};\n\nreturn {payload:[m]};\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1310,
"y": 260,
"wires": [
[
"306fa6fe8a339bfe"
]
]
},
{
"id": "306fa6fe8a339bfe",
"type": "ui_chart",
"z": "7231f873cc3353d6",
"name": "",
"group": "7629d4bc.d2960c",
"order": 16,
"width": 14,
"height": 4,
"label": "Cycle Time (dummy)",
"chartType": "bar",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "No Data",
"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": 1700,
"y": 260,
"wires": [
[]
]
},
{
"id": "7629d4bc.d2960c",
"type": "ui_group",
"name": "HMI",
"tab": "1700a06.300056",
"order": 1,
"disp": false,
"width": "28",
"collapse": false,
"className": ""
},
{
"id": "1700a06.300056",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1
}
]type or paste code here
In addition to my previous post, data should be an array of arrays as described in the docs node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub
I'm not seeing any error with the example you provided, is this the exact flow you are using? or is the input to the flow something other than an inject node sending a timestamp?
also in your function node
"data":[[msg.payload[0],3,2,1]],
why are you hard coding the values 3,2 and 1?
I would like to have the string data on the X-axis. on the debug node, the string appear but on the bar chart its no remain zero
The example that I provide no error because the data type not string. It not the exact flow that I using. Bc I pull data from MSSQL. Therefore I just put dummy one.
I have difficulties to show the string data type on the bar chart.
I hard coding value 3,2, and 1 because if the error on my 1st data solve, I will solve the value on the 2nd and 3rd data value by myself. By doing that I can improve myself. Heheeee 
Here I attach what I put on my function node before the chart node.
var m={
"series":["X"],
"data":[[msg.payload[0][8],3,2,1]],
"labels":[msg.payload[0][0],msg.payload[1][0],msg.payload[2][0],msg.payload[3][0]]
};
return {payload:[m]};
The 1st data not appear on my chart. but it appear on the debug node.
Do you mean the Y axis, or is it a horizontal bar chart?
I don't understand how it would show a string on the data axis, normally it is a number where the size of the number determines the length of the bar. Can you post a sketch of what you want the chart to look like for the data you have posted?
Without seeing the data going into your flow and the actual function node I’m not sure I can help
apologies my bad
var m={
"series":["X"],
"data":[[msg.payload[0][8],msg.payload[1][8],msg.payload[2][8],msg.payload[3][8]],
"labels":[msg.payload[0][0],msg.payload[1][0],msg.payload[2][0],msg.payload[3][0]]
};
I pull data from the gsheet into the bar chart. I have difficulties on the Y-axis. my Y-axis not appear if the gsheet empty.
my gheet have 4column that automatically start count on certain time. it will automatic 0 at 12am. I see this issue happen when the gsheet has no data.
X axis no prob.
This is my flow. I will try my best to create another one gheet to be access to everyone. sorry late.
I take the data from Sheet1!Q3:Y9
[{"id":"c2fdb393773e6f48","type":"function","z":"8dd8ac3f56e8d41d","name":"ArrayBuilder","func":"\nvar m={\n \"series\":[\"X\"],\n \"data\":[[msg.payload[0][8],msg.payload[1][8],msg.payload[2][8],msg.payload[3][8]]],\n \"labels\":[msg.payload[0][0],msg.payload[1][0],msg.payload[2][0],msg.payload[3][0]]\n};\n\nreturn {payload:[m]};\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":320,"wires":[["f1ea9b35d7a4969b","ed295226831357aa"]]},{"id":"f1ea9b35d7a4969b","type":"ui_chart","z":"8dd8ac3f56e8d41d","name":"","group":"7629d4bc.d2960c","order":17,"width":14,"height":4,"label":"Cycle Time (dummy)","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"No Data","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":840,"y":320,"wires":[[]]},{"id":"b0098217239d8431","type":"ui_button","z":"8dd8ac3f56e8d41d","name":"","group":"7629d4bc.d2960c","order":13,"width":0,"height":0,"passthru":false,"label":"Clear All","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[]","payloadType":"json","topic":"","topicType":"str","x":620,"y":260,"wires":[["f1ea9b35d7a4969b"]]},{"id":"465c321a91799a7b","type":"inject","z":"8dd8ac3f56e8d41d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"15","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":320,"wires":[["55175556f8e7806d"]]},{"id":"ed295226831357aa","type":"debug","z":"8dd8ac3f56e8d41d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":420,"wires":[]},{"id":"55175556f8e7806d","type":"GSheet","z":"8dd8ac3f56e8d41d","creds":"","method":"","action":"","sheet":"","cells":"Sheet1!Q3:Y9","flatten":false,"name":"","x":300,"y":320,"wires":[["c2fdb393773e6f48"]]},{"id":"7629d4bc.d2960c","type":"ui_group","name":"HMI","tab":"1700a06.300056","order":1,"disp":false,"width":"28","collapse":false,"className":""},{"id":"1700a06.300056","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]
Here I attach the flow
I still don't understand how you want the string value to appear. How is the string to be converted to a bar length?
I want to call data from the gsheet.
The gsheet column and row are different number each day.
For example, today I would like to have 2row and 2 column data from the gsheet. The payload will be
msg.payload[0][0]
msg.payload[0][1]
msg.payload[1][0]
msg.payload[1][1].
but on my function node I already call the gsheet data for 4column 6row because this is the maximum I will put on the gsheet on different day.
`var arr = [
{"Seq": msg.payload[0][0], "Model": msg.payload[0][1], "Colour": msg.payload[0][2],"Plan": msg.payload[0][3],"Actual": msg.payload[0][4],"Balance": msg.payload[0][5]},
{"Seq": msg.payload[1][0], "Model": msg.payload[1][1], "Colour": msg.payload[1][2],"Plan": msg.payload[1][3],"Actual": msg.payload[1][4],"Balance": msg.payload[1][5] },
{"Seq": msg.payload[2][0], "Model": msg.payload[2][1], "Colour": msg.payload[2][2],"Plan": msg.payload[2][3],"Actual": msg.payload[2][4],"Balance": msg.payload[2][5] },
{"Seq": msg.payload[3][0], "Model": msg.payload[3][1], "Colour": msg.payload[3][2],"Plan": msg.payload[3][3],"Actual": msg.payload[3][4],"Balance": msg.payload[3][5] },
];
msg.payload = arr;
return msg;`
As per today it can only can give me value on
msg.payload[0][0]
msg.payload[0][1]
msg.payload[1][0]
msg.payload[1][1]
the other value not in the gsheet yet. therefore the value not appear on the ui.
I do mistakes on the function node by calling the maximum data that is not there yet.
I think, I should call dynamic array to perform this. but I dont know yet how to call dynamic array
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
