Chart (dashboard 2.0) issue

Dashboard
1

Hi all node-red coders,
I am having some problems with the use of the chart option. I am sending a single item from a msg (multiple msg are being send) The item is 'extracted with the use of javascript. Using chart with the line option and proper x and y def. nothing appear in the chart. Does the item need a certain format (csv, json or else) and send as a key pair or something else.

2

The node does require setting up to match the input format.

There are some examples in the documentation at Getting Started with Dashboard • FlowFuse

Or if you share your chart config and a sample message we can help more precisely. (inject and chart nodes, exported, not screen captures).

3

Here is my sample config:

[
{
"id": "7770ce059e44db47",
"type": "tab",
"label": "MySQL with Node-RED",
"disabled": false,
"info": "",
"env":
},
{
"id": "e3d44fc3e887d2cb",
"type": "mysql",
"z": "7770ce059e44db47",
"mydb": "631e80da437250bf",
"name": "MySQL DB",
"x": 350,
"y": 220,
"wires": [

]
},
{
"id": "105dbdd2db29eecf",
"type": "inject",
"z": "7770ce059e44db47",
"name": "",
"props": [
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "start",
"x": 110,
"y": 100,
"wires": [
[
"10751689ef9148de"
]
]
},
{
"id": "303702b62433f43d",
"type": "inject",
"z": "7770ce059e44db47",
"name": "",
"props": [
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "stop",
"x": 110,
"y": 140,
"wires": [
[
"10751689ef9148de"
]
]
},
{
"id": "10751689ef9148de",
"type": "BLE Scanner",
"z": "7770ce059e44db47",
"name": "BLE Scanner",
"searchFor": "",
"searchForType": "Name",
"output": "Peripheral",
"outputType": "Output",
"x": 310,
"y": 120,
"wires": [
[
"f4b171f5ad9dab4b",
"a7c2e45a29fa9166"
]
]
},
{
"id": "20a074f5cbbf9cc9",
"type": "function",
"z": "7770ce059e44db47",
"name": "Insert",
"func": "// Haal de YAML-string op uit de payload\nconst yamlString = msg.payload;\n\n// Parse de YAML-string naar een JavaScript object\nlet data;\n\ntry {\n // Probeer eerst te parsen. Als het een string is, parse dan.\n if (typeof yamlString === 'string') {\n \n data = JSON.parse(yamlString);\n data.advertisement=JSON.stringify(data.advertisement);\n\n // Wijzig column connectable 0 in FALSE en 1 in TRUE \n \n if (data.connectable === false) {\n data.connectable = "False";\n } else {\n data.connectable = "True";\n }\n // Wijzig column mtu (Maximum Transmission Unit) Not Known als leeg\n\n if (data.mtu === null) {\n data.mtu = "Not Known";\n } \n // Wijzig column address in Not Set als leeg \n\n if (data.address === "") {\n data.address = "Not Set";\n } \n\n } else {\n data = yamlString;\n }\n} catch (e) {\n node.error("Fout bij het parsen van de data: " + e.message);\n return null;\n}\n\n// Definieer de tabel en kolommen\nconst table = "nodered.payload";\n\n// Pas dit aan naar je eigen kolommen\nconst columns = "id, address, addressType, connectable, advertisement, rssi, mtu, state";\n\n// MySQL in Node-RED gebruikt '?' als placeholders\n// De volgorde in de array moet overeenkomen met de volgorde in de columns string\n\n// Zorg dat columnnames overeenkomen met de YAML/JSON keys\nconst values = [\n data.id,\n data.address,\n data.addressType,\n data.connectable,\n data.advertisement,\n data.rssi,\n data.mtu,\n data.state\n];\n\n// De MySQL-node in Node-RED gebruikt msg.topic als de SQL-query\nmsg.topic = INSERT INTO ${table} (${columns}) VALUES (?, ?, ?, ?, ?, ?, ?, ?);\n\n// Converteer OBJECT advertisement in een leesbare STRING vorm\n\n// Ken inhoud VALUES to aan payload\nmsg.payload = values;\n\nreturn msg;\n\n",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": ,
"x": 150,
"y": 220,
"wires": [
[
"e3d44fc3e887d2cb"
]
],
"info": "topic = "INSERT INTO nodered.payload (id, address, addressType, connectable, advertisement, rssi, mtu, state) values (msg.payload.col1, msg.payload.col2, msg.payload.col3, msg.payload.col4, msg.payload.col5, msg.payload.col6, msg.payload.col7, msg.payload.col8)";\nmsg.topic = topic;\nreturn msg;\n\n\n\nif (msg.topic && typeof msg.topic === "string") {\n // Veilige verwerking\n} else {\n msg.topic = ""; // Fallback\n}\n//topic = "INSERT INTO nodered.payload (id, address, addressType, connectable, advertisement, rssi, mtu, state) values (msg.payload[0]);"\nbericht = "INSERT INTO nodered.payload (id) values (?);"\nmsg.topic = bericht;\nreturn msg;\n\n\n\n// Parse YAML naar JavaScript object\nconst yaml = require("js-yaml");\nconst msg = "";\n\ntry {\n // Als de YAML in msg.payload staat als string:\n const data = yaml.load(msg.payload);\n\n // Maak een INSERT-message\n msg.topic = "INSERT INTO nodered.payload (id, address) VALUES (?, ?)";\n msg.payload = [data.kolom1, data.kolom2];\n\n return msg;\n} catch (e) {\n node.error("YAML parse error: " + e.message);\n return null;\n}\n\n\n\n"
},
{
"id": "168befc727e44ea2",
"type": "link out",
"z": "7770ce059e44db47",
"name": "",
"mode": "link",
"links": [
"282c89095560b351",
"6b058ee24f007358"
],
"x": 625,
"y": 100,
"wires":
},
{
"id": "282c89095560b351",
"type": "link in",
"z": "7770ce059e44db47",
"name": "",
"links": [
"168befc727e44ea2"
],
"x": 55,
"y": 220,
"wires": [
[
"20a074f5cbbf9cc9"
]
]
},
{
"id": "f4b171f5ad9dab4b",
"type": "json",
"z": "7770ce059e44db47",
"name": "",
"property": "payload",
"action": "",
"pretty": true,
"x": 530,
"y": 100,
"wires": [
[
"168befc727e44ea2"
]
]
},
{
"id": "3ccd8cc91c2f5d2b",
"type": "comment",
"z": "7770ce059e44db47",
"name": "Omschrijving (zie properties)",
"info": "Deze flow 'ontvangt' Bluetooth device berichten \ndie aangeven in welke status het device zich bevindt. \n\nHet ontvangen bericht wordt omgezet naar \nhet bekende JSON formaat en vervolgens \ndoorgezet naar een ui_table daarna via \neen SQL commando in een MySQL Database \ngeschreven.\n\nDe data stream wordt ook gebruikt om\neen chart (lijn) te voorzien van de\ngewenste gegevens.\n\n",
"x": 160,
"y": 40,
"wires":
},
{
"id": "d00a0dc5abdc821f",
"type": "debug",
"z": "7770ce059e44db47",
"name": "Dbg 1",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "topic",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 530,
"y": 220,
"wires":
},
{
"id": "027aafa949e109b0",
"type": "ui-chart",
"z": "7770ce059e44db47",
"group": "db94b7c1e4b49d4d",
"name": "Chart",
"label": "BLE Chart",
"order": 1,
"chartType": "line",
"category": "payload",
"categoryType": "msg",
"xAxisLabel": "Id",
"xAxisProperty": "Id",
"xAxisPropertyType": "property",
"xAxisType": "time",
"xAxisFormat": "",
"xAxisFormatType": "{HH}:{mm}:{ss}",
"xmin": "",
"xmax": "",
"yAxisLabel": "Amount",
"yAxisProperty": "Amount",
"yAxisPropertyType": "property",
"ymin": "1",
"ymax": "100",
"bins": 10,
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": "4",
"showLegend": true,
"removeOlder": "5",
"removeOlderUnit": "1",
"removeOlderPoints": "10000",
"colors": [
"#0042aa",
"#b51a00",
"#ffb43f",
"#2ca02c",
"#a347e1",
"#d62728",
"#ff8c82",
"#9467bd",
"#a8c6fe"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#74a7fe"
],
"gridColorDefault": false,
"width": "10",
"height": "5",
"className": "",
"interpolation": "linear",
"x": 330,
"y": 280,
"wires": [
[
"d00a0dc5abdc821f",
"85bd07861bf23dd1"
]
]
},
{
"id": "02b551bf16d5acc4",
"type": "function",
"z": "7770ce059e44db47",
"name": "Convert",
"func": "const yamlString = msg.payload;\nlet data;\n\ndata=JSON.parse(yamlString);\n// data.id=JSON.stringify(data.id);\ndata.id = "[" + "\"" + "{" + JSON.stringify(data.id) + " }" + "\"" + "]" ;\n\nmsg.payload = data.id;\n//msg.topic = 'Id:';\nreturn msg;\n",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": ,
"x": 160,
"y": 280,
"wires": [
[
"85bd07861bf23dd1"
]
],
"info": "topic = "INSERT INTO nodered.payload (id, address, addressType, connectable, advertisement, rssi, mtu, state) values (msg.payload.col1, msg.payload.col2, msg.payload.col3, msg.payload.col4, msg.payload.col5, msg.payload.col6, msg.payload.col7, msg.payload.col8)";\nmsg.topic = topic;\nreturn msg;\n\n################################################\n\nif (msg.topic && typeof msg.topic === "string") {\n // Veilige verwerking\n} else {\n msg.topic = ""; // Fallback\n}\n//topic = "INSERT INTO nodered.payload (id, address, addressType, connectable, advertisement, rssi, mtu, state) values (msg.payload[0]);"\nbericht = "INSERT INTO nodered.payload (id) values (?);"\nmsg.topic = bericht;\nreturn msg;\n\n##################################################\n// used for SQL cmd\n// Parse YAML naar JavaScript object\nconst yaml = require("js-yaml");\nconst msg = "";\n\ntry {\n // Als de YAML in msg.payload staat als string:\n const data = yaml.load(msg.payload);\n\n // Maak een INSERT-message\n msg.topic = "INSERT INTO nodered.payload (id, address) VALUES (?, ?)";\n msg.payload = [data.kolom1, data.kolom2];\n\n return msg;\n} catch (e) {\n node.error("YAML parse error: " + e.message);\n return null;\n}\n\n#######################################################\n\n"
},
{
"id": "6b058ee24f007358",
"type": "link in",
"z": "7770ce059e44db47",
"name": "",
"links": [
"168befc727e44ea2"
],
"x": 55,
"y": 280,
"wires": [
[
"02b551bf16d5acc4"
]
]
},
{
"id": "a7c2e45a29fa9166",
"type": "ui-table",
"z": "7770ce059e44db47",
"group": "69a2956a58c3da29",
"name": "Table",
"label": "",
"order": 1,
"width": "12",
"height": "8",
"maxrows": "2",
"passthru": false,
"autocols": true,
"showSearch": true,
"deselect": false,
"selectionType": "none",
"columns": ,
"mobileBreakpoint": "lg",
"mobileBreakpointType": "defaults",
"action": "append",
"className": "",
"x": 530,
"y": 140,
"wires": [

]
},
{
"id": "85bd07861bf23dd1",
"type": "debug",
"z": "7770ce059e44db47",
"name": "Dbg 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 530,
"y": 280,
"wires":
},
{
"id": "b6e077883a7ce1f4",
"type": "comment",
"z": "7770ce059e44db47",
"name": "Converteer msg",
"info": "Converteer het bericht naar een 1 uitgaande\nveld en een tekst veld. Gecombineert alss\neen JSON bericjt (id, waarde)",
"x": 120,
"y": 320,
"wires":
},
{
"id": "631e80da437250bf",
"type": "MySQLdatabase",
"name": "",
"host": "127.0.0.1",
"port": "3306",
"db": "nodered",
"tz": "",
"charset": "UTF8"
},
{
"id": "db94b7c1e4b49d4d",
"type": "ui-group",
"name": "BLE Chart",
"page": "c99fb51b31462640",
"width": 6,
"height": "5",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "69a2956a58c3da29",
"type": "ui-group",
"name": "BLE Table",
"page": "d90c2f59699047da",
"width": "12",
"height": "8",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "c99fb51b31462640",
"type": "ui-page",
"name": "Chart Page",
"ui": "a0ac7ca271196550",
"path": "/page1",
"icon": "home",
"layout": "tabs",
"theme": "aa5840f7ed4c7129",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": ""
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": "true",
"disabled": false
},
{
"id": "d90c2f59699047da",
"type": "ui-page",
"name": "Table Page",
"ui": "a0ac7ca271196550",
"path": "/page2",
"icon": "home",
"layout": "grid",
"theme": "aa5840f7ed4c7129",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": ""
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 2,
"className": "",
"visible": "true",
"disabled": false
},
{
"id": "a0ac7ca271196550",
"type": "ui-base",
"name": "BLE Scanner",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "icon",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": false
},
{
"id": "aa5840f7ed4c7129",
"type": "ui-theme",
"name": "Theme Name",
"colors": {
"surface": "#004d65",
"primary": "#fefcdd",
"bgPage": "#d4e3fe",
"groupBg": "#fefcdd",
"groupOutline": "#d9d9e0"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
},
{
"id": "9071be2fbf5597ea",
"type": "global-config",
"env": ,
"modules": {
"node-red-node-mysql": "3.0.3",
"node-red-contrib-ble-sense": "0.0.13",
"@flowfuse/node-red-dashboard": "1.32.0"
}
}
]

Hopefully you revive the chart. The DB and Table works like a charm.

Best regards,

Ger
Nice evening (19:55 over here)

4

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

5

For Dashboard 2.0 charts, I would first send a single point in the shape the widget expects rather than a CSV string. Try a debug node immediately before the chart and inspect msg.payload, then test a simple numeric payload with a timestamp or x value and a numeric y value. Keep the x field consistent across messages and check that the chart is configured for the same property names; also make sure the selected series is not hidden and that the browser has received a fresh dashboard deploy.

6

It is hard to be sure about anything unless @GerB fixes the way his code is posted, however he does seem to have a line chart and a single point does not show up very well on a line chart.

The original dashboard needed x,y coordinates to plot a chart from stored data. Dashboard 2 also works with key names eg {"time": 123456789, "temp": 432 }.
But @GerB may be plotting live data, plotting a point each time the data arrives.
I think that talk of (x,y) may be confusing the issue.

Can you explain what you mean?