Share

From this page you can share Google Chart API - A Real World Example to a social bookmarking site or email a link to the page.
Social WebE-mail
Enter multiple addresses on separate lines or separate them with commas.
Google Chart API - A Real World Example
(Your Name) has forwarded a page to you from Ajaxonomy
(Your Name) thought you would like to see this page from the Ajaxonomy web site.

Google Chart API - A Real World Example

Tagged:  

You may have seen quite a bit about the new Google Chart API, but you may not have seen a real world example. In the recent release of the Digg Bury Recorder I got some first hand practice in using th Google Chart API. When developing the application I found a few interesting nuances and knowledge of these could help you in using the API in your applications.

One of the most interesting things that I found is that the charting always graphs on a 100x100 basis starting at 0,0. This presented some issues in our application as it needed to graph things like 25 buries and 1200 diggs. The way that I solved this issue was to find the greatest number on each axis and take 100 divided by the greatest number from the points on each axis. Once you get this number you multiply each point it by the appropriate scaler for each axis (although it may not work correctly with points that are less than zero and you would have to adjust the equation to work around that).

The below is an example of an URL that would be used to create a line chart (this is taken directly from the Digg Bury Recorder).

http://chart.apis.google.com/chart?chs=300x225&chd=t:9,16,51,51,51,52,58,59,61,62,63,67,69,69,69,72,74,74,89,93,96,98,100,100|4,8,12,16,20,25,29,33,37,41,45,50,54,58,62,66,70,75,79,83,87,91,95,100&cht=lxy&chxt=x,y&chxr=0,0,155|1,0,24

The parts of this URL that I would like to point out are below:

  • chxr=0,0,155|1,0,24 - This builds the markers of the graph (in our application I used the greatest value for each axis)
  • &cht=lxy - This specifies an X, Y line chart that uses actual points (if you look at the Google Chart API documentation you will see that most examples use helloworld as the points, as each letter has a numeric value, but I prefer to just pass in numbers)
  • chd=t:9,16,51,51,51,52,58,59,61,62,63,67,69,69,69,72,74,74,89,93,96,98,100,100|4,8,12,16,20,25,29,33,37,41,45,50,54,58,62,66,70,75,79,83,87,91,95,100 

    - This is a list of all the points (scaled as I mentioned before). It is important to note that a | is used to separate each axis.

The above Google Chart API URL will result in the below graph.

So now that you've seen my real world example you can check out the official Google Chart API documentation here.

If you make any cool applications using the Google Chart API let us know about it in the comments or you can blog about it on this blog when you sign up for a free account. If your post is considered interesting by the administrators of this site it will appear on the home page, otherwise it will be on your personal blog and under the blogs link.