# Dynamic Gauges depending upon mqtt input

**URL:** <https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088>\
**Category:** Dashboard\
**Created:** [18 November 2019 05:14 UTC](https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088 "2019-11-18T05:14:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mipl](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mipl](https://discourse.nodered.org/u/mipl)\
**Post date:** [18 November 2019 05:14 UTC](https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088/1 "2019-11-18T05:14:54Z")

</div>

I am new in Node red.I wants to add gauges dynamically depending on no's of mqtt json data input ,  
e.g. mqtt data be like ..

{"d":{"Sample":"200","Sample1":"500","LP4":"300","LP5":"150"}}

From Above data i wants to create 4 gauges dynamically.The no's of parameters may vary.according to them i want to add extra gauges on my dashboard dynamically.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [18 November 2019 06:44 UTC](https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088/2 "2019-11-18T06:44:07Z")

</div>

Not possible with node-red dashboard. You'll need much more freedom and control over the frontend so [https://flows.nodered.org/node/node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder) is probably easiest way to achieve the goal.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 November 2019 10:21 UTC](https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088/3 "2019-11-18T10:21:15Z")

</div>

uibuilder can indeed help you with this. Using the default setup gives you access to the VueJS framework with bootstrap-vue. There are examples of a number of charting libraries in the uibuilder WIKI on GitHub.

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired. - TotallyInformation/node-red-contrib-uibuilder

If you don't like VueJS, you can replace it with any other framework.

When you send your data to uibuilder, just make sure that it has an identifier so that you know how to update the appropriate gauge. Typically you would use the msg.topic to do that but it could be anything.

---

<div class="post-metadata">

**Author:** ![mipl](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mipl](https://discourse.nodered.org/u/mipl)\
**Post date:** [23 November 2019 10:59 UTC](https://discourse.nodered.org/t/dynamic-gauges-depending-upon-mqtt-input/18088/4 "2019-11-23T10:59:39Z")

</div>

Thank you very much to both now it is working .