Creating charts with google chart

Posted Tue, 02/03/2009 - 18:45
Contributor: Ayesha Ejaz 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 deterrent. 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

Pie Chart Examples

It is easier to learn and reproduce from examples than from instructions. So here are some examples to create pie charts using google charts:


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=p3" is for specifying 3D pie chart
"chd=t: data1,data2...." is for specifying data
"chco=F778A1,ADDFFF" is for specifying the colours of chart
"chtt=Male%20Students%20Enrolled%20For%20Bachelor" is for specifying chart title
"chts=F6358A,20" is for specifying font size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A" is for specifying label for pie chart


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=p3" is for specifying 3D pie chart
"chd=t: data1,data2...." is for specifying data
"chco=92BF23,cc0000" is for specifying chart colours
"chtt=Female%20Students%20Enrolled%20For%20Bachelo" is for specifying chart title
"chts=92BF23,20" is for specifying font size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A" is for specifying label for pie chart


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=pc" is for specifying pie chart
"chd=t: data1,data2...." is for specifying data
"chco=FDEEF4,B93B8F" is for specifying chart's colour
"chtt=Male%20Students%20Enrolled%20For%20Bachelors" is for specifying chart title
"chts=B93B8F,20" is for specifying font size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying pie chart label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=p3" is for specifying pie chart
"chd=t: data1,data2...." is for specifying data
"chco=7F462C,E77471" is for specifying chart's colour
"chtt=Female%20Students%20Enrolled%20For%20Bachelors" is for specifying chart title
"chts=C85A17,20" is for specifying font size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying pie chart label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=p3" is for specifying 3D pie chart.
"chd=t: data1,data2...." is for specifying data
"chco=E55B3C,CFECEC" is for specifying chart colour
"chtt=Males%20Enrolled%20For%20Master%20Degree" is for specifying chart title
"chts=E55B3C,20" is for specifying size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A" is for specifying chart label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=pc" is for specifying pie chart.
"chd=t: data1,data2...." is for specifying data
"chco=C48189,7F5A58,F9A7B0" is for specifying chart colour
"chts=C48189,20" is for specifying size and colour of chart title
"chtt=Females%20Enrolled%20For%20Master%20Degree" is for specifying chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A" is for specifying chart label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=p3" is for specifying 3D pie chart.
"chd=t: data1,data2...." is for specifying data
"chco=FF0000,151B8D,00FFFF" is for specifying chart colour
"chtt=Females%20Enrolled%20For%20Master%20Degree" is for specifying chart title
"chts=FF0000,20" is for specifying size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A|CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying chart label



Bar graph examples

Following are some bar chart examples using google charts. Simply modify the and reuse for yourself.


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=bvg" is for specifying bar chart
"chbh=a" is used for automatically resizing bars so that they fit within the chart size.
"chg=10,30,3,3,10,20" is for specifying grid lines "chd=t: data1,data2...." is for specifying data
"chdl=MALE|FEMALE" is for specifying legend
"chco=7D2252,52F3FF" is for specifying chart's colour
"chtt=%20Students%20Enrolled%20For%20Bachelors" is for specifying chart title
"chts=52F3FF,20" is for specifying font size and colour of chart title
"chs=650x400" is for specifying chart size
"chxt=x,y" is for specifying chart axis
"chxl=0:|CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying x axis label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=bvs" is for specifying bar chart.
"chd=t: data1,data2...." is for specifying data
"chco=153E7E,FDD017" is for specifying chart colour
"chtt=%20Students%20Enrolled%20For%20Ph.D" is for specifying chart title
"chts=153E7E,20" is for specifying chart title's colour and font size
"chs=650x400" is for specifying chart size in pixels
"chdl=MALE|FEMALE" is for specifying legend
"chxt=x,y" is for specifying chart axis
"chxl=0:|D.S|ENG|LAW|MH|NRSN|PHR|P.A|ST|SST|VET|B.PAS" is for specifying label of x axis



Line Graph Examples

Following are some line graphs created using google charts. Simply modify the URLs and you can reuse them for your data.


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=lc" is for specifying line chart
"chd=t: data1,data2...." is for specifying data
"chdl=MALE|FEMALE" is for specifying legend
"chco=7D2252,52F3FF" is for specifying chart colours
"chtt=%20Students%20Enrolled%20For%20Bachelors" is for specifying chart title
"chts=52F3FF,20" is for specifying size and colour of chart title
"chs=650x400" is for specifying chart size
"chxt=x,y" is for specifying chart axis
"chxl=0:|CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying x axis label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=ls" is for specifying line chart.Line charts of type ls are also known as sparklines
"chd=t: data1,data2...." is for specifying data
"chdl=MALE|FEMALE" is for specifying legend
"chco=667C26,99C68E" is for specifying chart colour
"chtt=%20Students%20Enrolled%20For%20Bachelors" is for specifying chart title
"chts=667C26,20" is for specifying size and colour of chart title
"chs=650x400" is for specifying chart size
"chxt=x,y" is for specifying chart axis
"chxl=0:|CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying x axis label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=bvs" is for specifying Vertical bar chart, with stacked bars.
"chd=t: data1,data2...." is for specifying data
"chdl=MALE|FEMALE" is for specifying legend
"chbh=a" is is used for automatically resizing bars so that they fit within the chart size.
"chtt=Enrolment%20For%20Master%20Degree" is for specifying chart title
"chts=827839,20" is for specifying size and colour of chart title
"chs=550x300" is for specifying chart size
"chxt=x,y" is for specifying chart axis
"chxl=0:|AGRI|ARTS|BIO|Buis.A" is for specifying x axis label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=pc" is for specifying pie chart.
"chd=t: data1,data2...." is for specifying data
"chco=F660AB,57FEFF,CFECEC,E55B3C" is for specifying colour of chart
"chtt=Males%20Enrolled%20For%20Master%20Degree" is for specifying chart title
"chts=E55B3C,20" is for specifying size and colour of chart title
"chs=550x300" is for specifying chart size
"chl=AGRI|ARTS|BIO|Buis.A|CHEM|CMRC|I.T|D.S|ENG|LAW|MHS|NRSNG|PHRM|P.A|ST|SST|VET|BSC.PAS" is for specifying chart label


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=lc" is for specifying line chart.
"chd=t: data1,data2...." is for specifying data
"chco=F433FF,ADDFFF" is for specifying chart colours
"chtt=%20Students%20Enrolled%20For%20Ph.D" is for specifying chart title
"chls=data set 1 line thickness,length of line segment,length of blank segment|
....
data set n line thickness,length of line segment,length of blank segment" is for specifying line chart style
e.g "chls=3,6,3|4,6,4" was used in the above chart to specify line style
"chg=10,40,3,3,10,20" is for specifying grid lines
"chts=F433FF,20" is for specifying chart title's colour and font size
"chs=550x300" is for specifying chart size in pixels
"chdl=MALE|FEMALE" is for specifying legend
"chxt=x,y" is for specifying chart axis
"chxl=0:|AGRI|ARTS|BIO|B.A|CHEM|CMRC|I.T" is for specifying label of x axis


"http://chart.apis.google.com/chart?" is the Chart API's location
"&" separates parameters
"cht=bvg" is for specifying bar chart.
"chbh=a" is used for automatically resizing bars so that they fit within the chart size.
"chd=t: data1,data2...." is for specifying data
"chco=F6358A,98AFC7" is for specifying colour of chart
"chtt=%20Students%20Enrolled%20For%20PGD" is for specifying chart title
"chm=D,F6358A,1,0,5,1" is for specifying line and bar chart line styles
"chts=98AFC7,20" is for specifying chart title's colour and font size
"chs=550x300" is for specifying chart size in pixels
"chdl=MALE|FEMALE" is for specifying chart legend
"chxt=x,y" is for specifying chart axis
"chxl=0:|D.S|ENG|LAW|MH|NRSN|PHR|P.A|ST|SST|VET|B.PAS" is for specifying label of x axis