How to use doughnut chart

Dashboard
1

Using Dashboard 2 v. 1.22.1, I cannot seem to make a simple doughnut chart work:

[{"id":"775023eeb01dbc93","type":"ui-chart","z":"89ebabdd43b154de","group":"5de5456a78b0f130","name":"Produktion","label":"Production","order":6,"chartType":"doughnut","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","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":"3","height":"6","className":"","interpolation":"linear","x":1010,"y":1140,"wires":[[]]},{"id":"bdc4aed27f8107a4","type":"function","z":"89ebabdd43b154de","name":"test","func":"node.send({ \"topic\": \"Battery\", \"payload\": 1 });\nnode.send({ \"topic\": \"Grid\", \"payload\": 2 });\nnode.send({ \"topic\": \"Consumption\", \"payload\": 3 });\nnode.send({ \"topic\": \"PV\", \"payload\": 4 });","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":850,"y":1140,"wires":[["775023eeb01dbc93"]]},{"id":"5cafc54683a26e50","type":"inject","z":"89ebabdd43b154de","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":700,"y":1140,"wires":[["bdc4aed27f8107a4"]]},{"id":"5de5456a78b0f130","type":"ui-group","name":"Overview","page":"bc37c563f4623688","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"bc37c563f4623688","type":"ui-page","name":"El","ui":"391b382dc05b69b2","path":"/el","icon":"home-lightning-bolt-outline","layout":"grid","theme":"c20a7e20a4e37ad0","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":1,"className":"","visible":"true","disabled":"false"},{"id":"391b382dc05b69b2","type":"ui-base","name":"Dashboard2","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"c20a7e20a4e37ad0","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"6px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]

Am I missing something?

2

Seem to be a bug there. (maybe you should raise an issue if not already raised)
If you set the info in payload and set x and y to key (topic and payload) it should work for you.

node.send({payload:{ topic: "Battery", payload: 1 }});
node.send({payload:{ topic: "Grid", payload: 2 }});
node.send({payload:{ topic: "Consumption", payload: 3 }});
node.send({payload:{ topic: "PV", payload: 4 }});
1 Like
3

Do the "Try Demo" examples in the docs not work for you? (they work for me and you can download the flows to test for yourself)

image
image821Ă—829 36.5 KB

1 Like
4

Yes, the examples work. But I don't have multiple series, so set "Series" to "None.

And I set X to msg.topic and Y to msg.payload.

As far as I can tell from the documentation, this should work?

5

Here is an example that works using your data sending the data in one msg

[{"id":"775023eeb01dbc93","type":"ui-chart","z":"1da152237a201b97","group":"5de5456a78b0f130","name":"Produktion","label":"Production","order":1,"chartType":"doughnut","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","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":"3","height":"6","className":"","interpolation":"linear","x":630,"y":180,"wires":[[]]},{"id":"bdc4aed27f8107a4","type":"function","z":"1da152237a201b97","name":"test","func":"msg.payload =[{\"year\": 2025, \"topic\": \"Battery\", \"payload\": 1 },\n              {\"year\": 2025, \"topic\": \"Grid\", \"payload\": 2 },\n              {\"year\": 2025, \"topic\": \"Consumption\", \"payload\": 3 },\n              {\"year\": 2025, \"topic\": \"PV\", \"payload\": 4 }]\nreturn msg\n","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":180,"wires":[["775023eeb01dbc93","5cda8ee305a8f84b"]]},{"id":"5cafc54683a26e50","type":"inject","z":"1da152237a201b97","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":240,"y":180,"wires":[["bdc4aed27f8107a4"]]},{"id":"5de5456a78b0f130","type":"ui-group","name":"Overview","page":"bc37c563f4623688","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"bc37c563f4623688","type":"ui-page","name":"El2","ui":"1d49757db21ab424","path":"/el2","icon":"home-lightning-bolt-outline","layout":"grid","theme":"c20a7e20a4e37ad0","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":2,"className":"","visible":"true","disabled":"false"},{"id":"1d49757db21ab424","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":5,"showDisconnectNotification":false},{"id":"c20a7e20a4e37ad0","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"6px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]

You might want to watch the video
Visualising Data - FlowFuse Dashboard (Node-RED Dashboard 2.0)

1 Like
6

Thanks :slight_smile:

Yes, sending as one message works fine. But would be great to be able to update values in singe messages, as I am not trying to show statistics, but current status.

I'll change the messaging, or use a different visualisation :slight_smile:

7

The method i posted above would allow single messages.

You can also use a join node, set to count 4 and output every subsequence message. This would allow you to send the whole data in one go every time a status is received.

8

(just passing by)

So are you meaning that you have (for instance) 4 things being shown, and 1 of them changes.

If you send a new message with the new value for what has changed, the graph then is corrupt as it would then only show the new value and the others wiped?

if so - just suggesting:

As each will have it's own topic, put all the messages through a node (function) that looks at the topics and stores them as context.

This way if one changes, the context for it changes and you read all 4 contexts and send them to the chart node.

EXAMPLE

const T1 == "first one's topic"
const T2 == "second one's topic"
const T3 == "third one's topic"
const T4 == "fourth one's topic

if (msg.topic == T1)
{
     context.set("D1",msg.payload
} else if (msg.topic == T2)
{
     context.set("D2",msg.payload
} else if (msg.topic == T3)
{
     context.set("D2",msg.payload
} else if (msg.topic == T4)
{
     context.set("D2",msg.payload
}
//  All 4 saves to context.
//  Now get all 4 contexts and send them as shown above in post from E1cid

node.send({payload:{topic"T1",payload, context.get("D1")}})
node.send({payload:{topic"T2",payload, context.get("D2")}})
node.send({payload:{topic"T3",payload, context.get("D3")}})
node.send({payload:{topic"T4",payload, context.get("D4")}})

Is that what you mean/want?

1 Like
9

Yes, I guess the solution is something like that :slight_smile:

10

I'm not sure that code is 100%.

Glad I could help.

Good luck with it all.

:wink:

11

Any progress?

Just checking.

12

I am considering instead if I should use an entirely different visualization.

But re-structuring to collect all data, and refresh doughnut chart should not be a problem. Just a bit of work :slight_smile: