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

Measuring the distance travelled

Bubble charts are a good way to represent three-dimensional values in a two-dimensional space (that is, a chart). In this way, it is similar to a scatter chart that only tracks the x and y coordinates. In this recipe, we'll use a bubble chart (and a few HTML5 technologies) to log our location with Highcharts.

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. Create some controls to manage our chart using the following code:
    <div id='container'></div>
    <button id='record-location'>Record Location</button><br/> ...

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