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 2

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.


Preparing the Data for Your Visualizations

The easiest way to get started with the Google Visualization API is to use a visualization among the ones available in the public gallery. As a first step, you will create a web page to display an organizational chart. The chart will be rendered by a Google Visualization and you will feed it with local data via some JavaScript.

To begin, create a new HTML file with your preferred editor and paste in the following contents:

  <script type="text/javascript"
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["orgchart"]});
    // Set callback to run when API is loaded

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // ... implement your drawing code here.
  <div id="orgchartdiv" ></div>
  <p>This page demonstrates using an existing
    OrgChart visualization, with locally created data.</p>

The above code shows all the required elements for using a Google Visualization:

  1. Load the Google jsapi script, which contains the basic functions to interact with Google libraries.
  2. Load the visualization package via the google.load() function.
  3. Specify the visualizations you intend to use. (In this case, you are interested only in the orgchart package. If you wanted to use more visualizations, you would enumerate them in the packages parameter. You can get the whole list of available packages from the visualization gallery.)
  4. Use the setOnLoadCallback() function to register a callback that will be invoked as soon as all the libraries have been loaded.

Inside the drawVisualization() function, you can assemble the data to visualize and then display them. To define where in the web page you want to put the visualization, you can use a DOM element as a placeholder (orgchartdiv, in this case). Listing 1 shows the contents of the drawVisualization() function.

The main elements to consider in Listing 1 are google.visualization.DataTable and google.visualization.OrgChart. The former is a generic tabular container to fill with the data you want to display in the visualization. The latter is the visualization itself.

DataTable behaves like a bi-dimensional table, indexed by rows and columns. Each row represents an item of your visualization, and each column represents an attribute of your items. DataTable exposes many methods you can use to enter and describe your data. (The official documentation describes all of them in detail.) The most pertinent ones, which you will always use, are addRows(), addColumn(), and setCell(). You call them respectively to specify the number of items (rows of data) you want to display in the visualization, the number and kind of attributes they have, and the actual values for each item-attribute pair. Columns have defined types. Supported ones are string, number, boolean, date, datetime, and timeofday.

Instantiating Your Visualizations

Once your data is ready, you can instantiate the visualization, specifying the placeholder DOM element where you want the visualization to live, and then drawing it by passing the DataTable instance as a parameter.

Figure 1. The Organizational Chart Visualization: Here is the final result for the organizational chart you created and displayed in your web page.

The draw() method requires two parameters. The first is the DataTable you will use; the second is a list of customization options wrapped in the form of a JavaScript object, with each property representing a customization key. Each visualization supports different options, so be sure to check your chosen visualization's documentation to verify which options it supports. The example in Listing 1 uses the selectionColor option to customize the color used to highlight chart nodes when the user selects them.

Additionally, each visualization expects the DataTable to contain specific columns. In the case of the organizational chart, it requires two string columns: the first one representing the name of each tree node, and the second representing the name of the parent node. Different visualizations may require different columns to be defined. For example, a pie chart requires a string column for the label and a numeric column for the value of each pie slice. Refer to the documentation for each visualization to verify the required columns.

Figure 1 shows the final result for the organizational chart you just created and displayed in your web page.

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