In a world driven by tweets, YouTube, and a never-ending stream of Facebook
posts and images, you’ll need to fight harder than ever for a share of your
users’ waning attention. One of the easiest ways to do so is by presenting
otherwise tedious data sets as colorful, even interactive charts. In this
new life to sports statistics, demographics, and even your Twitter stream.
As I mentioned, one of Bluff’s interesting features is the ability to create
and reuse themes rather than continuously recreate design attributes. For
instance, Figure 1 was themed using the 37Signals theme, whereas Figure 2 is themed
using the Odeo
From an interactivity perspective, dygraphs is perhaps the solution
offering the most impressive array of features right out of the box. It is capable of
producing highly interactive graphs that even allow the user to selectively
choose and zoom in on desired sections. If you’re looking for a solution that
can really draw the user into the presentation, dygraphs is certainly worth
article, although like JSCharts its expense can be quickly recovered in terms of
features and time saved. Emprise offers support for all of the most commonly used
charts, including Area, Bar, Candlestick, Line, Scatter, and Trend, and it is capable
of accepting data imported from a wide variety of formats, including arrays,
CSV, XML, and JSON. In fact, it seems to offer the best of both worlds in terms of
features and convenience.
Although free for personal use, commercial users must buy a license in order
to use the Emprise library. Costs are minimal, however, starting at just $100 for
a license allowing use on a single Web site.
4. FlotFlot is another
charting solution that has invested significantly in interactive features such
as zooming and mouse tracking. Although the example found on the Flot homepage
seems to indicate Flot’s tendency to be used in scientific applications (see
Figure 4), Flot is actually being used for a wildly diverse array of purposes.
Just last month Spain-based developer Michael Freeman released a particularly
interesting Flot-driven application called Google
Analytics Evolution, which uses the Google Analytics API in conjunction with
Flot to produce an amazing new way to examine your Google analytics data.
5. Google Chart Tools
Of all the solutions presented in this article, Google Chart Tools is the
undisputed heavyweight in terms of support for nearly every imaginable chart
type, whether it’s a simple pie chart or something far more complex, such as a country-based
intensity map. It even supports rather unconventional charting solutions
such as the gauge-based chart presented in Figure 5.
Google Chart Tools actually brings together two of Google’s previously
separate charting solutions: the Google
Visualization API and the Google Chart API.
These solutions are representative of the entire charting gamut, simple enough
for users with no coding experience to use by embedding Google-generated code
into their Web sites, and simultaneously complex enough to allow experienced
developers to create entirely new chart types such as the DrasticTreemap.
If you want to learn more about what Google Chart Tools has to offer without
downloading the library and wading through the API, check out the Google
Code Visualization Playground, which allows you to create charts using a
6. jQuery Google Charts
Earlier in this article I mentioned Google Chart Tools, which is Google’s
powerful set of APIs for building data-driven charts. If, like me, you prefer to
library, you can use the jQuery Google
Charts plugin to build and manipulate charts using familiar jQuery syntax!
7. jQuery Sparklines
A sparkline is a type of
informational graphic first proposed by statistician and visual communication
expert Edward Tufte.
Perhaps its biggest strength is the simple formatting used to present data in
an easily understandable, no-nonsense way.
If you’re a jQuery user, you can easily create sparkline-oriented
charts using the jQuery
Sparklines plugin. While capable of creating simple sparklines of the type
first envisioned by Tufte, jQuery Sparklines goes far beyond the fundamental
features, allowing you to create eye-appealing variations.
One of only two commercial offerings to make this list, JSCharts is such an impressive charting
solution that I believe any such list would be remiss in its omission. Offering
a powerful suite of charting features, and able to accept chart data sent in XML
populate a chart with data sourced from practically any location. Although
JSCharts currently supports only bar, line, and pie charts, I suspect we’ll see
a significant expansion in capabilities with coming releases.
into your Web site, the JSCharts Web site
also offers an impressive online chart editor that can generate charts without
the user ever having to write a line of code. Depicted in Figure 8, the user can
choose from a number of chart templates, and then set about customizing the
chart by selecting desired colors, data, and display characteristics.
JSCharts is free for non-commercial use, and is available for commercial use
If you’re particularly ambitious goals when creating a customized
charting feature, then in the past you would have needed to wade knee deep into
not available in existing solutions (see Figure 9 for an example that uses
by providing a basis from which you can create wildly complex charts and other
graphics, you can use RaphaÃ«l to create features that rival even the most
powerful Flash-based designs.
As I mentioned, RaphaÃ«l is capable of stretching the boundaries of typical
chart design. Check out Figure 10 for a cutting-edge example.
10. The YUI Charts Control
The YUI Charts Control
forms part of the massive YUI
Flash Player installed. Although this does come at a cost of compatibility on
platforms such as the iPad, it is an interesting solution for developers seeking
Like the Google Chart Tools project, Yahoo offers a tremendous number of
developer resources for learning how to effectively use the YUI Charts
Control. Check out the documentation for examples,
API notes, and much more.
you should immediately set about sprucing up those lame data
tables! If you wind up creating some eye-popping charts based on what you’ve
learned here, or would like to suggest other solutions, tell us in the
About the Author
Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author
of several popular books, including “Easy PHP
Websites with the Zend Framework”, “Easy PayPal with PHP”, and “Beginning
PHP and MySQL, Third Edition”.