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.

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.

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.

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