My favorites | English | Sign in

Google Visualization API

Using Visualization Gadgets

Gadgets are small, self-contained web applications, such as visualizations. See the Gadget website for more information on gadgets.

All gadgets in the Visualization Gadgets Gallery are visualization gadgets. However, visualization gadgets are not specifically labeled as visualization gadgets; if you see a random gadget on a page or on the Google Gadget Gallery, it might not be obvious that it's built on the Google Visualization API (though visualization gadgets expose a data source URL user preference).

There are two ways to add a gadget to your page:

  • The page can expose menus or other user interface elements that enable you to add a gadget to a page in your browser. This is called adding a gadget, and you do this through menus or some other tools on the page. The page must be coded to support this, but it is very easy for any user to add gadgets to a page using this method.
  • You can put an iframe with a gadget URL in your page HTML. This is called embedding a gadget, and you must be able to modify your page HTML directly to do this. This document does not discuss how to do this.

Adding Visualization Gadgets

Some pages are specially coded with menus or other user interface elements to enable users to add a gadget to the page. Here are step by step instructions for adding Visualization Gadgets to the iGoogle and Google Spreadsheets pages. Similar methods should be exposed by other web applications that let you add Gadgets through the page user interface.

In a Google Spreadsheet

  1. Select 'Insert' and 'Gadget' from the spreadsheet toolbar.
  2. Select a visualization gadget from the list.
  3. Select the range of cells you want to display in the gadget.
  4. Optionally, configure additional gadget preferences.

Refer also to the Spreadsheet Integration section for more information specific to visualization gadgets within Google Spreadsheets.

In an iGoogle Page

Insert a visualization gadget into iGoogle the same way you insert any other gadget. Visualization gadgets will prompt you to fill in a data source URL. Data source URLs are provided by applications that support the Google Visualization API. For example, to get the data source URL from a Google Spreadsheet, do the following:

  1. Open a spreadsheet.
  2. Insert a gadget, select the range of cells that you want to read.
  3. In the gadget title, click the arrow icon on top right.
  4. Select 'Get query data-source URL' from the popup menu.
  5. Copy and paste the URL into the 'data-source URL' gadget preference.