Thursday, December 06, 2007

Embed charts in webpages with one of our simplest APIs yet



Today we're launching the Google Chart API, a really simple tool for creating charts and graphs that are perfect for websites.

Let's get straight in with an example. This URL:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Creates this image:



That's it - no state, no calls, just send your data in an http request and get a png image graph back. Embed the request in an img tag and you're done. We currently support line charts, bar charts, pie charts, scatter plots, and sparklines.

We actually built this originally to use internally - we use it on Google Video and Google Finance for example. It seemed like it would be a good thing to open up to other users too. You can find out all about it at on the Google Chart API homepage and there's a Google Chart API group for questions and support.

The Google Chart API started out as a 20% time project here in Zurich, and we're really happy to be launching it to the world today. Let the charting begin!

41 comments:

  1. This is quite a nice to have!
    Good job guys keep it coming !

    ReplyDelete
  2. I've been trying to figure out the http variables that you use on Google Video for some time for my script!
    This API should prove really useful! :D

    ReplyDelete
  3. This looks like a wonderful API, and you should be really proud at the work you have put in it.

    However, I'm concerned that users of this API might be too quick to make overly simplistic charts.

    Check out Edward Tufte for his thoughts on graphical displays of quantitative data.

    NOTE: this is *not* a knock on the tool. Just a reference to more information for future users.

    ReplyDelete
  4. Looks good but is there any reason why you wouldn't include some Alt attributes to that? since the data is there?

    ReplyDelete
  5. Simple is good. I like. Lots.

    ReplyDelete
  6. 有辦法支援中文嗎?
    support chinese?

    ReplyDelete
  7. Brilliant! I was just looking this morning for an easy way to do sparklines on my website. I think this is it.

    ReplyDelete
  8. Cool. It’s really useful tool. I'll use it in my web based projects. Thanks to Google again.

    ReplyDelete
  9. Can you detail the limitations? "50,000 queries / user / day" means 50,000 queries / IP / day or 50,000 queries / site / day or something else?

    ReplyDelete
  10. Great job folks!
    Are there any chances the categories (for example in your pie chart) may be hotlinked to something else (for example to 'drill down' into the data)

    Also, since AFAIK you folks now own gapminders, is there a chance for future work to go a little bit in that direction?
    (to Ben - if you haven't seen this check out the TED videos - great examples of multidimensional data made comprehensible and actionable)

    ReplyDelete
  11. this is great. this is the simplest tool to generate sites! just plug-in to the image tag!

    ReplyDelete
  12. 真的是太酷了!!

    ReplyDelete
  13. Great job, I already spent way too much time playing around ;)
    I might be missing the point, but is there any way of mixing types of graphs in one view?

    ReplyDelete
  14. simply wondeful useful tool! nice job Google!

    Google-girl kbissoon.
    Krista-Lee Bissoon

    ReplyDelete
  15. Wow! This is simply super. I'm sure google will enable us to use hotspots in charts so we could hot link. I have coded a Simple Web Gui to create the URL for google charts. You are wellcome to use it if needed.

    Indika's Blog

    ReplyDelete
  16. Google has released an open web API that provides a drop-dead simple means of adding graphs and charts to web pages. I really do find their implementation to be extremely elegant and powerful. Here are some sample charts and their usage urls. Good stuff... (Pingback)

    http://dataland.wordpress.com/2007/12/07/google-charting/

    ReplyDelete
  17. Hi,with all the vital role of open source software, where can I find the source code of the following google APIs?

    --- Google Chart API
    --- Google Analytics

    Thank you in advance,

    Alfred.

    ReplyDelete
  18. I'm going to name my first-born "Google" or "Googlette".

    Thanks,

    Chad

    ReplyDelete
  19. Sounds great!It would be even better if Google could provide us with a simple project management tool and compliment it with AIP charts. Right now I'm using Wrike for my projects and it would be really great if Google could offer us something like that.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. simply Great!!
    It will be very much useful to me

    ReplyDelete
  22. Cool tool - will save a lot of people a lot of work.

    Any thoughts on how to handle very long axis labels? The examples are for Jan, Feb, Mar etc but if there are much longer labels they end up running into each other.

    ReplyDelete
  23. Saw this on Simon Dickinson's blog- very useful, thanks loads.

    ReplyDelete
  24. So how about a way to embed an actual stock chart from Google Finance in a web page?

    ReplyDelete
  25. This API is great,
    Google APIs are amazing,
    I had implement a UI editor for Google Charts, you can access it at
    http://chartgen.blogspot.com

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. Very cool way of presenting live data. We've included some Google charts on our homepate at www.goboko.com

    ReplyDelete
  30. hey Guy's, No time for charting then chk this out create your own charts on visifire and take my word it will be done in a couple of minuets.unbelievable right . then go chk out offered under open source powered by silverlight 2 beta 2 just for free

    ReplyDelete
  31. Developers must check this.. http://tammixed.blogspot.com, what the didn't consider...

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. Hi, Is there anyway to show the stock chart like the one in finance.google.com?
    Basically, how to embed the google finance chart?

    ReplyDelete
  34. It's been about a year since the Google Chart API was launched. I was surprised it didn't have a Wikipedia article, so I started one for it here...

    http://en.wikipedia.org/wiki/Google_Chart_API

    Feel free to add to it.

    ReplyDelete
  35. Google chart is great and simple. For advanced visualization charts, also check out style chart. The examples are fascinating.

    ReplyDelete
  36. This simple programm can generate javascript code
    Code generator

    ReplyDelete
  37. If you need embeddable live charts with nice commenting feature check Explainum

    ReplyDelete
  38. I found that the chart api works fine with a relatively simple url fpr QRs but when you try to feed it something like:
    ...com/showcaseproductdetail.htm?ID=157729&Used=1&
    it will not encode the whole address resulting in the wrong qr code. Rather than attempt to convert the longer url’s to UTF-8 I was wondering if anyone had a relatively simple solution to use the google url shortener within a script like the one below (preferrably not the .qr option in the shortener as it defaults to a size too small for print).
    ----------

    <5cript type="text/javascript">
    document.write( '<1mg src=\"http://chart.apis.google.com/chart?chs=220x220&cht=qr&chl=' + location.href + '\">' );


    some characters replaced to allow me to post

    ReplyDelete