google Chart Types

Chart Types

This document gives an overview of the types of charts you can create using the Chart API.

Table of Contents

1. Line charts
2. Bar charts
3. Pie charts Updated!
4. Venn diagrams
5. Scatter plots
6. Radar charts
7. Maps
8. Google-o-meters
9. QR codes

Line charts

Specify a line chart with

cht=<line chart style>

Where <line chart style> is lc, ls, or lxy as described in the following table.

Parameter	Description	Example
cht=lc	For charts of type lc, data points are spaced evenly along the x-axis. Multiple data sets are drawn as multiple lines. For information on how to specify multiple data sets see Using multiple data series. For information on available parameters, see Optional parameters by chart type.	cht=lc chd=t:40,60,60,45,47,75,70,72
cht=ls	Line charts of type ls are also known as sparklines. They take the same parameters, and behave in the same way, as charts of type lc. The difference between charts of type lc and charts of type ls, is that by default, no axis lines are drawn for charts of type ls. For information on how to add axis lines and labels to a line chart, see Axis styles and labels.	cht=ls chd=t:27,25,60,31,25,39,25, 31,26,28,80,28,27,31,27, 29,26,35,70,25
cht=lxy	For charts of type lxy, a pair of data sets is required for each line. The first data set of each pair specifies the x-axis coordinates, and the second data set specifies y-axis coordinates. If you pass in an odd number of data sets, the last set is ignored. To space the data points evenly along the x-axis, provide a single undefined value as the first data set of the pair. For more information about undefined values, see Data formats.	cht=lxy chd=t:10,20,40,80,90,95,99| 20,30,40,50,60,70,80| -1| 5,25,45,65,85

Back to top

Bar charts

Specify a bar chart with

cht=<bar chart style>

Where <bar chart style> is bhs, bhg, bvs or bvg as described in the following table.

Depending on the bar chart style, multiple data sets are drawn as stacked or grouped bars. For information on how to specify multiple data sets, see Using multiple data series.

For information on available parameters, see Optional parameters by chart type.

Parameter	Description	Example
cht=bhs	Horizontal bar chart, with stacked bars. The first example (all bars in dark blue) has a single data set. The second example (bars in dark and pale blue) has two data sets. As you can see, multiple data sets are stacked. You must specify a color for each data set. You can also specify a color for each data point, or bar, within a single data set. See Colors for information about specifying colors. The second example does not use data scaling. Data points that have a combined value greater than 100 are only partially visible. See Text encoding with data scaling for more information about data scaling.	cht=bhs chco=4D89F9 cht=bhs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40| 50,60,100,40,20
cht=bvs	Vertical bar chart, with stacked bars. This example has two data sets, and uses data scaling to ensure that the bars are fully visible.	cht=bvs chco=4D89F9,C6D9FD chd=t:10,50,60,80,40| 50,60,100,40,20 chds=0,160
cht=bhg	Horizontal bar chart, with grouped bars.	cht=bhg chco=4D89D9,C6D9FD
cht=bhg cht=bvg	Vertical bar chart, with grouped bars.	cht=bvg chco=4D89F9,C6D9FD
chbh	The default width for bars is 23 pixels. If you specify too many bars for the available chart size, not all bars appear. Use chbh=a to fix this problem, by automatically resizing bars so that they fit within the chart size. For more options, see Bar width and spacing.	cht=bvg chbh omitted cht=bvg chbh=a

Back to top

Pie charts

Specify a pie chart with

cht=<pie chart style>

Where <pie chart style> is p, p3, or pc as described in the following table. For information on available parameters, see Optional parameters by chart type.

Parameter	Description	Example
cht=p	Two dimensional pie chart. Supply one data set only; subsequent data sets are ignored. By default, pie segment colors are interpolated from dark orange to pale yellow. Specify other colors as described in Colors. Specify labels with chl as described in Pie chart labels. The Google Chart API calculates the circle's radius from the minimum of width and height specified in the chart size (chs) parameter. If you are including labels, you probably need to specify the size of the width to be twice the size of the height, to ensure that your labels are fully visible.	cht=p chs=200x100
cht=p3	Three dimensional pie chart. Specify data and formatting in the same way as for two dimensional pie charts, above. If you are including labels in a three dimensional pie chart, you probably need to specify the size of the width to be 2.5 times the size of the height, to ensure that your labels are fully visible.	cht=p3 chs=250x100
cht=pc	Concentric pie charts. Supply two or more data sets.	cht=pc chd=s:Helo,Wrld
chp	Pie chart orientation. To change the orientation of a pie chart, use chp=<angle in radians>	chd=t:80,20 chd=t:80,20 chp=0.628

Back to top

Venn diagrams

Specify a venn diagram with

cht=v

Supply one data set where:

• The first three values specify the relative sizes of three circles: A, B, and C.
• The fourth value specifies the area of A intersecting B.
• The fifth value specifies the area of A intersecting C.
• The sixth value specifies the area of B intersecting C.
• The seventh value specifies the area of A intersecting B intersecting C.

Parameter	Description	Example
cht=v	In this example, the value 100 specifies the first circle, the value 80 specifies the second circle, and the value 60 specifies the third circle. The values 30, 25 and 20 specify the areas of overlap between each pair of circles. The value 10 specifies the area of overlap between all three circles. For information on available parameters for Venn diagrams, see Optional parameters by chart type.	cht=v chd=t:100,80,60,30,25,20,10

Back to top

Scatter plots

Specify a scatter plot with

cht=s

For information on available parameters, see Optional parameters by chart type.

Parameter	Description	Example
cht=s	The default shape for data points in a scatter plot is a circle. The default color for data points is blue. To use a different shape or color, specify the shape markers by using the chm parameter. More information can be found in Shape markers. At least two data sets should be supplied. The first data set specifies x-coordinates, and the second data set specifies y-coordinates. A third data set can be used to provide points of varying sizes. If you use chm to alter the shape or color of data points, note that points are scaled relative to the size provided in chm.	cht=s chd=t:12,87,75,41,23,96,68,71,34,9| 98,60,27,34,56,79,58,74,18,76| 84,23,69,81,47,94,60,93,64,54

Back to top

Radar charts

Specify a radar chart with

cht=r or cht=rs

For information on available parameters, see Optional parameters by chart type.

Parameter	Description	Example
cht=r	In a radar chart, data points are drawn between the center of the chart and the perimeter. Points of value zero (0, A or AA depending on the type of encoding) are drawn at the center. Points with the maximum value for the encoding used (100, 9 or ..) are drawn at the perimeter. Intermediate values are scaled between the two. The points representing the first and last values in the data set are drawn between the center of the chart and the top of the chart. The remaining points are evenly spaced clockwise around the chart, and a line is drawn between each pair of points. For a chart of type r, points are connected with straight lines. This example shows a simple radar chart, with a single data set.	cht=r chd=t:10,20,30,40,50,60,70,80,90
	You can add further information and clarity to a radar chart by adding colors, line styles, and axis labels. This example is a more complex radar chart with two data sets. The color of each data set is specified with chco, as described in Chart colors. Line styles are specified with chls, as described in Line styles. Axis labels are specified with chxt, chxl, and chxr, as described in Axis styles and labels. For radar charts, the x-axis is drawn in a circle, and the y- and r-axes go from the center of the chart to the top. The t-axis is ignored. When labels are included in a radar chart, the spacing of the data points around the chart is determined by the number of labels, or the number of data points, whichever is larger.	chco=FF0000,FF9900 chls=2.0,4.0,0.0|2.0,4.0,0.0 chxt=x chxl=0:|0|45|90|135|180|225|270|315 chxr=0,0.0,360.0
cht=rs	This example uses the same parameters as the previous example, but has a Fill area specified for both data sets. This example includes an added grid. See Grid lines for more information. For charts of type rs, points are connected with splines to form a curved line.	chg=25.0,25.0,4.0,4.0 chm= B,FF000080,0,1.0,5.0| B,FF990080,1,1.0,5.0
	The final example shows the previous example with added Shape markers. The horizontal line shape marker (specified with chm=h) produces a circle on a radar chart. The vertical line shape marker specified with chm=v is drawn as a line from the center of the radar chart to the specified data point. The vertical line shape marker specified with chm=V is drawn as a line from the center of the chart to the perimeter. The shape markers are specified as follows: the outer blue circle is specified with chm=h,0000FF,... the inner, partially transparent, blue circle is specified with chm=h,3366CC80,... the partially transparent green line (between 1 and 2 o'clock) is specified with chm=V,00FF0080,... the dark green line (at 8 o'clock) is specified with chm=V,008000,... the green line (at 10 o'clock) is specified with chm=v,00A000,... See Shape markers for more information about available shapes. You can also specify range markers. See Range markers for more information.	chm= h,0000FF,0,1.0,4.0| h,3366CC80,0,0.5,5.0| V,00FF0080,0,1.0,5.0| V,008000,0,5.5,5.0| v,00A000,0,6.5,4

Back to top

Maps

Specify a map with

cht=t, and chtm=<geographical area>

Where <geographical area> is one of the following:

• africa
• asia
• europe
• middle_east
• south_america
• usa
• world

For example:

chs=440x220
chd=s:_
cht=t
chtm=world

This is the default map for the world. The size used in the example (440 by 220 pixels) is the maximum for all maps. Note that the data set contains just one character, an underscore (_). The underscore specifies a missing value in simple encoding and gives us the simplest map possible. You can make your map more informative and interesting by using color for one or more countries.

Specify the colors on a map, and how they are applied to each country or state, with three parameters in combination:

chco=<default color>,<start of gradient>,<end of gradient>
chld=<country or state codes>
chd=<color levels>

Where:

• <default color>, <start of gradient>, and <end of gradient> are RRGGBB format hexadecimal numbers. The default color is applied to countries or states that are not listed in the chld parameter. The other colors specify the extremes of a color gradient that is used to color all countries listed in the chld parameter. The color that is applied depends on the country's value in the chd parameter. To control the gradient further, specify more colors.
• <country or state codes> is a list of either of the following:
  • ISO 3166-1-alpha-2 codes for countries as defined by ISO3166, see ISO 3166 Country codes.
  • USA state codes as listed in United States of America state codes.
• <color levels> are text encoding, simple encoding, or extended encoding values. Text encoding with data scaling is not available for maps. The first value is used for the first country listed in the chld parameter, the second value is used for the second country listed, and so on. The lowest data value (A, 0, or AA depending on the type of encoding used) is drawn in the color specified by <start of gradient> in chco. The highest value (9, 100, or ..) is drawn in the color specified by <end of gradient>. Intermediate values give intermediate colors.

For example:

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

In this example:

• The first color is FFFFFF, which specifies white. This color is used for any country not listed in the chld parameter.
• The other colors specify a color gradient from red, through yellow, to green.
• The first country listed is Algeria (DZ). The first value listed is 0. Therefore, Algeria is drawn with the color at the beginning of the gradient, and appears in red.
• The second country listed is Madagascar (MG). The second value listed is 100. Therefore, Madagascar is drawn with the color at the end of the gradient, and appears in green.
• The third country listed is Egypt (EG). The third value listed is 50. Therefore, Egypt is drawn with the color that lies midway across the gradient. The gradient is specified as going from red, through yellow, to green. Egypt appears in yellow.
• Water masses are considered to be the map's background. They are drawn in pale blue (EAF7FE), as specified in the chf parameter. See Chart area and background fill for more details on background colors.

Back to top

Google-o-meters

Specify a Google-o-meter with

cht=gom

For information on available parameters, see Optional parameters by chart type.

Parameter	Description	Example
cht=gom	Here's an example of a Google-o-meter using the default colors. See Chart colors for information on specifying other colors. See Google-o-meter labels for information on specifying the text that appears at the end of the arrow.	cht=gom chd=t:70

Back to top

QR codes

QR Codes are a popular type of two-dimensional barcode, which are also known as hardlinks or physical world hyperlinks. QR Codes store text, which can be a URL, contact information, telephone number, even whole verses of poems!

QR codes can be read by any device that has the appropriate software installed. Such devices range from dedicated QR code readers to mobile phones.

Specify a QR code with

cht=qr
chl=<text to encode>
choe=<output encoding>

Where:

• <text to encode> is the text for the QR code. The text must be url-encoded in UTF8. Note that the space between hello and world is written as %20 in the following example.
• <output encoding> specifies how the output is encoded. If this parameter is omitted, the default encoding of UTF-8 is used. Available encodings are Shift_JIS, UTF-8, or ISO-8859-1.

For example:

cht=qr
chl=hello%20world
choe=UTF-8

The example QR code above is the simplest possible type of QR code, and is known as Version 1. It has 21 rows and 21 columns.

• Version 1 has 21 rows and 21 columns, and can encode up to 25 alphanumeric characters
• Version 2 has 25 rows and 25 columns, and can encode up to 47 alphanumeric characters
• Version 3 has 29 rows and 29 columns, and can encode up to 77 alphanumeric characters
• ...
• Version 40 has 177 rows and 177 columns, and can encode up to 4,296 alphanumeric characters

The Chart API generates the appropriate QR code version depending on the number of characters you provide. For example, if you provide 55 alphanumeric characters, the Chart API will generate a Version 3 QR code. This may be modified by the error correction (EC) level you choose to use.

Don't confuse the number of rows and columns with size of the QR code image. The number of characters you provide determines the number of rows and columns. The pixel size of the chart is determined with chs as usual (see Chart size).

Error correction and margins

Four levels of error correction (EC) are available. The default level (L) allows the QR code to be read even if up to 7% of the code is misread, missing, or obscured. Other levels provide error correction for codes where up to 30% of the code cannot be read. The number of characters that can be encoded decreases as the EC level increases. See Versions, error correction and maximum characters for details.

The default margin is 4 modules. This means that a blank space equivalent to four rows at the top and bottom and four columns on the left and right is placed around the QR code. This is the minimum required by QR readers.

Optionally, specify an EC level and margin with

chld=<EC level>|<margin>

Where:

• <EC level> is one of the following:
  • L allows 7% of a QR code to be restored
  • M allows 15% of a QR code to be restored
  • Q allows 25% of a QR code to be restored
  • H allows 30% of a QR code to be restored
• <margin> defines the margin (or blank space) around the QR code. The default image has a margin equivalent to 4 rows / columns of the chart.
  

Versions, error correction and maximum characters

Before generating your QR code, consider what kind of device is used to read your code. The best QR code readers are able to read Version 40 codes, mobile devices may read only up to Version 4.

See the following table for information on maximum number of characters for each version and EC level.

Version	Rows by columns	EC level	Maximum characters by EC level and character type
			Digits: 0 to 9	Alphanumeric: 0 to 9, A to Z, space, $ % * + - . / :	Binary	Kanji
1	21x21	L	41	25	17	10
		M	34	20	14	8
		Q	27	16	11	7
		H	17	10	7	4
2	25x25	L	77	47	32	20
		M	63	38	26	16
		Q	48	29	20	12
		H	34	20	14	8
3	29x29	L	127	77	53	32
		M	101	61	42	26
		Q	77	47	32	20
		H	58	35	24	15
4	33x33	L	187	114	78	48
		M	149	90	62	38
		Q	111	67	46	28
		H	82	50	34	21
10	57x57	L	652	395	271	167
		M	513	311	213	131
		Q	364	221	151	93
		H	288	174	119	74
40	177x177	L	7,089	4,296	2,953	1,817
		M	5,596	3,391	2,331	1,435
		Q	3,993	2,420	1,663	1,024
		H	3,057	1,852	1,273	784

Further information and standards

QR code is trademarked by Denso Wave, Inc. As you'd expect, the Denso Wave website includes a lot of useful information about QR codes.

QR code was approved as:

• AIM International (Automatic Identification Manufacturers International) standard (ISS - QR Code) in October 1997.
• JEIDA (Japanese Electronic Industry Development Association) standard (JEIDA-55) in March 1998.
• JIS (Japanese Industrial Standards) standard (JIS X 0510) in January 1999.
• ISO international standard (ISO/IEC18004) in June 2000.

QR code reader software is available from many sources. Google offers a QR Code reader library, Zebra Crossing (ZXing), for free. See http://code.google.com/p/zxing/ for details.

See Barcode Contents for a rough guide to standard encoding of information in barcodes.