Why not use the ui-template node and create the gauges all dynamically, something like below.
The payload array is injected by the inject node. The function creates a html page with javascript. and the ui-template node displays all dounuts.
[{"id":"a7d1f1c4.c8cb1","type":"inject","z":"57675e72.26a0d8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"customer\":\"john\",\"size\":23},{\"customer\":\"sarah\",\"size\":47},{\"customer\":\"tom\",\"size\":34}]","payloadType":"json","x":80,"y":2460,"wires":[["422318c8.3f3c","819c37d1.394e8"]]},{"id":"422318c8.3f3c","type":"function","z":"57675e72.26a0d8","name":"","func":"let html = \"\";\nlet script = `<script>\n `;\n\n\nfor(let i=0; i < msg.payload.length; i++){\n let vals = [100-msg.payload[i].size,msg.payload[i].size]\n html += `<canvas id=\"canvas${i}\" width=150 height=150 ></canvas>\\n`;\n script += `var canvas=document.getElementById(\"canvas${i}\");\n var ctr=canvas.getContext(\"2d\")\n var colors=['gray','skyblue'];\n values=[${vals[0]},${vals[1]}];\n labels=['name','${msg.payload[i].customer}'];\n dmbChart(ctr,70,70,60,10,values,colors,labels,1);`\n}\nmsg.template= html+script+\n`function dmbChart(ctx,cx,cy,radius,arcwidth,values,colors,labels,selectedValue){\n var tot=0;\n var accum=0;\n var PI=Math.PI;\n var PI2=PI*2;\n var offset=-PI/2;\n ctx.lineWidth=arcwidth;\n for(var i=0;i<values.length;i++){tot+=values[i];}\n for(var i=0;i<values.length;i++){\n ctx.beginPath();\n ctx.arc(cx,cy,radius,\n offset+PI2*(accum/tot),\n offset+PI2*((accum+values[i])/tot)\n );\n ctx.strokeStyle=colors[i];\n ctx.stroke();\n accum+=values[i];\n }\n var innerRadius=radius-arcwidth-3;\n ctx.beginPath();\n ctx.arc(cx,cy,innerRadius,0,PI2);\n ctx.fillStyle=colors[selectedValue];\n ctx.fill();\n ctx.textAlign='center';\n ctx.textBaseline='bottom';\n ctx.fillStyle='white';\n ctx.font=(innerRadius)+'px verdana';\n ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9);\n ctx.font=(innerRadius/4)+'px verdana';\n ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);\n}\n</script>`;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":310,"y":2480,"wires":[["a0b72f46.f0133","6bd8925c.1728b4"]]},{"id":"a0b72f46.f0133","type":"ui_template","z":"57675e72.26a0d8","group":"8b5cde76.edd58","name":"","order":0,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":570,"y":2460,"wires":[[]]},{"id":"6bd8925c.1728b4","type":"debug","z":"57675e72.26a0d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","targetType":"msg","statusVal":"","statusType":"auto","x":500,"y":2540,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","z":"","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
