Every now and then we would like to add charts to our website but the sheer complexity of creating and adding charts to the website is a strong deterrant. Not anymore.

Old Way

1. Get your data into Excel
   • Convert data to CSV or
   • Copy paste into Excel or
   • Type data into Excel
2. Create your chart
3. Convert the chart into image
4. Upload to your server
5. Create HTML link
6. Oops, found error in data!! Restart from step 1

New Way

Google charts to the rescue. Do the same in just two simple steps.

1. Create an HTML img tag with necessary data and add this tag to your web page
2. There is no step 2

Example Copy paste the following tag into a web page.

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Google|Yahoo">

View your page in a brower. It would display the following chart. Simple, isn't it.

URL Format

Google chart API takes all the parameters in the URL. Following are the parameters it expects:

Parameter	Explanation	Example
chs	chart size in pixels. width x height	chs=200x150
cht	chart type line chart: lc or lxy bar chart: bhs, bhg, bvs or bvg pie chart: p or p3 venn diagram: v scatter plot: s	cht=v
chd	chart data	chd=s:data

Chart Data

Due to URL size restrictions, data encoding has to done in a way understandable by Google Chart API. Three encodings are possible.
Simple Encoding The allowed characters are A-Za-z0-9. A = 0, Z = 25, a = 26, and so on. Underscore is used to represent a missing value. Following is a pie chart cut into 4 equal parts (Z=25): http://chart.apis.google.com/chart?cht=p3&chd=s:ZZZZ&chs=250x100&chl=25%|25%|25%|25% Data sets are separated by a comma.Following is a line chart with two lines http://chart.apis.google.com/chart?cht=lc&chd=s:Aa0,SS&chs=250x100
Text Encoding 0.0 to 100.0 represent 0 to 100. -1 represents a missing value. | is used to separate data. http://chart.apis.google.com/chart?cht=lc&chd=t:10.0,20.0|14.0,89.0&chs=250x100
Extended Encoding Uses pairs of characters AA-AZ etc to represent data. Two consecutive underscores http://chart.apis.google.com/chart?cht=lc&chd=e:AANN,.BAA&chs=250x100