Displaying gauges
Analog gauges are useful for visualizing data with values bound between predefined minimums and maximums, which undergo changes over time. Examples include amount of fuel, current speed, disk space, process and memory usage, and so on.
In this recipe, we're going to make a very flexible, data-driven gauge plugin for jQuery. Then we're going to use this plugin to display an analog car speedometer. The following is how the speedometer will look:
The recipe makes extensive use of HTML5's canvas.
How to do it...
Let's write the HTML code for our example, the gauge plugin and the code that ties them together.
Make a simple HTML file with a canvas for our gauge:
<!DOCTYPE HTML> <html> <head> <title>Gauge example</title> </head> <body> <canvas id="gauge" width="400" height="400"></canvas> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> ...
