The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&
chs=250x100&chl=Hello|World

Press the Enter or Return key and – presto! – you should see the following image:

URL format

Google Chart API URLs must be in the following format:

http://chart.apis.google.com/chart?<parameter 1><br>&<parameter 2>&<parameter n>

Note: Each URL must be all on one line.

Parameters are separated with the ampersand (&) character. You can specify as many parameters as you like, in any order. For example, the Chart API returns the following chart in response to the URL below:

http://chart.apis.google.com/chart?
chs=200x125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

Where:

  • http://chart.apis.google.com/chart? is the Chart API’s location.
  • & separates parameters.
  • chs=200×125 is the chart’s size in pixels.
  • chd=s:helloWorld is the chart’s data.
  • cht=lc is the chart’s type.
  • chxt=x,y indicates both x-axis and y-axis labels are required.
  • chxl=0:|Mar|Apr|May|June|July|1:||50+Kb are the x-axis and y-axis labels.

You may be wondering how helloWorld maps to data values? This is an example of Simple Encoding where the alphanumeric characters map to values ranging from 0 to 61. You don’t need to worry about this mapping for now, all will be revealed later in this document.

You can include a Chart API image in an HTML document by embedding a URL within an <img> tag. For example, the following <img> tag results in the same image as above:

<img src="http://chart.apis.google.com/chart?
chs=200x125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb"
alt="Sample chart" />

Note: When you embed a URL in an HTML <img> tag, take care to use the character entity reference & in place of an ampersand (&).

Chart type

Line charts

Bar charts

Pie charts

Venn diagrams

Scatter plots

Read more . . .

Advertisements