Tip: Add a chart to card or map info window

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 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. 

2. Design a chart for your data

The chart wizard is currently unavailable.

To present your data in a chart, you'll need to design it to appear as you'd like. We configured the chart code for the Tennessee traffic example through trial and error, playing around with Google's chart wizard

  1. Open Google's chart wizard.
  2. Choose a chart type and begin configuring it.

In the Data section:

  • Choose Encoding: Text. This will work best with the template.
  • Place sample data from your table in Data values.

Once you've designed your chart,

  1. Copy the text from "Paste HTML to embed in website"
  2. Paste it into the Custom template in Fusion Tables and Save.
  3. Confirm the chart image appears in the card or info window. 

At this point the chart is identical for all cards or info windows. In the next step, you'll swap out the sample data with references to each column.

3. Create a template formula to call for the chart

To finish, you'll want each card or info window to show a chart for that row's data. Instead of hard-coded sample data, the template will use a reference to the column with the data. In this way the URL call to the Google Charts API is specific to the numbers in each row, and shows an appropriate chart.

  1. Locate the sample data values in the text you pasted into the Custom template.
  2. Replace one of these sample data values with a reference to the column that contains the data.
    •  For example: A column named "2009" contains traffic values for 2009. The value 273 was used as sample data to design the chart. Find 273 in the chart text and replace it with {2009}.
  3. Save.
  4. Confirm the chart images appear correctly.
  5. Repeat until all sample data is replaced with column names. 
The Google Charts API is not robust to missing data values. The chart may not appear if a value is empty for a given row.

In the Tennessee traffic example, 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&
chxp=0,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009&
chxr=0,1999.5,2009|1,0,10000&chxs=0,676767,11.5,0,lt,676767&
chxt=x,y&chs=400x220&cht=lxy&chco=3072F3&
chds=1999.5,2009,0,10090&
chd=t:2000,2001,2002,2003,2004,2005,2006,2007,2008,2009|{2000},{2001},{2002},{2003},{2004},{2005},{2006},{2007},{2008},{2009}
&chdlp=b&chls=2,4,1&chma=5,5,5,25&&
chtt=Traffic Count: {Location} in {County}">
</div>

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!