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:

Displaying gauges

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.

  1. Make a simple HTML file with ...

Get HTML5 Data and Services Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.