About this book

There’s a lot of data in our world, and visual representations are often the best method of making sense of it all. Yet, it should not take an army of programmers and analysts to create visualizations in order to make data useful. The Google Visualization API is accessible to novice and advanced programmers alike, making data useful to more people.

"Google Visualization API Essentials" will show you how to create interactive data displays with very little code. The API, combined with Google Spreadsheets and Fusion Tables, is a complete system, from data management to analytical displays. Not only is it simple to learn, but the Google Visualization API can also be viewed as a first step to learning additional Google APIs.

"Google Visualization API Essentials" uses both methodology overviews and hands-on examples with real data to introduce chart and graph creation on the Google platform. Topics are presented from various aspects, including Google Spreadsheets and Fusion Tables, and Graphic User Interfaces. An overview of the various API development environments available to developers is also covered. Basic and advanced charts, data source connectivity, style formatting, and publishing options are also explored in depth.

"Google Visualization API Essentials" brings the arsenal of Google Visualizations into the web developer toolkit.

Publication date:
April 2013


Chapter 1. Tools and Setup

It may come as a surprise to learn that using Google Visualization (Chart) Tools requires very little prior knowledge. One of the most satisfying aspects of working with this set of tools is the ease of leveraging a cloud platform. In other words, there is no requirement for high performance personal hardware and software setup that requires constant care and feeding on a laptop or desktop. While not ideal, it is even possible to develop projects from a tablet interface. In addition, with the interactive nature of the environment, real-time programming capability is a big plus during development.

In this chapter, the following topics are covered:

  • Knowledge prerequisites

  • Interacting with Google Visualization Tools


Knowledge prerequisites

With Google Visualization Tools, a developer with knowledge of HTML5 and some JavaScript can utilize approximately 90 percent of the functionality of the Application Programming Interface (API). Some methods of creating visualizations do not even require writing code at all, but instead rely on the Graphic User Interface (GUI) of common Google Drive (previously known as Google Docs) tools. The remaining 10 percent of the functionality comes from the ability to interface with custom data sources. Google often makes its Java Libraries, in this case the Data Source Libraries, available for developers to use. A developer requiring such a capability can build custom data source connectors to a database on a web server. However, data connectors provided in the Visualization API, including communications through a SQL-like query language and jQuery, are generally adequate for most visualization projects.

Skill summary

To work in depth with the Visualization APIs, the following programming skills are highly recommended:

  • HTML5

  • JavaScript

  • Java (specific uses only)

System requirements

In short, the Visualization API requires very little beyond a text editor and Internet access to create visualizations. However, additional tools make development much easier. Suggested tools or services when working with the Visualization API are as follows:

A Google account is required for the purposes of this book. Without a Google account, many of the tutorials and examples will not work properly.


Interacting with Google Visualization Tools

The key to understanding and then navigating the Google tool options is to first understand that everything is designed with integration in mind. In fact, much of Google's environment is already integrated to some degree. In this respect, the Google environment is truly an ecosystem of tools and capabilities. Some tools are focused on users that do not want to write code to create visualizations, while other tools allow a seasoned programmer to manipulate data with the API in very creative ways. The rest of this chapter is dedicated to an overview of the tools that are most commonly used as entry points for creating Google visualizations.

Charts for Google Spreadsheets

For anyone new to creating data visualizations with Google tools or those who are lacking in programming abilities, Google Spreadsheets is the ideal starting point. Spreadsheets allow developers at any experience level to easily create a wide variety of visualizations from Google's Spreadsheet platform through a point-and-click user interface. The primary limitation to this method is the lack of style and data formatting flexibility.


Fast facts: Google Spreadsheets Charts

  • Experience level: Beginner to intermediate

  • Programming languages: Google CodeScript (not required)

  • Advantages: Easy to use, fast deployment, and code not required

  • Limitations: Style options, data format flexibility, and scaling limits

  • Documentation: http://www.google.com/google-d-s/spreadsheets/

Getting started – creating a new spreadsheet

Once logged in to Google Drive, create a chart using Google Spreadsheets. Create the spreadsheet in Google Drive by selecting Create | Spreadsheet.

In the newly created spreadsheet, copy and paste, or otherwise enter the data to be visualized. Advanced methods of data import and manipulation can also be accomplished using the built-in scripting capabilities of Google Docs or through the Spreadsheets API. It is important to note that when using Spreadsheets to create charts, data must be arranged according to the requirement of the chart. To select a chart and in turn learn about its data formatting requirements, first insert the chart into the spreadsheet by selecting Insert | Chart… from the menu tab options.

To select the appropriate chart for your data, the Spreadsheet Chart Editor detects the current data layout and then attempts to determine the correct chart selection. Further selection and customization techniques for charts in Google Spreadsheets are covered in Chapter 3, Spreadsheets, Charts, and Fusion Tables.

Fusion Tables

Google Fusion Tables is a tool primarily focused on geospatial visualization, and is available through logging in to Google Drive. If map visualization is desired, Fusion Tables is an ideal tool due to its built-in geocoding capabilities, recognition of standard marker names, and HTML-ready information windows. Fusion Tables is also capable of producing other charts such as line, bar, pie, scatter, and timelines. As a rapidly evolving application, Fusion Tables also presents a variety of experimental features still in testing. Opportunities to experiment with the latest features can be found by selecting the link, View in Experimental, at the top of the browser window, as shown in the following screenshot. Fusion Tables accepts a variety of import formats, including CSV, KML, ODS, XLS, and Google Spreadsheets.


Fast facts: Google Fusion Tables

  • Experience level: Beginner to intermediate

  • Programming languages: Some HTML

  • Advantages: Maps applications, scaling capacity, bulk data handling

  • Limitations: Chart selection, style customization

  • Documentation: http://www.google.com/fusiontables/

Getting started – creating a new Fusion Table

To build a Fusion Tables visualization, create a new Table from the Google Drive Create tab. An alternative method to open the Fusion Table application is to visit http://www.google.com/fusiontables/ and click on the button.

In addition to manual entry, Fusion Tables allows Google Spreadsheets or a local file to be imported as data. Fusion Tables allows uploading of spreadsheets, delimited text files (.csv, .tsv, or .txt), and Keyhole Markup Language files (.kml) as table sources.

For users with enterprise class map visualization needs, Google offers a for-fee service, Google Map Engine. Map Engine runs with the same services that support regular maps and earth, but are backed by Google's compute cloud for high performance mapping capabilities. Unlike Fusion Tables, Map Engine does not include visualization methods other than map-based options.

You can find more information on Google Map Engine at http://www.google.com/enterprise/mapsearth/products/mapsengine.html.

Scripting code

HTML code that contains references to the Visualization API (or any Google API for that matter) can be run locally, or hosted by any web hosting service. However, one of the easiest methods is to simply use Google's own App Engine to host visualizations. App Engine is a scalable web hosting environment that can be linked to development platforms, such as Eclipse, which offers a seamless web development workflow when using the Google Web Tools plugin for Eclipse.

Google App Engine currently offers developers 10 free, hosted applications, with additional capacity available through pay-as-you-go fees. For developers looking to experiment with Google APIs, including the Visualization API, App Engine paired with Eclipse is a capable yet affordable platform. However, for developers not quite ready to build complex applications, Google maintains a free, real-time API sandbox for development use. Additionally, for developers who are not quite so advanced at this time, online IDE environments are easy and affordable for code development. They also generally offer an automated connection to cloud hosting services, such as Google App Engine.


Fast facts: Scripting code using the Visualization API

  • Experience level: Intermediate to advanced

  • Advantages: Full customization and scalability

  • Limitations: Developer experience

  • Web hosting: Optional but Recommended

  • Documentation: https://developers.google.com/chart/

You can find more information at the following links:

Code Playground

Code Playground is Google's real-time AJAX code development sandbox for discovering, learning, and testing Google API code. The Playground is updated regularly, with feature updates as well as new API examples. It's worth the effort to check this space regularly to see if something new has been released. The Visualization API release notes are also a very helpful resource for this task.

The sandbox has a tree-structured Navigation window in the upper-left corner of the page. Depending on which API example is highlighted, sample code and corresponding live output are displayed in the Edit Code and Output windows respectively. Code in the Edit Code window can be edited in real time, with changes appearing in the Output window after the button is clicked.

Code Playground also allows developers to save modifications to existing API examples within the environment. If a developer wants to save the state of HTML displayed in the Edit Code window, there are options to Save as well as Export to view a live version. When logged in with a Google account, the Save option saves the current code state to the Code Playground itself. Export saves the current state to a Google App Engine instance that can be referenced by the ID contained in the URL.

Finally, to view Google's documentation and other resources for the currently highlighted API, select the button. To edit all HTML encapsulating the API calls, click on the button.

You can find more information at the following links:

Debugging tools

A clear advantage to developing Google APIs in the Code Playground environment is the integrated debugging mode. Code Playground makes use of the Firebug Lite web development tool. To activate debug mode, click on the button. (Note that Chrome users can also use Chrome's built-in JavaScript console.)


Debug mode offers several methods of testing and debugging code. To toggle between the DOM and Console views, select the appropriate tab. To clear the console, select Clear. To get more information on Firebug and Firebug Lite, click on the bug icon.

A feature of Firebug Lite that can be easily missed is the Firebug Lite Settings window. To view Firebug Lite Settings, select Options in the bottom-right corner of the Playground interface. To configure the debugging environment as desired, check or uncheck the options in the list.

Additionally, the command line offers yet another method of testing and debugging the code in the Code Playground environment. Developers can set variables, test scenarios, and otherwise debug code through a command line real-time input. The resulting output, depending on the entries to the command line, is viewed in the debug Console window.

Gadget Editor

If the end purpose of the visualization is to be embedded in a Google Calendar, Gmail, Sites, or other application, encapsulating the visualization within a Google Gadget wrapper can be helpful. A simple method of creating a visualization intended for a Gadget is to first edit the API code, with HTML included, in the Code Playground, and then cut and paste in between the appropriate tags in the Google Gadget Editor.

The Gadget Editor itself is a simple HTML editing interface with a preview mode included. A Google Gadget is comprised of two major sections within a set of <Module> tags. The <ModulePrefs> tag contains information about the gadget, including the title, author name, thumbnail location (in the Gadget Gallery at http://www.google.com/ig/directory), and description. To publicly publish a gadget in the Gadget Gallery, the ModulePrefs section must be laid out according to Google's standards (http://www.google.com/ig/submit), as well as follow Google's terms of service (https://developers.google.com/gadgets/terms-nc).

To insert content, place the desired gadget's content to be displayed between the <Content> tags. The general format for content is HTML, but JavaScript can also be used. To save a Gadget, select File | Save. The gadget is now stored on Google servers, but is only available to those with the link and not available publicly. To publish a gadget to the public Gadget Gallery, select File | Publish from the menu options.

Just as the newly created gadget is stored on Google infrastructure when using Gadget Editor, images and other content can also be stored in the same location for the gadget's use. Select File | Upload to upload images for the gadget's use. The image URL resulting from the upload, usually of the form http://hosting.gmodules.com/ig/gadgets/file/12345…/filename.png, can then be used to reference the image in the gadget HTML.


Fast facts: Gadget Editor

  • Experience level: Intermediate to advanced

  • Advantages: Free Google hosting available and embedding in web pages and apps

  • Limitations: Developer experience

  • Documentation: https://developers.google.com/gadgets/



The future of Google Gadgets is unclear at the time of publishing. Many features of Gadgets are being absorbed by other Google services. However, they are still available as a platform for development.

You can find more information on Google Gadget Editor at https://developers.google.com/gadgets/docs/tools#GGE.



It is important to remember that there are multiple methods of creating visualizations when working with Google tools. A developer may choose to select one method over another, depending on the complexity and features required by the visualization. It is also important to observe that Google is actively adding functionality to the API collections as well as the user interface applications. Regular visits to the API documentation and Code Playground will generally yield new methods of visualization creation. In summary, at the time of this publication, visualizations using Google tools can be created with:

  • Google Spreadsheets

  • Google Fusion Tables

  • Custom applications that reference the Google Visualization API, created in Code Playground or a third-party platform (for example, Eclipse)

Architecture and types of visualization options is the topic of the next chapter.

About the Author

  • Traci L. Ruthkoski

    Traci L. Ruthkoski is from an eclectic background in computation, statistics, media technology, and business. Traci is always looking for the latest challenges in technology. Having worked as an IT professional in both clinical and medical research settings, she has built High Performance Computing clusters from hardware to software application. More recently, Traci has been enabling academic research advancement through computing and cyber infrastructure in the cloud domain. She continues to work at the University of Michigan, now holding several roles supporting the overall advancement of Research Cyber Infrastructure and Information Technology at the University. Traci has published academic work in the IEEE CloudCom 2010 proceedings as well as maintaining a blog/tutorial repository for cloud computing tools and trends.

    Browse publications by this author
Google Visualization API Essentials
Unlock this book and the full library FREE for 7 days
Start now