Uibuilder - gauges


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

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.

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.

Rather annoyingly the best looking gauge is this one (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.

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

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?

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.

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.


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

Google charts gauge also supports max/min https://developers.google.com/chart/interactive/docs/gallery/gauge

You can use that via ChartKick

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 :wink:



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!

Why not just the node red dashboard, what are you missing ? There is a nice gauge plugin for it.

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.

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.


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


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.


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

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