Microsoft Access Gauges

Microsoft Access Gauge

In my continuing push to improve what can be done in Access, I decided to see how I could create gauges in Access to show progress, statuses, percentages, … in a visual manner.

I won’t bore you with all the details, but the end result was to leverage the power that the WebBrowser control has to offer and use one of many JavaScript libraries.

In my demo file, I offer 2 ways to approach its usage:

    • create a template index.html file with all the setting pre-established and simply automate pushing the value to display
    • use a class to gain full control of the gauge in real-time

So the choice is yours!

Here are a few screenshots to show you a little of what is possible.

Microsoft Access Gauge 01

Microsoft Access Gauge 02

Microsoft Access Gauge 03

Try An Alternate JS Library
In this instance, I chose to use the bernii/gauge.js library (link is below), but you could use any gauge JS library that interest you.  My demo, should provide you more than enough information to be able to use any alternate library.

The database was tested on Access 2010 onward (I tested 2010, 2013, 2016 and 2019 and with both 32 and 64-bit versions).  It will not run on earlier versions because of the WebBrowser control was updated at that point in time.  That said, it could easily be ported to the earlier version if wanted as it is not tied to any features of the ‘newer’ WebBrowser control.

Limitations

The current limitation is the fact that the WebBrowser control cannot be used in continuous forms, nor reports.  I’m hopeful that whenever the new WebBrowser control gets released that we will finally be able to get around that limitation.  Fingers crossed.

One things that I have done though, is build out a form and then inserted that into the report to manage to get it to display visually in a report, but printing still omits the WebBrowser rendering.  So if your report is only viewed on a screen, this can be an effective workaround.

Special Acknowledgement

A special thank you to Thomas Möller for his Better Access Chart class.  Thanks to his work, I was able to use his class object as a template to create this one.

Setup & Usage

  • Download the demo file below.
  • Unzip the file contents to a folder of your choosing
    • You may need to remove the Mark of the Web (MOTW)
  • Open the database and enable its content (or setup a Trusted Location for its folder)
  • You may wish to review/implement https://www.devhut.net/everything-you-never-wanted-to-know-about-the-access-webbrowser-control/#Local
  • This demo illustrates both using local JS files as well as Internet based CDN JS files, as such you need an active/open internet connection for some of it to work, or else you will receive errors.

Disclaimer/Notes:

If you do not have Microsoft Access, simply download and install the freely available runtime version (this permits running MS Access databases, but not modifying their design):

Microsoft Access 2010 Runtime
Microsoft Access 2013 Runtime
Microsoft Access 2016 Runtime
Microsoft 365 Access Runtime

All code samples, download samples, links, ... on this site are provided 'AS IS'.

In no event will Devhut.net or CARDA Consultants Inc. be liable to the client/end-user or any third party for any damages, including any lost profits, lost savings or other incidental, consequential or special damages arising out of the operation of or inability to operate the software which CARDA Consultants Inc. has provided, even if CARDA Consultants Inc. has been advised of the possibility of such damages.

Download a Demo Database

Feel free to download a 100% unlocked demo copy by using the link provided below:

Download “Access - Gauges” gauges.zip – Downloaded 7083 times – 115.71 KB

Version History

Version Date Changes
V1.000 2022-05-30 Initial Public Release
V1.001 2022-06-08 Address what seems to be a timing issue on some versions with GaugeDraw Procedure causing a
‘Gauge’ is undefined error for some people

Other References on the Subject

GitHub - bernii/gauge.js: 100% native and cool looking JavaScript gauge
100% native and cool looking JavaScript gauge. Contribute to bernii/gauge.js development by creating an account on GitHub.
Everything You Never Wanted to Know About the Access WebBrowser Control
The Access WebBrowser control is one of the greatest and most frustrating controls available to any Access developer! The beauty of this control is it enables you to gain the power of the web within your database. On the other hand, I have found it very frustrating to program as many properties/methods available to the…

Continue reading →

MS Access - Improved Charting
Here’s a demo I’ve been wanting to share for years and finally got around to it! Charting has always been one of Access’ greatest weaknesses in my opinion. When compared to the ease of charting in Excel, Access has been lagging behind for years/decades even. I find the dialogs confusing, and understanding how data series…

Continue reading →

19 responses on “Microsoft Access Gauges”

  2. Robert Simard

    Très intéressant comme approche, et utile pour les tableaux de bord, merci pour votre contribution !

  3. Bob T

    You always present extremely interesting articles which in turn stimulate ideas! I was excited to try this one out but keep getting an error when opening the ‘with class’ form. I’ve installed both java script and the JDE with no success. The error is…
    An error in the script on this page.
    Line: 20
    Char: 9
    Error: ‘Gauge’ is undefined
    Code: 0

    Access: Microsoft® Access® 2016 MSO (Version 2205 Build 16.0.15225.20028) 32-bit
    Any ideas?

      1. Daniel Pineault Post author

        Very odd.

        Try replacing the existing DrawGauge procedure with

        Public Sub DrawGauge(Optional bOutputToFile As Boolean = False)
    Control.Object.Silent = True
    With Control.Object.Document
        .Open
        .Write getHtmlString
        .Close
    End With
    Control.Object.Refresh
    If bOutputToFile = True Then Call saveHtmlFile(getHtmlString) 'Simply for learning or Debugging, not needed in production!
End Sub
          1. Daniel Pineault Post author

            I’m afraid I don’t have an answer for you.

            I managed to eventually replicate the error that was described on a VM and addressed it the update V1.001. the db worked fine on 4 different VMs I tested it on. Not sure what else I can do at this point.

            Feel free to dissect, test, perhaps you will find the issue.

          2. Bob T

            The problem on my end, without the code revision, was that my system was missing the proper registry value… per Daniel’s https://www.devhut.net/everything-you-never-wanted-to-know-about-the-access-webbrowser-control/#Local post I added a msaccess.exe 32-bit DWord key of 12001 to https://www.devhut.net/everything-you-never-wanted-to-know-about-the-access-webbrowser-control/#Local? restarted Access ran the demo db and it worked perfectly.

            Thanks again Daniel for your so very interesting (and detailed) articles!
            – Bob

          4. Robert Simard

            I found the problem, it’s because my Access is in French!
            The variables generateGradient, limitMin, limitMax, write “vrai” in “getGauge()” function and I replaced the following lines and everything works perfectly:

            strText = strText & ” generateGradient: ” & IIf(m_generateGradient = True, “true”, “false”) & “,” & vbCrLf
            strText = strText & ” limitMin: ” & IIf(m_limitMin = True, “true”, “false”) & “,” & vbCrLf
            strText = strText & ” limitMax: ” & IIf(m_limitMax = True, “true”, “false”) & “,” & vbCrLf

            Merci beaucoup !

  5. Tariq Ahmed

    Hi Daniel, I hope you are well? I am a regular follower of your website and YouTube Channel and find your work extremely helpful and am using many of the solutions that you have published..
    I adapted your solution for building Gauge Charts in MS Access and have been successfully using it for many months until recently when Office 365 latest update (16.0.18827.20060) got installed. After this update the Gauge Charts are no longer getting rendered on Forms. No error message appears. Form just shows an empty Browser Control. The gauge charts worked absolutely fine until Office 365 Version (16.0.18730.20168).
    Would appreciate if you can shed some light on this as I have put in a lot of work on an application that I developed and it was working perfectly fine till now.
    Thank you…

    1. Daniel Pineault Post author

      Tariq,

      I’d love to help you, but I ditched MS365 a while back and am no longer in a position to do such testing/troubleshooting. MS365 has been a disaster of continual bugs and truly doesn’t offer any real advantage over older version (say Access 2003!). So, it just didn’t make sense to continue with it. Beyond which I had some subscription issues that even Microsoft was unable to fix (there’s that great support they promote)!!!

      My only suggestion would be to rollback to a stable build and wait. Then again, that’s pretty much the MS365 motto, rollback!

      I wish I could be more helpful.

      1. Tariq Ahmed

        Hi Daniel,

        Thank you for your reply… I feel your pain regarding Office 365 as it has been very unstable with updates coming up. Every time an update is installed, something stops working in MS Access.

        Anyways, I rolled back to an earlier update version and got my database to work properly.

        Your example for developing gauge charts in Access has been extremely helpful and I have been able to develop a few apps for customers who wanted Analytics capability in Access. They love these solutions.

        Really appreciate the good work from you.