I’ve looked at a lot of ways to create graphs dynamically on the web. PHP/SWF charts are fantastic if you want a beautiful results, a lot of options, and interactivity, but they require flash, which both limits the platforms that can use them, and can result in slower loading. For better compatibility, you need something that generates images on the fly.

I’d investigated using jpgraph, but the results looked really ugly and it takes up precious cycles on your own server. Then I discovered a free Google web service that generates images on the fly for you, the Charts API. The pictures above are examples of the high-quality results it produces, with clean fonts, nice 3D and most importantly antialiasing. The API is incredibly simple to use, you just pass in the data and options as parameters to the URL. You don’t even need to register or get a key. Here’s the URLs for the two images:

http://chart.apis.google.com/chart?cht=p3&chs=480×200&chd=s:Hellob&chl=May|June|July|August|September|October http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=676767&chls=4.0,3.0,0.0&chs=480×200&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chf=c,lg,90,76A4FB,0.5,ffffff,0|bg,s,EFEFEF

While it’s easy to get started with this style, it does have some downsides. Since the data is encoded as part of the URL, there’s a hard limit on how many points you can have since some systems choke on URLs over 2000 characters long. The API also doesn’t support as many styles or options as PHP/SWF, and no animations is possible.

Despite those disclaimers, this is an amazing tool, and I’ll be having a lot of fun with it. One of my favorite features is the map graph type, which lets you easily specify just colors and states or countries, and it generates an image showing that on a simple map. It would be insanely easy to create some geographic data visualizations using it if you’ve got interesting data. Here’s an example of the results:

http://chart.apis.google.com/chart?chco=f5f5f5,edf0d4,6c9642,365e24,13390a&chd=s:fSGBDQBQBBAGABCBDAKLCDGFCLBBEBBEPASDKJBDD9BHHEAACAC&chf=bg,s,eaf7fe&chtm=usa&chld=NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEOHIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR&chs=440×220&cht=t