Editors' Guide: Charts

This is a summary of basic parameters for creating online charts using Google's Chart API. It references Google's Chart Developer's Guide

You create a chart by typing a URL in your browser. Every map starts with this basic URL:
http://chart.apis.google.com/chart?
You add elements to the URL to add features to your chart.


Pie Chart

Pie Chart

Required parameters (separated by &):

  • Chart Size in pixels:
    chs=300x200 (or any other dimensions)
  • Chart Type:
    cht=p
  • Chart Data:
    chd=t:50,20,15,15
    "t" is a basic format for listing the data
    Type percentage values for each slice of the pie, separated by commas (from largest to smallest)

Optional parameters (separated by &):

  • Label the pie slices:
    chl=Lower+Tuition+(50%)|Student+Services+(20%)|New+Programs+(15%)|Building+Maintenance+(15%)
    Text for each slice is separated by a |
    Space between words is a +
    Order the labels to exactly match the data values (Chart Data)
  • Chart Title:
    chtt=Where+should+the+money+be+spent?
    Give the chart a title. Space between words is a +
  • Color scheme:
    chco=ff0000

    (Need to find color values? See this chart)

Example -- URL for chart shown above:
http://chart.apis.google.com/chart?chs=450x150&cht=p&chd=t:50,20,15,15&chl=Lower+Tuition+(50%)|Student+Services+(20%)|New+Programs+(15%)|Building+Maintenance+(15%)&chco=ff0000&chtt=Where+should+the+money+be+spent?


Bar Chart

Bar Chart

Required parameters (separated by &):

  • Chart Size in pixels:
    chs=400x250 (or any other dimensions)
  • Chart Type:
    cht=bvg
  • Chart Data:
    chd=t:43,72,121,199|54,82,175,227

    "t" is a basic format for listing the data

    Separate two data sets with a |; Make sure you have the same number of data items for both sets

    You also need to set the range for the bars (data scaling):
    chds=0,300
    Usually this matches the range of your axis labels (see below)

Optional parameters (separated by &):

  • Chart Title:
    chtt=Number+Of+Business+Students|From+Out+Of+Province|SMU+Dal
    Give the chart a title. Space between words is a +
  • Color scheme:
    chco=4d89f9,c6d9fd
    Specify colors for each data set by separating them with a comma

    (Need to find color values? See this chart)
  • Legend:
    chdl=SMU|Dal
    Specify each legend item by separating them with a |
  • Create Axis Lines:
    chxt=x,y
  • Label Axes:
    chxl=0:|2005|2006|2007|2008|1:|0|100|200|300
    0 is the x axis, separate values with a |
    1 is the y axis
  • Auto-size the column widths:
    chbh=a

Data (bar) labels:
Eg. chm=N*fs*,000000,0,-1,11

The parts are broken down like this, separated by commas:

  • What does the label look like?
    • f -- a flag
    • t -- plain text
    • N -- a number
  • Contents of the data label:

    If it's text: Type the text

    If it's a number:

    1. Enter any text that will preceed the numbers, such as "$" (optional)
    2. * (required)
    3. Enter the kind of number:
      f -- a number (with optional decimal places)
      p -- percentage value
      c<CUR> -- currency value. <CUR> is a three-letter value such as: USD, CAD or EUR
    4. Enter the number of decimal places. Eg: 0
    5. * (required)
    6. Enter text that will follow the number, such as " million" (optional)
  • Text color: (Need to find color values? See this chart)
  • Data set index: (eg.if you have two sets of bars on the same chart). The first set is 0.
  • Data points to be labelled: -1 to label all data points. Otherwise label only specific points -- beginning with the first one at 0.
  • Text size in points

    (Repeat for next data set, beginning with a | )

 

Example -- URL for chart shown above:
http://chart.apis.google.com/chart?cht=bvg&chs=400x250&chtt=Number+Of+Business+Students|From+Out+Of+Province|SMU+and+Dal&chd=t:43,72,121,199|54,82,175,227&chds=0,300&chco=4d89f9,c6d9fd&chdl=SMU|Dal&chbh=a&chxt=x,y&chxl=0:|2005|2006|2007|2008|1:|0|100|200|300&chm=N*f*,0033cc,0,-1,11|N*f*,3399ff,1,-1,11


Sparkline Chart

Sparkline Chart

Required parameters (separated by &):

  • Chart Size in pixels:
    chs=400x250 (or any other dimensions)
  • Chart Type:
    cht=ls
  • Chart Data:
    chd=t:43,28,52,45,63,34,41
    "t" is a basic format for listing the data
    Separate values with commas

    You also need to set the range for the bars (data scaling):
    chds=0,75
    Usually this matches the range of your axis labels (see below)

Optional parameters (separated by &):

  • Chart Title:
    chtt=Endowment+Performance+At+MSVU|2002-2008+($+Millions)
    Give the chart a title. Space between words is a +
  • Set The Line Color:
    chco=4d89f9
  • Create Axis Lines:
    chxt=x,y
  • Label Axes:
    chxl=0:|2002|2003|2004|2005|2006|2007|2008|1:|0|25|50|75
    0 is the x axis, separate values with a |
    1 is the y axis
  • Set The Fill Color:
    chm=B,c6d9fd,0,0,0
    The second value is the color

    (Need to find color values? See this chart)

Example -- URL for chart shown above:
http://chart.apis.google.com/chart?cht=ls&chs=400x250&chtt=Endowment+Performance+At+MSVU|2002-2008+($+Millions)&chd=t:43,28,52,45,63,34,41&chco=4d89f9&chds=0,75&chxt=x,y&chxl=0:|2002|2003|2004|2005|2006|2007|2008|1:|0|25|50|75&chm=B,c6d9fd,0,0,0


Colour-Coded Map:

Pie Chart

All parameters are required (and separated by &):

  • Chart Size in pixels:
    chs= 440x220 (currently this is the maximum size)
  • Chart Type:
    cht=t (This means a map)
  • Chart Geographical Area:
    chtm=world

    Choose from:
    africa
    asia
    europe
    middle_east
    south_america
    usa
    world
  • Countries to be Highlighted:
    chld=CA,AU,CN

    Choose values from either:
    World
    U.S.

    The values always contain two characters
    There is no character separating them
  • Country Colors:
    chco=ffffff,edf0d4,13390a

    The first value is the color of all countries
    The second value is the darkest color of any country highlighted
    The third value is the lightest color of a country highlighted

    (Need to find color values? See this chart)
  • Chart Data:
    &chd=t:1,50,100

    This specifies the darkness of the color for each country highlighted on a range of 1 to 100. The number of values here (separated by commas) MUST be equal to the number of countries you have highlighted (see next)
  • Background color (eg. water) (Chart Fill)
    &chf=bg,s,C9E0F0

    The three parameters mean the "is a background", "is solid", "is this colour"

Example -- URL for chart shown above:
http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=world&chld=CAAUCN&chco=ffffff,669900,C6DC9B&chd=t:1,50,100&chf=bg,s,C9E0F0

 

Exercise

Create a Google chart from one of the following sets of data. E-mail the URL to Tim

Where Dalhousie students are from (by region)

  • Ontario: 47%
  • Atlantic: 33%
  • West: 11%
  • Quebec: 5%
  • International: 4%

Countries in Europe which offer free university education:

  • Ireland
  • Germany
  • Denmark
  • Spain
  • Sweden

Voter turnout in SMU student elections:

  • 2009 (35%)
  • 2008 (39%)
  • 2007 (34%)
  • 2006 (44%)
  • 2005 (42%)