O'Reilly logo

Highcharts Cookbook by Nicholas Terwoord

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

Creating a compass

In this recipe, we'll use what we've learned about gauge charts and the HTML5 geolocation API to create a compass. Our compass may not be as accurate as a physical compass, but it should give us a decent approximation of our heading.

Note

Not all browsers/devices provide the necessary data to get heading information, so this recipe may not work in all circumstances.

Getting ready

To set up a basic page and install jQuery and Highcharts, refer to the instructions in the Getting ready section of the Creating your first chart recipe in Chapter 1, Getting Started with Highcharts.

How to do it...

To get started, follow the ensuing instructions:

  1. Define the controls for our chart as shown in the following code:
    <div id='container'></div>  ...

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