Tip: Add a chart to card or map info window

Google Chart Tools Image charts have been deprecated and will no longer work after April 20, 2015. Unfortunately there's no Google-supplied replacement that supports charts in info windows.

Click a point on the map in these live examples to see a demonstration:

Traffic for Tennessee roads
Texas drought, October 2011 - New Scientist

Sometimes the data for each row in your table is represented better as a chart. Here's how to use the Google Chart Tools Image Charts to dynamically create a chart for each row of data.

The big picture: use the "Custom" template

You'll be using the Custom template for the card layout or map info windows. The Custom template accepts valid HTML to design the appearance of the content. To include a chart that is specific to each row of data, the HTML can combine data from each column into a call to the Google Chart API, which will return an image specific for that card or info window. 

1. Get started

First, follow the appropriate directions to open the Custom template in your own data set

How the Google Chart server works

The Google Charts API is called by a URL, and returns an image. The URL itself describes what the chart should look like in the image that comes back.

Here's an example of a pie chart. Notice the URL in the browser bar when you click the link. The pie chart image was created by the Google Charts API using the numbers and other settings specified in the URL.

Try changing some of the numbers in the URL and pressing "go" in your browser to see how the pie chart image changes.

Play around with the Tennesse Traffic chart:

  1. Open the table Traffic for Tennessee roads
  2. Click on the map tab and select Duplicate. This is your own copy of the tab to play with. 
  3. Select Tools > Change map, then click the Change info window button. Text enclosed in curly braces {} is the name of columns. 
  4. Make a small change, save, and see the result. 

The Custom HTML template text window contains the following code:

<div style="width:400px; height:220px">
<img src="http://chart.apis.google.com/chart?chxl=0:|2000|2001|2002|2003|2004|2005|2006|2007|2008|2009&
chtt=Traffic Count: {Location} in {County}">

Text enclosed in curly braces {} is the name of columns. When the map pin is clicked, the column name is replaced with the data values for that row in your table, and the URL is called. The image that returns is the chart displayed in the info window. When the data changes, the chart will update too.

There's a lot of trial and error to making this work, so be patient. It has great results.

Have fun charting your data!

Clear search
Close search
Google apps
Main menu
Search Help Center