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 5

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.


Loading Data from an External Source

So far, all the examples rely on data created locally with JavaScript. In a production scenario, you are more likely to fetch the data from a remote data source. Of course, the data source must emit data in a format compliant with the Google Visualization API.

Google Spreadsheets are capable of emitting data in such a format, so let's start by moving the sample data out of the web page and into a Google Spreadsheet. Create a Google Spreadsheet with the contents shown in Figure 4. Once you have inserted the data, use these instructions to compute a URL that exposes them in the form of a data source that is compliant with the Visualization API.

Figure 4. A Google Spreadsheet Containing the Data to Visualize: Here is a Google Spreadsheet with the contents you inserted.

You can now replace the <script> section of the sample web page with an alternative one that loads the data from a remote source instead of generating them locally. Listing 6 shows the revised snippet.

The key takeaway is the use of google.visualization.Query(). When you invoke send() on it, it fetches data from the remote source passed in the constructor and returns a DataTable in the response. From this point on, you can work with the data as you did in the previous examples.

Rolling Out Your Own Data Source

Now that you can load data from remote sources, you may want to expose your custom sources as Google Visualization data sources. Your data sources could be relational databases or other storage engines, and by exposing them as compatible data sources, you will be able to reuse the existing set of visualizations without having to reinvent the wheel.

To do this, your data source must implement the wire protocol that visualizations use to ask for data. The protocol requires you to answer HTTP GET requests fired by google.visualization.Query instances and answer with JSON responses that are compatible with the format expected by google.visualization.QueryResponse.

Since the protocol is fairly complex, you are probably better off reusing helper libraries on the server side. The Google Visualization API already offers a python helper. Alternatively, the source code download for this article includes helper classes that you can use on top of Ruby on Rails. In order to use it, you only need to include the provided Rails controller and models (gviz_base_controller.rb and gviz.rb) in your Rails application. Once you have done so, you can expose your custom data as a Google Visualization data source by implementing a Rails controller that uses the gvizifier helper method (see Listing 6).

The gvizifier helper method exposes the gviz object, which you can use to populate the response. It has methods to create new columns (gviz.add_col()) and to fill the response data (gviz.set_data()), and it takes care of everything needed to transform such inputs into a well-formed JSON response and sends it to the client.

By using this helper and replacing the example in Listing 6 with code that fetches data from your databases (for example, by using ActiveRecord models), you will open your data to a multitude of visualizations with minimum effort.

Overview Over, Now Go Explore

This article gave you a broad, yet practical, overview of the Google Visualization API, from the basics to advanced topics. You learned how to use them, then how to create new ones, and finally how to expose your data as well-behaving data sources to reuse the set of visualizations other developers have created and shared.

If you want to explore the topic further, you may be interested in learning the Visualization Query Language that allows visualizations to perform SQL-like filtering and grouping, or discover how to wrap your visualizations into gadgets you can embed in iGoogle or inside Google Spreadsheets.

In any case, because visualizations may be contributed by third parties, make sure you read through their privacy and security policies before entrusting them with your data.

Riccardo Govoni has been working since 2003 as a J2EE developer on a variety of applications ranging from financial services to middleware in the IP television field. He currently works for Google as a software engineer. He is a Sun Certified Java Programmer (SCJP).
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date