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.
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.
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
- Programming languages: Some HTML
- 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.
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.
Tip
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:
- 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
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:
- Google 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
- 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/
You can find more information on Google Gadget Editor at https://developers.google.com/gadgets/docs/tools#GGE.