RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Google Visualization API: Deliver Graphical Data Analysis in Your Web Apps : Page 3

Get a practical overview of the Google Visualization API, from the basics of simple charting to the complexities of implementing your own custom data sources.


Creating Your Own Visualizations

All the visualizations adhere to the same method signature and they are all used in the same way. Therefore, creating new visualizations is easy. You need only create a JavaScript object that follows the signature in the following listing and make it available to other developers:

// namespace, to avoid conflicts with other visualizations and javascript objects 
// living in the same page as this visualization. var my_domain = {}; // constructor for the MyVisualization object. The 'container' // parameter is the placeholder DOM element into which // you will draw your visualization. my_domain.MyVisualization = function(container) { // store the container into an instance variable for later use. this.container = container; }; // The draw() method receives a DataTable and an options object. my_domain.MyVisualization.prototype.draw = function(data, options) { // ... implement your visualization code here. }

Once you define this stub, you can implement the draw() method with the specific code required for your visualization.

For example, at the time of writing, the visualization gallery still did not contain a visualization to display treemaps. Treemaps are a method for displaying tree-structured data using nested rectangles. They are especially useful when each node in the tree is associated with a scalar value. It therefore seems a useful exercise to implement treemaps as a new Google Visualization.

To keep the example simple, it will not implement the drawing code from scratch. Instead, it will reuse Js-Treemap, a JavaScript library created by David Cowie that is dedicated to drawing treemaps, and wrap it in a visualization. Figure 2 shows how the same data shown in the organizational chart (see Figure 1) may appear when wrapped inside a treemap, provided you set a quantity value for each leaf node in the tree.

Figure 2. A Sample Treemap: Here is how the data shown in the organizational chart may appear when wrapped inside a treemap.

Drawing a treemap using the Js-Treemap library is relatively easy. You just have to perform the following steps:

  1. Create some HTML elements that contain the main drawing and its navigational controls.
  2. Transform the visualization DataTable into a set of nested TreeNode objects to represent the hierarchical structure. The TreeNode class is defined by the Js-Treemap library.
  3. Create a DivTreeMap instance that takes care of drawing the treemap itself in the container DOM element you specify. DivTreeMap is defined inside Js-Treemap too.
  4. Optionally, bind event listeners for clicks on the treemap to navigational controls, such as zooming in and out on different parts of the map.

Listing 2 shows how all of this can be embedded into a Google visualization, reusing the stub presented previously.

Figure 3. Embedding a Custom Treemap Visualization on a Web Page: Here is the web page example with the visualization you created.

Note how the code parses options to customize the width and height of the generated visualization and uses defaults in case some options are left unspecified by the user. Also, note how all the drawing is generated inside the container object received in the constructor. The parsing of the DataTable object received by the draw() function occurs inside the createTree() method. Listing 3 shows the visualization's implementation.

The code uses various functions exposed by DataTable to navigate through its contents; GetNumberOfRows(), getNumberOfColumns(), and getValue() can be used to iterate over all the cells in the dataset and read their values. Other functions, such as getDistinctValues(), compute aggregations over rows and columns.

The treemap visualization expects the DataTable to contain three columns. The first two contain the name of each node and its parent name, just like the organizational chart. The last column is a numeric one, associating a scalar value to each leaf node.

You can then update the drawVisualization() function to include the extra column in the DataTable and add the newly created treemap visualization to the page, along with the organizational chart from the previous example. Listing 4 shows the final version.

Figure 3 shows the web page example with the visualization you just created.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date