Generate Pie, Bar, Line Charts using Google Chart API

Reporting tools have became so pervasive today that a lot of applications around today’s IT world has these types of tools that reports a lot of complex data in a simple and understandable way. Pie charts, Bar graph, Line charts have became a standard way of representing data in a good and understandable way.

There are lots of Reporting tools available that can be leverage to create such kind of charts. Google Chart API is one of such online tool that can be used to generate complex charts for visual data representation.

What is Google Chart API?

The Google Chart API is an extremely simple tool that lets you easily create a chart from some data and embed it in a webpage. You embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported, and by making the request into an image tag you can simply include the chart in a webpage.

Google had created these API’s for their internal use to generate charts in applications like finance. But soon they realised these API’s will be of great use and hence they launched Google Chart API.

Supported Charts

Currently following are the charts that are being supported by Google Charts API.

1. Line Chart
2. Pie Chart
3. Bar Chart
4. Radar Chart
5. Venn Diagrams
6. Scatter Plots
7. Sparklines
8. Maps
9. Google-o-meter
10. QR Codes

How does it works?

Google Chart API works by sending a HTTP request using URL. All what we have to do is to create a URL that specifies all arguments and other information and send it using HTTP. Google Chart will return us the image of the Chart that we requested.

Live Examples

Following are few examples in each of the Chart types that you can generate using Google Chart APIs.

Pie Chart

Hello World Pie Chart.

1	http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Two dimensional pie chart.

1	http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=200x100&chl=January|February|March|April

Concentric pie charts.

1	http://chart.apis.google.com/chart?cht=pc&chd=s:Helo,Wrld&chs=200x100

Bar Charts

Horizontal bar chart, with stacked bars.

1	http://chart.apis.google.com/chart?cht=bhs&chs=200x125&chd=s:ello&chco=4d89f9

Vertical bar chart, with stacked bars.

1	http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20&chds=0,160

Horizontal bar chart, with grouped bars.

1	http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:el,or&chco=4d89f9,c6d9fd

Line Charts

Chart of type LC.

1	http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72

Line charts of type ls are also known as sparklines.

1	http://chart.apis.google.com/chart?chs=200x125&cht=ls&chco=0077CC&chd=t:27,25,60,31,25,39,25,31,26,28,80,28,27,31,27,29,26,35,70,25

For charts of type lxy, a pair of data sets is required for each line.

1	http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chd=t:10,20,40,80,90,95,99|20,30,40,50,60,70,80|-1|5,25,45,65,85&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5

Venn diagrams

1	http://chart.apis.google.com/chart?cht=v&chs=200x100&chd=t:100,80,60,30,25,20,10

Scatter plots

1	http://chart.apis.google.com/chart?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&chxt=x,y&chxl=0:|0|20|30|40|50|60|70|80|90|10|1:|0|25|50|75|100&chs=200x125

Radar charts

1	http://chart.apis.google.com/chart?cht=r&chs=200x200&chd=t:10,20,30,40,50,60,70,80,90

1	http://chart.apis.google.com/chart?cht=r&chs=200x200&chd=t:77,66,15,0,31,48,100,77|20,36,100,2,0,100&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

1

http://chart.apis.google.com/chart?cht=rs&chs=200x200&chd=s:voJATd9v,MW9BA9&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&chg=25.0,25.0,4.0,4.0&chm=B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0|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

Maps

1	http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:_&chtm=world

1	http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=t:0,100,50,32,60,40,43,12,14,54,98,17,70,76,18,29&chco=FFFFFF,FF0000,FFFF00,00FF00&chld=DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM&chtm=africa&chf=bg,s,EAF7FE

Google-o-meters

1	http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=Hello