# How add circles in svg based on number of incoming inputs

**URL:** <https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [4 April 2022 13:50 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773 "2022-04-04T13:50:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ganesh](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@Ganesh](https://discourse.nodered.org/u/Ganesh)\
**Post date:** [4 April 2022 13:50 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/1 "2022-04-04T13:50:14Z")

</div>

Hi  
I have around 250 Tags in database for every tag I want to display a circle on SVG Image , and the number of tags in dB keep varying , with it the circles in SVG should also vary  
Ex = if I have 50 Tags in dB then the SVG image should show 50 circles ,if its 100 then the SVG image should show 100 circles likewise,  
Can anyone tell me how to do this .  
Thankyou & Regards

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [4 April 2022 14:39 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/2 "2022-04-04T14:39:52Z")

</div>

Hi @Ganesh,  
Is there anything you have tried/searched already?  
And do you need to display that svg inside the Node-RED dashboard, or something else?

In case you want to show it in the dashboard, [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Getting-started-with-the-UI-SVG-node) is a tutorial about how to achieve that for a single circle. If you need N circlles, then you need to add some logic to repeat this N times. I don't know where (x,y) you want to draw the circles, or which which size (radius) because you haven't mentioned any of that.

Bart

---

<div class="post-metadata">

**Author:** ![Ganesh](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@Ganesh](https://discourse.nodered.org/u/Ganesh)\
**Post date:** [5 April 2022 04:08 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/3 "2022-04-05T04:08:08Z")

</div>

Hi @BartButenaers ,

 ![ZM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/ba94a3390c2c83ce5e1d584fc109522a444239fa.jpeg)  
as you can see in above image I have an SVG image inside the Node-RED dashboard , in above image we have 8 Zones , and the no of circle will be shown in any one of these Zones, and the X and Y positions are the center point of these zones which will be stored in dB  
number of circles is equal to no of Tag ID in dB so there will N number of circles varying from 0 to 250 more or less , circle radius is 10  
can you provide an example or method how to achieve this  
Thanks & Regards

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 April 2022 11:01 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/4 "2022-04-06T11:01:25Z")

</div>

1. Install the node-red-contrib-ui-svg node
2. Read the tutorial that I have given you above.
3. Now you know how to display a circle. You can now all your rectangles, by modifying the svg source manually or via the drawsvg editor.
4. Add an svg text element below each rectangle, to show your nulbers afterwards.
5. Inject messages to add circles dynamically to your drawing and messages to update the numbers in your text elements. See [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg#supported-commands) which kind of messages can be injected.

---

<div class="post-metadata">

**Author:** ![Ganesh](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@Ganesh](https://discourse.nodered.org/u/Ganesh)\
**Post date:** [6 April 2022 13:25 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/5 "2022-04-06T13:25:01Z")

</div>

Hi @BartButenaers  
I was able to do what you have told for one circle , can you give an example on how add to N numbers of circles using single logic and each circles having different label/element ID and different x & Y locations , in SVG Node  
would Help out a lot with what I am trying to do.  
Thank you & Regards

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 April 2022 17:28 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/6 "2022-04-06T17:28:17Z")

</div>

@Ganesh,

Here is an example flow:

```auto
[{"id":"cd43b95ab3573f07","type":"ui_svg_graphics","z":"5b027e373754636b","group":"28cdac6db4804909","order":1,"width":"9","height":"5","svgString":"<svg x=\"0\" y=\"0\" height=\"100%\" viewBox=\"0 0 100 100\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <text id=\"circle_count\" x=\"50\" y=\"50\" style=\"fill:red\">--</text>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}","name":"","x":690,"y":280,"wires":[[]]},{"id":"e64174ac8a490b40","type":"function","z":"5b027e373754636b","name":"Create messages","func":"// The input message contains your circles\nvar circles = msg.payload || [];\n\n// Remove all existing circles\nnode.send({\n payload: {\n command: \"remove_element\", \n selector: \"circle\"\n }\n})\n\nvar circleCount = circles.length;\n\nfor(var i=0; i<circleCount; i++) {\n circle = circles[i];\n \n node.send({\n payload: {\n command: \"add_element\", \n elementType: \"circle\",\n elementId: \"circle_\" + i, \n elementAttributes: {\n cx: circle.x,\n cy: circle.y,\n r: circle.radius\n },\n elementStyleAttributes: {\n fill: \"red\",\n stroke: \"black\"\n },\n textContent: i\n }\n })\n}\n\n// Show the number of circles\nnode.send({\n payload: {\n command: \"update_text\",\n selector: \"#circle_count\",\n textContent: circleCount\n }\n})","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":280,"wires":[["cd43b95ab3573f07"]]},{"id":"fa8f2940f16e1421","type":"inject","z":"5b027e373754636b","name":"Inject circles","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"x\":10,\"y\":10,\"radius\":8},{\"x\":20,\"y\":10,\"radius\":8},{\"x\":30,\"y\":10,\"radius\":8},{\"x\":40,\"y\":10,\"radius\":8},{\"x\":50,\"y\":10,\"radius\":8},{\"x\":60,\"y\":10,\"radius\":8},{\"x\":70,\"y\":10,\"radius\":8},{\"x\":80,\"y\":10,\"radius\":8},{\"x\":90,\"y\":10,\"radius\":8}]","payloadType":"json","x":290,"y":280,"wires":[["e64174ac8a490b40"]]},{"id":"28cdac6db4804909","type":"ui_group","name":"Circle demo","tab":"8bbab1b47b8e87c8","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"8bbab1b47b8e87c8","type":"ui_tab","name":"SVG","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

When you press the button, a message will be injected containing circles. The function node will create messages to delete all the previous circles in the drawing, create new circles and show the circle count in the text field:

 ![circle_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a37350d9be71bf57aa58d787e997fe6e7c4eea3.gif)

The [readme](https://github.com/bartbutenaers/node-red-contrib-ui-svg) page contains a LOT of info about how to do stuff, and there are also tutorials on the [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki).

Now you have a basic flow to get started. You can create whatever shapes you want, and manipulate them via input messages (as you can see in the numerous examples available).

---

<div class="post-metadata">

**Author:** ![Ganesh](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@Ganesh](https://discourse.nodered.org/u/Ganesh)\
**Post date:** [7 April 2022 11:07 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/7 "2022-04-07T11:07:05Z")

</div>

Hi @BartButenaers  
Thanks for the example !

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 April 2022 11:07 UTC](https://discourse.nodered.org/t/how-add-circles-in-svg-based-on-number-of-incoming-inputs/60773/8 "2022-04-21T11:07:26Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.