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

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.

owadays, more and more data live in the cloud in multiple formats and locations. In light of this trend, visual analysis, the ability to extract key information from the data and present it at a glance, becomes more important. And developers often are the ones tasked with aggregating, parsing, and exposing these data in coherent forms such as dashboards, reports, and charts. Thank goodness for the expressive power of images and graphic representations.

For these new demands, the Google Visualization API offers a unified way for developers to deliver visual analysis and provides a rich set of graphic and charting components to handle the majority of visualization scenarios. The Google Visualization API is a data interchange specification and a set of libraries that developers can use to represent structured data as graphic visualizations and interactive charts inside their web applications. This article describes the recently released API, from its basic concepts to its more advanced parts. You will learn how to embed a simple visualization component into your web pages, how to feed it with data from external sources, and finally how to implement your own data sources to add your data to the dozens of visualizations already available in the public Visualization Gallery.

Anatomy of a Visualization

Visualizations created with the Google Visualization API typically are JavaScript or Flash components that live inside a web page. They range from static images and charts to interactive timelines, maps, and motion charts. They conform to a specific interface dictated by the API, and their job is to transform structured data they receive as input into graphical representations. They can also talk to other parts of the web page (including other visualizations on the page) using a simple mechanism based on events and callbacks. With a bit of JavaScript, you can create new visualizations and contribute them to the public gallery for other users' benefit.

You either assemble the data you plan to represent locally on the client using the JavaScript functions provided by the API or fetch them from remote servers via AJAX calls. The API also covers the structure of these calls as well as the expected requests and responses. In this way, you can easily wrap any server-side data source, such as SQL databases, spreadsheets, or proprietary storage formats, into a format that is immediately compatible with client-side visualizations.

The openness of the Google Visualization API's interchange format benefits both the server and client sides. Server-side data sources exposed through the API can immediately be displayed by any of the dozens of visualizations that already exist. On the client side, when creating a new visualization, you don't have to worry about compatibility issues among a multitude of sources; you need to care about only one format, while still being able to read data from all the compliant providers. In effect, you can display data from any data source connected to the web. The API manages the whole cycle from the data production to its consumption.

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