Quick and Dirty Charts

Posted at May 5, 2008

Sometimes you need a chart or graph for your website.

I do charts often to show the progress of our college’s fundraising. Originally, I did these charts in Photoshop and every few weeks, I would get new numbers from our fundraising team and I’d dutifully open Photoshop, find my file, make my changes, save the file, and finally upload it. After a few years, I got pretty good at this but it still took time to do.

Enter Google’s charting tool.

Google’s Charting tool lets you easily create, update and maintain a variety of charts and in typical Google fashion, it’s easy, and *gasp* almost fun.

Starting last fall, I changed the chart on our progress page from a static file to a Google chart. Because of the API, I can also post my chart right here:

Google Chart Sample

My chart is a very simple pie chart, but as you can see from the graphic, you can really customize your chart to match your needs. My chart uses my school’s official colors, and I’ve added a header and a label. To build the values, I do a little bit of math in PHP to save some time as well as making updates easier. Here’s a brief bit of code:

$val1 = "2000000";
$val2 = "1005000";
$perc = ($val2/$val1)*100;
$perc2= 100-$perc;

For the chart, I set $val1 as the goal of our fundraising. I set $val2 as the amount we’ve raised. The $perc variable gives me the value I need to build the progress pie slice. $perc2 is the other slice of the pie. To build the image we just call an image from Google with our parameters.

<img src="http://chart.apis.google.com/chart?
chco=ffc726,00234c&cht=p3&chd=t:<?php echo $perc;?>,
<?php echo $perc2;
?>&chf=bg,s,ffffdd&chs=250x120&
chl=Progress&chtt=Progress as of March 21,
2008" />

If you need charts, I’d recommend the Google API. I’m doing really basic stuff with it, if you look at the examples you’ll see some pretty hardcore charts and maps you can put data on. There are also a few fun ones you can build.

How Awesome Is This Blog?

Filed under: Google

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

One Response to “Quick and Dirty Charts”