Cover by Raffaele Cecco

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Interactive Charts

In contrast to image charts, which (as their name implies) are displayed as regular images, interactive charts are composed of dynamic graphics that are drawn using various browser facilities such as DHTML, Flash, Canvas, SVG, and VML. Typical interactivity includes scrolling, zooming, sorting, tool tips, and hover effects.

The drawing method employed is mostly transparent to the developer, as a well-written visualization will use the appropriate rendering method for the target browser. This is a great time-saver, allowing the developer to concentrate on the functionality and aesthetics of the charts rather than the minutiae of drawing them.

Interactive charts require the use of an external API, which you would typically include in the <head> section of your page, as with any other external library:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

The stages required to draw a chart using the visualizations API are as follows:

  1. Load the general Google AJAX API.

  2. Request the appropriate visualizations API.

  3. When the visualizations API has loaded, prepare the data, and finally draw the chart into an element on the page.

The following code draws a chart using the same bakery sales data used earlier in the chapter:

<html> <head> <!-- Load the general Google AJAX API --> <script type="text/javascript" src="https://www.google.com/jsapi"> </script> <script type="text/javascript"> // Load the visualization API, using the 'corechart' package within it. ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required