Problem getting DB2 chart to display data

Dashboard
1

I am trying to display data from a sensor using the DB2 Chart widget. The data arrives every 1 minute. Because I need to convert some of the data, I have a Function widget in front of the Chart widget, so I can output data to the chart in any format required. The example input data is very simple:

“A”: 1, “B”: 2, “C”: 3, “D”: 4, “E”:5

I have attempted to send data to the chart in many different formats to have it displayed as a bar chart replacing existing data with new data. Could someone please provide me with the format required in order to get the chart to work?

2

Hi @k5map

I don't do DB much (plenty here though that do) - but willing to take a crack at it!

can you share a minimal flow, that demos the issue?

  • And maybe share an image mock up on what you want as the graph
3

The easiest way is;
[{x: 'A', y: 1}, {x: 'B', y: 2}, {x: 'C', y: 3}, {x: 'D', y: 4}, {x: 'E', y: 5},]

then in the chart widget set X: key to x and Y:key to y and Action to Replace

see (Chart ui-chart | Node-RED Dashboard 2.0) for more information

Quick flow as demo. Note JSONata used in inject node involves bunches of "

[{"id":"0f6d3d8b1e5b1b4a","type":"ui-chart","z":"506727cd93754bdb","group":"2b6374aea574ed0a","name":"","label":"chart","order":9007199254740991,"chartType":"bar","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"y","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":850,"y":5640,"wires":[[]]},{"id":"9758136e0ea1dc6f","type":"inject","z":"506727cd93754bdb","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"x\":\"A\",\"y\":1},{\"x\":\"B\",\"y\":2},{\"x\":\"C\",\"y\":3},{\"x\":\"D\",\"y\":4},{\"x\":\"E\",\"y\":5}]","payloadType":"json","x":650,"y":5640,"wires":[["0f6d3d8b1e5b1b4a"]]},{"id":"2b6374aea574ed0a","type":"ui-group","name":"Tester","page":"7294756f31e17b81","width":6,"height":1,"order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"7294756f31e17b81","type":"ui-page","name":"Home","ui":"b810194ea14e3502","path":"/home","icon":"home","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":9,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"8dfa472da192de08","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.26.0"}}]
2 Likes
4

@Buckskin … Ok I think I did as you suggested but still am unable to get anything to show. Here is my data:

msg = [
{"band": "6m", "data": nos6m },
{"band": "10m", "data": nos10m },
{"band": "15m", "data": nos15m },
{"band": "20m", "data": nos20m },
{"band": "30m", "data": nos30m },
{"band": "40m", "data": nos40m },
{"band": "80m", "data": nos80m },
{"band": "160m", "data": nos160m }
];

Here are my chart settings:

Type: Bar, Group: Side-bySide, Action: Replace, Series: (none), X: msg.band, Y: msg.data

See anything out of place?

5

@Buckskin … my bad… I forgot to change “msg” to “key” in the chart widget. Once I did, all is good. now. Much thanks for your assistance.

6

If you change msg = to msg.payload = you can then set X: band & Y: data