# Uibuilder - gauges

**URL:** <https://discourse.nodered.org/t/uibuilder-gauges/29910>\
**Category:** Dashboard\
**Created:** [11 July 2020 19:01 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910 "2020-07-11T19:01:46Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [11 July 2020 19:01 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/1 "2020-07-11T19:01:46Z")

</div>

Hi,

This is aimed at uibuilder users but if you use vue.js you might be able to help.

I am looking for a gauge that resembles vue-svg-gauge to put in my app. The aforementioned gauge is great as long as you don't want to set a min display value - whereupon it goes a bit wrong. I'm quite new to vue and am not sure how to write a wrapper to a js gauge just yet. If anyone has a suggestion I'd be grateful otherwise I'll have to figure out how to either make vue-svg-gauge work or write a wrapper.

Thank you  
Martyn

---

<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:** [11 July 2020 22:33 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/2 "2020-07-11T22:33:31Z")

</div>

Hi Martyn, if you check on the WIKI, you will see some examples from a variety of charting libraries. Hopefully one of them will meet your needs.

You might also like to report the issue to the author of vue-svg-gauge to see if they will fix it.

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki)**
>
> Easily create data-driven 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

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 09:18 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/3 "2020-07-12T09:18:56Z")

</div>

Thanks Julian, I will have a dig again. I contacted the author of vue-svg-gauge a few days ago but have not heard back.

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 14:37 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/4 "2020-07-12T14:37:16Z")

</div>

Rather annoyingly the best looking gauge is this one ([https://www.npmjs.com/package/vue-speedometer](https://www.npmjs.com/package/vue-speedometer)) but I can't seem to make it work without a build step as it has a bunch of require statements. Apexcharts doesn't seem to have a min value and all the others that I have looked at seem to render a complete circle even if you only want a semicircle. I will continue searching.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [12 July 2020 14:52 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/5 "2020-07-12T14:52:07Z")

</div>

What are you trying to render ? Note that you don't need to use a vue component, can be any js library.

> **[RadialBar / Circular Gauge Chart Guide & Documentation – ApexCharts.js](https://apexcharts.com/docs/chart-types/radialbar-gauge/)**
>
> Radial Bar Charts or Circular Gauges are mostly used in single unit data to indicate progress/activity. It indicates values in terms of percentage.

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 15:02 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/6 "2020-07-12T15:02:14Z")

</div>

I am trying to display pressure from a sensor. It is typically around 1000 hPa so starting the scale at zero is a bit daft. Apex assumes the value is a percentage and always starts at zero. vue-svg-gauge has a bug when you set the min value at zero.

I didn't realise that I could use any js library - is that simple to do?

---

<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:** [12 July 2020 15:28 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/7 "2020-07-12T15:28:15Z")

</div>

> [@martynwheeler](#):
>
> can't seem to make it work without a build step

No, foolishly they haven't included the build folder in the repo. If they had, you would be able to use it without a build step like many other Vue components.

What's worse is that the actual code comes from a REACT component, not a Vue one at all.

> [@martynwheeler](#):
>
> I didn't realise that I could use any js library - is that simple to do?

Yes, it isn't hard in most cases. You are writing front-end code - remember that uibuilder doesn't actually care whether you use a library or not. The uibuilderfe library just makes sure that you get a link to/from the uibuilder Node in Node-RED. It also provides a simple event system to make sending and receiving msgs easy.

If you look at the vue-apexcharts example in the WIKI, you will see that it pulls in the Apex Charts library and then a wrapper library which just makes things easier to do in Vue.

Looks like eCharts might have a decently flexible gauge. You can set min/max values and min/max angles as well.

> **[Documentation - Apache ECharts](https://echarts.apache.org/en/option.html#series-gauge)**
>
> Apache ECharts, a powerful, interactive charting and visualization library for browser

There is a Vue wrapper for it with instructions in the WIKI. [Integrating ApexCharts with VueJS · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-ApexCharts-with-VueJS)

Google charts gauge also supports max/min [Visualization: Gauge &nbsp;|&nbsp; Charts &nbsp;|&nbsp; Google for Developers](https://developers.google.com/chart/interactive/docs/gallery/gauge)

You can use that via ChartKick

> **[Integrating Chartkick](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-Chartkick)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 15:50 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/8 "2020-07-12T15:50:30Z")

</div>

Thank you, I will have another go with echarts - I think that the last time I got frustrated with how it was rendering a semicircle but using the space as if it was a complete circle. I am very fussy 😉

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

Martyn

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 16:19 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/9 "2020-07-12T16:19:20Z")

</div>

[https://github.com/naikus/svg-gauge](https://github.com/naikus/svg-gauge) also looks promising (I assume it is what vue-svg-gauge is based upon. I can't see how to use it in a vue component though - this is where my lack of front end experience fails me!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [12 July 2020 16:43 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/10 "2020-07-12T16:43:34Z")

</div>

Why not just the node red dashboard, what are you missing ? There is a [nice gauge plugin](https://flows.nodered.org/node/node-red-contrib-ui-artless-gauge) for it.

---

<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:** [12 July 2020 17:02 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/11 "2020-07-12T17:02:16Z")

</div>

Just follow a tutorial for the library you want so that you see how to use it.

Then use `uibuilder.onchange` to listen for incoming messages, update your data accordingly. Ignore the Vue part for now.

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 17:54 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/12 "2020-07-12T17:54:07Z")

</div>

Ha, yes that was where I started. I wanted to do some customisation of some components but was struggling so I thought I'd give uibuilder a try. It has been an interesting and fun experience and I've learnt a lot (which to me is the point of playing around with stuff like this). I'm hoping to use some of the things I have learnt when I return to school after the summer to get the kids into developing stuff.

Martyn

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [12 July 2020 17:55 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/13 "2020-07-12T17:55:33Z")

</div>

Thanks Julian, I'm really impressed with the flexibility and functionality in uibuilder. Well done on a really nice piece of work.

---

<div class="post-metadata">

**Author:** ![martynwheeler](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martynwheeler/32/24731_2.png) [@martynwheeler](https://discourse.nodered.org/u/martynwheeler)\
**Post date:** [14 July 2020 23:04 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/14 "2020-07-14T23:04:28Z")

</div>

So I ended up solving this by using Highcharts. I hadn't realised it was it was free for non commercial use. I'm happy with the result. I can upload to the wiki if you think it it is appropriate.

 ![Screenshot_20200714_235631_com.android.chrome](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6bb41a1e8e719fc7dd15ea76ecb12468904660e8.jpeg)

---

<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:** [15 July 2020 00:26 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/15 "2020-07-15T00:26:06Z")

</div>

Please do feel free to upload to the WIKI, more examples always welcome.

---

<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:** [14 August 2020 00:26 UTC](https://discourse.nodered.org/t/uibuilder-gauges/29910/16 "2020-08-14T00:26:10Z")

</div>

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