Drawing Gauge / Meter For Web

Hi guys

Apart from resorting to JavaScript, is there any methods to enable the creation of gauges / meters for web app? like the ones below…

It seems WebGraphics is not supporting draw objects at the moment ( which would have allowed the use of ArcShape to make drawing the gauges easier ).

Anybody has done this before?

GraffitiSuite Web Edition has GraffitiProgressSemiCircle (click the Timed checkbox to see it in action) that can change the color of the progress indicator based on value, but does not display exactly like you’re requesting.

1 Like

Thanks Anthony. That’s cool. But its not what i need for now. I am looking at some codes to draw the gauge using JavaScript in XOJO and also perhaps integrating external JS lib as WebSDK control at a later time.

Years ago I struggled with this and my non-technical manager solved it! He said why don’t you draw it as a Pie chart then chop off the bottom. I cover the bottom of the Pie with a white rectangle. There may be a better way.

This is the result using ChartDirector:


Gate61 used to have a really nice clean-looking and highly-configurable gauge for desktop and web that used htmlViewer, but it’s not shown on their website anymore. I still use the desktop version and it works fine under Xojo 2021r2.1 and latest Mac and Win OSs. Maybe write to them as ask if they can send you a copy.


Thanks everyone.

I found a lead at : https://www.bauer.uh.edu/parks/h5_gauge1.htm#c2
With the Javascript from code there i am able to produce the gauge below:
Pure JS no external libraries.

I am working to package this into a web container control.
This is just a short term solution. The best would be to convert one of the many js based gauge libraries available on the net into WebSdk. It will be better.

But for now, this will be ok for my use.
I’ll share the code later once its safely wrapped in a web container control.


Some updates. I have packaged it as container control with limited customization options. I think there are something weird with regards to control anchoring / auto sizing for Xojo 2023 R1 Beta version (maybe i am wrong, but i am using it to develop the gauge control ). I’ll share once its more reliable ( the container control).


Hi, I’m developing a small project where I would like to put a control similar to the one shown in your work, would you have an example of how you integrated the javascript code in xojo to share? Thank you

1 Like

Hi Oscar
I am currently away from my dev pc. will share early next week.

1 Like