Skip Navagation

Full On Design

A Web Development & Technology Blog

 

The Google Chart API

Rogem

About the Author

Mike Rogers is a Web Developer who is currently at University studying Web Technologies. He also is the founder of Full On Design. He has several years experience freelancing and you can follow him on Twitter (Rogem002).


This is a simple pie chart

Google offers Webmasters an easy solution to create simple or and quite complex graphs in the Google Chart API section of the Developers Guide. It is quite simple to use, if you want to create an image such as above, just link to the following image:

]http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Pie|Not%20Pie

Google will then do the graphical generation stuff; here is a quick overview of the URL structure (key -> value):

  • cht – What type of chart you want:
    • p3 – 3d pie chart
    • p – 2D chart
    • v – Venn diagram
    • s – Scatter Plot
    • lc – Line Chart
    • bhs – Horizontal Bar Chart
  • chd – The Chart Data
    • Separated by commas, for example 10, 20 , 30
  • ch1 – Chart Label
    • Labels separated by Vertical Lines (pipes)
  • chd – Chart Dimensions (Maximum – 1000×300)

Make sure you take a look at Google’s documentation, it will show you how to do some more complex stuff.