How to control chart, configured as pie?

I'm playing a little bit with Dashboard 2 in order to find out, what the best widget is, to be used for the different applications.

Unfortunately, I find very little information about the ui-chart node, configured as "Pie".

As test I use "node-red-contrib-os", which gives the following output:

msg : Object
object
_msgid: "956fbf90d52d8a08"
payload: object
totalmem: 15871.977
freemem: 15231.863
memusage: 4.03

This is an object with 3 key/value pairs. The first pair is i.m.o not really relevant.
I want to show the used memory and the free memory.
I noticed, that in order to show them both, I have to send a message for each key/value pair.

I think, that this can be done in one message.

The output of the "memory" node, I connected to the input of a "Function" node.
The content of the "Function" node is as follows:

let payload = msg.payload;
msg.topic = Object.keys(payload)[1]
msg.payload = Object.values(payload)[1]
node.send (msg);

msg.topic = Object.keys(payload)[2]
msg.payload = Object.values(payload)[2]
node.send(msg);

The "chart" node is configured as follows:

This results in a widget on the dashboard, but it does not look very nice

Questions:

  1. What is the easiest way to send the data to the "ui-chart"node?
    Is it possible to send the data of multiple slices in 1 message?
  2. As the used memory is very small, compared with the free memory, it is hardly visible.
    Any idea to make it look better?

Best Regards and Happy Easter

Does this example help?

[{"id":"d10804e8db462840","type":"inject","z":"997da33a0beedade","g":"e369e5a41a4eda75","name":"Finance Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"year\":2021,\"quarter\":\"Q1\",\"earnings\":115},{\"year\":2021,\"quarter\":\"Q2\",\"earnings\":120},{\"year\":2021,\"quarter\":\"Q3\",\"earnings\":100},{\"year\":2021,\"quarter\":\"Q4\",\"earnings\":180}]","payloadType":"json","x":190,"y":2840,"wires":[["b87fe3201b219a05"]]},{"id":"49dbac215fa8b40f","type":"inject","z":"997da33a0beedade","g":"e369e5a41a4eda75","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":210,"y":2880,"wires":[["b87fe3201b219a05"]]},{"id":"b87fe3201b219a05","type":"ui-chart","z":"997da33a0beedade","g":"e369e5a41a4eda75","group":"e0d7a0182b3c8eb7","name":"Pie Chart","label":"Pie Chart","order":1,"chartType":"pie","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"quarter","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"earnings","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"4","height":"4","className":"","interpolation":"linear","x":380,"y":2840,"wires":[[]]},{"id":"e0d7a0182b3c8eb7","type":"ui-group","name":"PIe Charts","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Radial Charts","ui":"ID-BASE-1","path":"/radial","icon":"home","layout":"notebook","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":12,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","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":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"80ae9fdd5a68e69e","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

Indeed it is, and in fact I’d have thought it was essential for a pie chart.

Here is an example of a flow producing a pie chart of live UK electricity generation breakdown.


Code:

[{"id":"85a5c6efde2ed0bf","type":"inject","z":"68b09a573ddb66a3","name":"Every min","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":80,"wires":[["5fe3c9ebe9f6c940"]]},{"id":"5fe3c9ebe9f6c940","type":"exec","z":"68b09a573ddb66a3","command":"curl -X GET https://api.carbonintensity.org.uk/generation  -H 'Accept: application/json'","addpay":"","append":"","useSpawn":"false","timer":"","winHide":false,"oldrc":false,"name":"GET","x":250,"y":80,"wires":[["cf20b224a2fd8496"],[],[]]},{"id":"cf20b224a2fd8496","type":"json","z":"68b09a573ddb66a3","name":"","property":"payload","action":"","pretty":false,"x":390,"y":80,"wires":[["67fe961f3075204e"]]},{"id":"67fe961f3075204e","type":"change","z":"68b09a573ddb66a3","name":"to payload","rules":[{"t":"move","p":"payload.data.generationmix","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"now","pt":"msg","to":"object","tot":"date"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":80,"wires":[["8eda54fb79f0f4c9","5f7359518d2031a8","d9b7de057ec29fcd"]]},{"id":"8eda54fb79f0f4c9","type":"ui-text","z":"68b09a573ddb66a3","group":"e0d7a0182b3c8eb7","order":1,"width":0,"height":0,"name":"","label":"Updated at","format":"{{msg.payload}}","layout":"row-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"now","valueType":"msg","x":710,"y":60,"wires":[]},{"id":"5f7359518d2031a8","type":"ui-chart","z":"68b09a573ddb66a3","group":"e0d7a0182b3c8eb7","name":"live chart 4x6","label":"Live Generation Mix 4x6","order":3,"chartType":"pie","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"fuel","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"perc","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":"4","height":"6","className":"","interpolation":"linear","x":710,"y":100,"wires":[[]]},{"id":"d9b7de057ec29fcd","type":"debug","z":"68b09a573ddb66a3","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":140,"wires":[]},{"id":"e0d7a0182b3c8eb7","type":"ui-group","name":"Defaults","page":"d0621b8f20aee671","width":"4","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"d0aaeb56c796f1d4","path":"/charts","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":3,"className":"","visible":"true","disabled":"false"},{"id":"d0aaeb56c796f1d4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"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":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"2e031d568b8f0706","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

A sample of the data:

[{"fuel":"biomass","perc":3.1},
{"fuel":"coal","perc":0},
{"fuel":"imports","perc":3.5},
{"fuel":"gas","perc":13.7},
{"fuel":"nuclear","perc":15},
{"fuel":"other","perc":0},
{"fuel":"hydro","perc":0},
{"fuel":"solar","perc":0.5},
{"fuel":"wind","perc":64.1}]