Ajax driven HTML 5 radial gauge.

I recently updated an older JavaScript gauge example that I created years ago if anyone is interested in creating gauges and wants a working example. This web based example takes a value between 0 and 100 and will automatically update using Ajax to pull the values in from a json file. There is no need to refresh the page or submit form data. Simply have a client side or back-end script or web programming language update the json data file automatically to update the gauge live.

This example uses the canvas tag and works well in the latest IE. It has not tested it in other browsers. I assume any browser that supports the canvas tag should work, including Safari on iPhone/iPad. My old code works so I have no reason to believe this wouldn’t. I’ve made this as basic as possible so it’s not bogged down in over complication or clutter. I was going to write up a walk-through but there isn’t too much to it and you can find information elsewhere, like information on JQuery Ajax, json, canvas, or HTML 5.

Download the the files, then place in your web server directory, change the paths to the json and the JQuery code in the index.html file, and point your browser to it. I’ve included a Python script for testing, which will update the values so you can be mesmerized as the needle spins every 30 seconds on a randomly picked value.

If you want it to just update on outside a server, on refresh, page load, or form submit just remove the Ajax call in the document.ready and provide the values yourself. My old code shows how to do this with a form submit and that can be found in the Flash gauges page.

You will need a web server for this example to work. You can find a prepackaged and configured Apache server here. If you need Python, get it here. Both are free.