Posted by Robert S.

I have been looking for some free and fancy charts to spice up web application I’m building for a client. The four most useful tools I came across were: Open Flash Charts, Google Chart API, Yahoo! UI Library Charts, and Sparklines.

Open Flash Charts

Open Flash Charts by John Glazebrook takes the top spot with the most powerful chart widget. It’s Flash-based, and rather easy to use. All you need is a couple of lines of PHP (or Java, Perl, Python, Ruby on Rails, or .NET) to embed the chart, and a script on your server to output some data.

<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/chart-data.php', false );
?>

Check out the Open Flash Charts tutorial for more details. It takes about 15 minutes to work through the first tutorial and the results are great.

Open Flash Charts sample

Google Chart API

The Google Chart API is fun, easy, and doesn’t rely on Flash at all. Which of course means it lacks the interactivity of a Flash-based chart, but it’s compatible with more platforms and is by far the easiest to implement. One drawback is that (at the time of writing) it does not support negative numbers without cheating.

The Google Chart API is controlled entirely through the <img> HTML tag. An image with a URL of http://chart.apis.google.com/chart?chs=200×125&chd=s:helloWorld&cht=lc&chxt=x,y&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb produces the following:

Google Chart API sample

Full documentation is available on the Google Chart API website.

Yahoo! UI Library Charts

Yahoo!’s offering, Yahoo! UI Library Charts, is still marked as “experimental”, but it looks as though it will turn out to be very powerful. If you’re familiar with other components of the Yahoo! UI Library, getting started should be a breeze. Like Open Flash Charts, it uses Flash for display.

The biggest downside appears to be a lack of any way of easily embedding a graph in a blog post such as this one. To see Yahoo!’s charts in action, click here.

Sparklines

Sparklines are, as defined by Edward Tufte, small, high resolution graphics embedded in a context of words, numbers, or images (from Wikipedia).

If that sounds like what you’re looking for, the Sparkline PHP Graphing Library is for you. With just a few lines of code, you can represent data on your website with image-based sparklines, like and .

As you will see in the documentation, generating a sparkline is dead easy:

<?php
require_once('/sparkline/Sparkline_Line.php');
$sparkline = new Sparkline_Line();
$sparkline->SetData(0, 15);
$sparkline->SetData(1, 18);
$sparkline->SetData(2, 9);
$sparkline->Render(100, 20);
$sparkline->Output();
?>


In Conclusion

All of the above are fantastic tools which can greatly simplify the task of embedding charts in your web applications. Depending on your needs, one of them will almost certainly be a fit for your project. I know I’ll be making use of all four in upcoming projects.

If you have a tip on another chart widget, please share below.