Ajax driven HTML 5 radial gauge.

I’ve updated the JavaScript gauge example I created years ago. It takes a value between 0 and 100 and will automatically update using Ajax to pull the values in from a json file so no need to refresh the page or submit form data, just have a script or web programming language update the json data file to update the gauge live.

If you want to create a radial gauge, like a speedometer, but are not sure where to begin this will get you started. It uses the canvas tag and works well in the latest IE. I have not tested it in other browsers but any browser that supports the canvas tag will 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 much to it that can’t be found elsewhere, like information on JQuery Ajax, json, canvas, or HTML 5.

Download the the files, 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, or not.

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.

If you need a web server, get this awesome prepackaged and configured Apache server here. If you need Python, get it here. Both are free.

~ by mohawke on March 25, 2015.