Are you building a web app or working on a blog or website and you need a beautiful way to display data? As usual, Google is here to help - for free.  Google has built a very easy to use API for creating charts and adding them to your website on the fly. Here is a simple guide for how to use the API to create a pie chart.

For eample, let’s use Google Charts to display the results of a poll. Here is some sample data.

Whats your favorite computer manufacturer?

Company	Percentage
Dell	40%
Apple	15%
Sony	7%
IBM	8%
HP	10%
Toshiba	20%

How did I do it?

It is simply an image that is generated on the fly by Google. With just a few commands in the src attribute.

Explanation

First things first, creat and image tag.
<img src="" alt="">
Then, give the image and appropriate alt attribute. This is important to include so that if the viewer has any issues downloading or viewing the image they will atleast have a short description of the image. Also screen readers and web crawlers will be able to interpret the content of the image. In fact an even more descriptive alt is warranted, but for the sake of this tutorial “Sample Chart” will do.
So now our image tag looks like this:
<img src="" alt="Sample Chart">
Next, we want to connect to the Google Charts API. We do this by adding the image source attribute.
<img src="http://chart.apis.google.com/" alt="Sample Chart">
Now that we are connected to the Google Charts API, we need to tell Google what type of chart we would like them to produce for us. To do this we will add:
chart?cht=p3
We will also need to add a chart size parameter. Which, in this case, would look something like this:
&chs=300x100
Lastly, we’ll need to add some chart data. Here is the code we will add to complete this chart:
&chd=t:40,15,7,8,10,20&chl=Dell|Apple|Sony|IBM|HP|Toshiba

That’s it! Google makes creating charts and graphs on the fly easy. This is just one example of a chart you can creat using this API. There are plenty of other possibilities and applications of this. Combine this API with a bit of server side programming knowledge and you can create beautiful web sites and web applications. If you would like to learn more about the Google Charts API check out the API documentation.

Here is the complete code for this tutorial.

<img src="http://chart.apis.google.com/chart?cht=p3&chs=300x100&chd=t:40,15,7,8,10,20&chl=Dell|Apple|Sony|IBM|HP|Toshiba" alt="Sample Chart">

John Hicks of HicksDesign gave an excellent speech at the most recent Future of Web Design Conference. He titles the presentation “Design to Deployment” and it covers exactly that.  He build a site dedicated to cheese, and in the process explains his code from planning to execution.  This is definitely guide that should be paid attention to.

I don’t 100% agree with everything he demos, however. For example, I am not much of a CSS grid framework advocate.  I believe that grid frameworks complicate sites with extra code and blur the lines between markup and style.  But other topics he covers are oh so useful, such as importing styles, and using Eric Meyer’s CSS Reset.  Check it out.  Also, below the video are links to the relevant slide show as well as some of John’s thoughts on the presentation.

Jon Hicks - FOWD London 2008 from Future of Web Design on Vimeo.

The slides for this presentation here.

Some of Johns personal thoughts here as well.