O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required