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
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.
To work in depth with the Visualization APIs, the following programming skills are highly recommended:
HTML5
JavaScript
Java (specific uses only)
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 service or web server to host HTML pages
A Google account with Google Drive activated (https://drive.google.com/start)
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.
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.
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.
Tip
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/
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.
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.
Tip
Fast facts: Google Fusion Tables
Experience level: Beginner to intermediate
Advantages: Maps applications, scaling capacity, bulk data handling
Limitations: Chart selection, style customization
Documentation: http://www.google.com/fusiontables/
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.
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.
Tip
Fast facts: Scripting code using the Visualization API
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:
Google App Engine : https://developers.google.com/appengine/
Eclipse : http://www.eclipse.org/
Google Web Tools plugin for Eclipse : https://developers.google.com/web-toolkit/
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:
Googl e Code Playground: http://code.google.com/apis/ajax/playground/
Visualization API Release Notes: https://developers.google.com/chart/interactive/docs/release_notes
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.
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.
Tip
Fast facts: Gadget Editor
Advantages: Free Google hosting available and embedding in web pages and apps
Limitations: Developer experience
Documentation: https://developers.google.com/gadgets/
Tip
WARNING
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.