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

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): ISO 3166-1-alpha-2 codes for countries, or USA state codes 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).	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.	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).	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.	chtt=Site+visitors+by+month| January+to+July
A chart with a blue, right-aligned, 20-point 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:

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.	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.	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).	chf=bg,s,EFEFEF
This example fills the chart background with pale gray (EFEFEF) and fills the chart area in black (000000).	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.	chf=a,s,00000080

Back to top

Back to top