# Is there a way to make the ui\_gauge clickable?

**URL:** <https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359>\
**Category:** Dashboard\
**Created:** [16 July 2019 14:44 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359 "2019-07-16T14:44:05Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [16 July 2019 14:44 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/1 "2019-07-16T14:44:05Z")

</div>

Not sure if it's possible...Thanks...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 July 2019 15:00 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/2 "2019-07-16T15:00:38Z")

</div>

In what way? what do you want the click to do?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [16 July 2019 16:45 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/3 "2019-07-16T16:45:09Z")

</div>

So when a user clicks on the gauge I get some event that I can execute some javascript code similar to the ui\_button.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 July 2019 17:12 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/4 "2019-07-16T17:12:51Z")

</div>

The gauge has no click event so no output. It may be possible to add one by targeting the css div via a template but I haven’t tried

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [16 July 2019 17:16 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/5 "2019-07-16T17:16:28Z")

</div>

OK, I understand.... It's not worth jumping through hoops for this functionality. I thought it could be something simple which is why I asked about it...

Thanks anyway...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 July 2019 17:19 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/6 "2019-07-16T17:19:51Z")

</div>

Adding a button is the simple way

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [16 July 2019 17:21 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/7 "2019-07-16T17:21:49Z")

</div>

True, but it takes up vertical space, which is critical in my app. I think clicking on the Gauge itself is more intuitive...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 July 2019 17:24 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/8 "2019-07-16T17:24:56Z")

</div>

Intuitive? How would anyone know to click on it ?

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [16 July 2019 17:35 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/9 "2019-07-16T17:35:32Z")

</div>

Funny you mentioned that.... So, this morning I was showing the dashboard to some potential users. When they saw the gauges, they said **"if I click on the gauge would it drill down to the settings?"**

Honestly, that never even crossed my mind until it was mentioned to me... Go figure... 🤪

---

<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:** [16 July 2019 20:07 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/10 "2019-07-16T20:07:16Z")

</div>

Not difficult to add a click event handler to anything. Since Dashboard includes JQuery in addition to Angular.

You can feed in a custom script using a Dashboard Template node.

[https://api.jquery.com/click/](https://api.jquery.com/click/)

In Angular, you can use the `ng-click` attribute to add a handler so you don't even need JQuery, just depends what you are more comfortable with. JQuery is easiest to add programmatically I think - but then I'm not a fan of Angular.

[https://docs.angularjs.org/tutorial/step\_12](https://docs.angularjs.org/tutorial/step_12)

You could add the click event to the whole card or just to the gauge itself

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9beb7adaa4c557531243ee67d1fe13fbd909682d.png)

Above, you can see an example of a gauge - you can see that you have a class you could attach to though remember that would add a click handler to all gauges in the Dashboard, you can tell which one it is within your code.

---

<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:** [16 July 2019 20:17 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/11 "2019-07-16T20:17:04Z")

</div>

> [@tcontrada](#):
>
> True, but it takes up vertical space, which is critical in my app

The space conservation was one of reasons why I did the [node-red-contrib-ui-level (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-ui-level) node. All features what is given by regular gauge can be fitted into one unit height. Try it out.

Ui-level does not provide click functionality but if you can free up some space, so you can then add buttons if you like.

---

<div class="post-metadata">

**Author:** ![jclark58](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jclark58/32/2215_2.png) [@jclark58](https://discourse.nodered.org/u/jclark58)\
**Post date:** [17 July 2019 07:29 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/12 "2019-07-17T07:29:44Z")

</div>

I agree that there is obvious functionality for being able to click on a gauge , to be able to "drill down" into the underlying data. First level of which could be a time series graph of the data being fed to the gauge, followed by raw data points in said time series. This issue as well as being able to customise the look and feel of gauges is one of the limiting factors in the existing node-red ui dashboard.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 July 2019 08:15 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/13 "2019-07-17T08:15:35Z")

</div>

More than happy to consider a pull request for some added functionality, provided it doesn’t break existing, and doesn’t add too many options that would confuse beginners.  
Other gauge types can be provided by 3rd party widgets so feel free to create some.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [17 July 2019 13:42 UTC](https://discourse.nodered.org/t/is-there-a-way-to-make-the-ui-gauge-clickable/13359/14 "2019-07-17T13:42:04Z")

</div>

Well, from my original post, I thought it might be a "_nice feature to have_".  
That said, I think I can get by without it for now.  
However, I wouldn't mind having that functionality because I could think of some decent use-cases for it...

Thanks...