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.

We did a really simple loan repayment calculator using the API.

[...] Nationwide Loans Get a decision within minutes with no hidden fees or charges. : Loan info [...]

[...] Calculate loan repayments: With the Google Charts API, you can create a GUI that makes calculating a loan repayment easy. [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.