Image Charts (Deprecated)

Map Chart (Deprecated Version)

 

Replacement Alert: This map chart has been replaced by a newer version.

This page describes how to create a colored map using the Charts API.

Table of Contents

Chart-Specific Features

  1. Overview
  2. United States State Codes

Standard Features

  1. Chart Title (chtt, chts)
  2. Chart Margins (chma)
  3. Background Fills
    1. Solid Fills (chf)

Overview

You can create a map with various countries or states highlighted in custom colors. To specify a map, you will specify which region of the world the map should zoom into. You will also specify a list of regions that should be colored in the map, and a parallel data list that assigns a numeric value to each corresponding country. Each country is colored along a gradient, according to the value assigned to it. You can optionally specify a custom color gradient for data values.

Map charts support the following parameters:

Parameter Required or Optional Description
cht=t Required Specifies a map chart.
chs Required Map size. Maximum size for a map is 440x220.
chtm=<zoom_area> Required

Geographical area shown in the chart.

  • zoom_area - One of the following values
    • africa
    • asia
    • europe
    • middle_east
    • south_america
    • usa
    • world
chld=<country_or_state_codes> Required

A list of countries or states to which you are applying values.

  • country_or_state codes - These are a set of two-character codes, with no delimiter in between. Use either of the following types (you cannot mix types):

Example: chld=DZEGMG

chd=<country_values> Required

A list of values parallel to the list of regions, where the value applies to the corresponding region. Values are standard formatted data values. Each region will be assigned a color along the scale specified in chco, where the lowest value in the range applies to the lowest color, and the highest value in that range applies to the last color.

  • country_values - A list in the appropriate format string. Examples: t:10,20,30, s:aU2Ff, and e:BaPoqM-A.
chco=<default_color>,<start_of_gradient>,...,<end_of_gradient> Optional

A range of colors corresponding to the low and high data values for the data format range. Data values are converted to color values along this gradient, and applied to the corresponding countries.

  • default_color - [Optional] The color of regions that do not have data assigned. The default is BEBEBE (medium gray). An RRGGBB format hexadecimal number.
  • start_of_gradient - [Optional] The color corresponding to the minimum value in the data format range. Default value is 0000FF (blue). An RRGGBB format hexadecimal number.
  • ... - [Optional] You can have as many intermediate colors as you like.
  • end_of_gradient - [Optional] The color corresponding to the maximum value in the data format range. Default is FF0000 (red). An RRGGBB format hexadecimal number
chtt, chts Optional Chart title and style
chma Optional Chart margins
chf=bg Optional Solid fills (background only)

 

Examples

Description Example

In this example:

  • The chart zoom area is Africa (chtm=africa).
  • The three countries are going to be assigned values: Algeria, Egypt, and Madagascar (chld=DZEGMG)
  • The three values assigned to those countries are 0, 100, and 50 respectively (chd=t:0,100,50), which are the minimum, maximum, and middle values for text format data.
  • The range of colors is red for 0, green for 100, and white for unassigned countries (chco=FFFFFF,FF0000,00FF00).
  • The chart also has a light blue background fill (chf=bg,s,EAF7FE).

Map of Africa
cht=t
chtm=africa
chld=DZEGMG
chd=t:0,100,50
chco=FFFFFF,FF0000,00FF00
chf=bg,s,EAF7FE

This chart is similar to the previous one, but with more detail.

Map of Africa
chtm=africa
chld=DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM
chco=FFFFFF,FF0000,FFFF00,00FF00
chd=t:0,100,50,32,60,40,43,12,14,54,98,17,70,76,18,29
chf=bg,s,EAF7FE

This chart specifies that no countries are highlighted by specifying a single, undefined value (chd=t:-1).

Map of the World
chs=440x220
chd=t:-1
cht=t
chtm=world

Back to top

United States State Codes

Here are the supported state codes when the map is zoomed into the United States (chld=usa).

AL Alabama LA Louisiana OH Ohio
AK Alaska ME Maine OK Oklahoma
AZ Arizona MD Maryland OR Oregon
AR Arkansas MA Massachusetts PA Pennsylvania
CA California MI Michigan RI Rhode Island
CO Colorado MN Minnesota SC South Carolina
CT Connecticut MS Mississippi SD South Dakota
DE Delaware MO Missouri TN Tennessee
FL Florida MT Montana TX Texas
GA Georgia NE Nebraska UT Utah
HI Hawaii NV Nevada VT Vermont
ID Idaho NH New Hampshire VA Virginia
IL Illinois NJ New Jersey WA Washington
IN Indiana NM New Mexico WV West Virginia
IA Iowa NY New York WI Wisconsin
KS Kansas NC North Carolina WY Wyoming
KY Kentucky ND North Dakota

Back to top

Standard Features

The rest of the features on this page are standard chart features.

Chart Title chtt, chts [All charts]

You can specify the title text, color, and font size for your chart.

Syntax

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt - Specifies the chart title.

<chart_title>
Title to show for the chart. You cannot specify where this appears, but you can optionally specify the font size and color. Use a + sign to indicate spaces, and a pipe character ( | ) to indicate line breaks.

 

chts [Optional] - Colors and font size for the chtt parameter.

<color>
The title color, in RRGGBB hexadecimal format. Default color is black.
<font_size>
Font size of the title, in points.
<opt_alignment>
[Optional] Alignment of the title. Choose one of the following case-sensitive string values: "l" (left), "c" (centered) "r" (right). Default is "c".

 

Examples

Description Example

A chart with a title, using default color and font size.

Specify a space with a plus sign (+).

Use a pipe character (|) to force a line break.

chts is not specified here.

Vertical bar chart with title
chtt=Site+visitors+by+month|
January+to+July

A chart with a blue, right-aligned, 20-point title.

Vertical bar chart with blue, 20 pixel, title
chtt=Site+visitors
chts=FF0000,20,r

Back to top

Chart Margins chma [All charts]

You can specify the size of the chart's margins, in pixels. Margins are calculated inward from the specified chart size (chs); increasing the margin size does not increase the total chart size, but rather shrinks the chart area, if necessary.

The margins are by default whatever is left over after the chart size is calculated. This default value varies by chart type. The margins that you specify are a minimum value; if the chart area leaves room for margins, the margin size will be whatever is left over; you cannot squeeze the margins smaller than what is required for any legends and labels. Here's a diagram showing the basic parts of a chart:

Chart margin, legend area, and chart area

The chart margins include the axis labels and the legend area. The legend area resizes automatically to fit the text exactly, unless you specify a larger width using chma, in which case it will expand the margin size wider, squeezing the chart area smaller. You cannot crop a legend by specifying a size that is too small, but you can make it take up more space than it needs.

Tip: In a bar chart, if the bars have a fixed size (the default), the chart area width cannot be reduced. You must specify a smaller or resizeable bar size using chbh.

 

Syntax

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>, <right_margin>, <top_margin>, <bottom_margin>
Minimum margin size around the chart area, in pixels. Increase this value to include some padding to prevent axis labels from bumping against the borders of the chart.
<opt_legend_width>, <opt_legend_height>
[Optional] Width of the margin around the legend, in pixels. Use this to avoid having the legend bump up against the chart area or the edges of the image.

 

Examples

Description Example

In this example, the chart has a minimum margin of 30 pixels on each side. Because the chart legend is more than 30 pixels wide, the margin on the right side is set to the width of the chart legend, and is different from the other margins.

Axis labels are outside the plot area, and are therefore drawn within the margin space.

Line chart with gray background and margins on each side.
chma=30,30,30,30

To add a margin around the legend, set a value for the <opt_legend_width> and <opt_legend_height> parameters.

In this example, the legend is approximately 60 pixels wide. If you set the the <opt_legend_width> to 80 pixels, the margin extends to 20 pixels outside the legend.

Line chart with gray background and margins on each side.
chma=20,20,20,30|80,20

Back to top

Background Fills chf [All charts]

You can specify fill colors and styles for the chart data area and/or the whole chart background. Fill types include solid fills, striped fills, and gradients. You can specify different fills for different areas (for example, the whole chart area, or just the data area). The chart area fill overwrites the background fill. All fills are specified using the chf parameter, and you can mix different fill types (solids, stripes, gradients) in the same chart by separating values with pipe character ( | ). Chart area fills overwrite chart background fills.

Solid Fills chf [All Charts]

You can specify a solid fill for the background and/or chart area, or assign a transparency value to the whole chart. You can specify multiple fills using the pipe character (|). (Maps: background only).

Syntax

chf=<fill_type>,s,<color>|...
<fill_type>
The part of the chart being filled. Specify one of the following values:
  • bg - Background fill
  • c - Chart area fill. Not supported for map charts.
  • a - Make the whole chart (including backgrounds) transparent. The first six digits of <color> are ignored, and only the last two (the transparency value) are applied to the whole chart and all fills.
  • b<index> - Bar solid fills (bar charts only). Replace <index> with the series index of the bars to fill with a solid color. The effect is similar to specifying chco in a bar chart. See Bar Chart Series Colors for an example.
s
Indicates a solid or transparency fill.
<color>
The fill color, in RRGGBB hexadecimal format. For transparencies, the first six digits are ignored, but must be included anyway.

 

Examples

Description Example

This example fills the chart background with pale gray (EFEFEF).

Red line chart with black area fill.

chf=bg,s,EFEFEF

This example fills the chart background with pale gray (EFEFEF) and fills the chart area in black (000000).

Red line chart with black chart area and pale gray background.

chf=c,s,000000|
bg,s,EFEFEF

This example applies a 50% transparency to the whole chart (80 in hexadecimal is 128, or about 50% transparency). Notice the table cell background showing through the chart.

Scatter plot with points in blue, and a 50% transparency.

chf=a,s,00000080

Back to top

Color Format

Specify colors using a 6-character string of hexadecimal values, plus two optional transparency values, in the format RRGGBB[AA]. For example:

  • FF0000 = Red
  • 00FF00 = Green
  • 0000FF = Blue
  • 000000 = Black
  • FFFFFF = White

AA is an optional transparency value, where 00 is completely transparent and FF is completely opaque. For example:

  • 0000FFFF = Solid blue
  • 0000FF66 = Transparent blue

Back to top

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.