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.
Gruff is a wildly popular
charting solution for the Ruby community. It is so popular in fact that James Coglan
Rails to build their applications. The result is Bluff, a small yet slick charting library
that supports convenient features such as themes and tooltips.
1. Creating Charts with Bluff (courtesy of Bluff
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
2. Creating a Themed Chart with Bluff (courtesy of Bluff
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
3. Charting Temperatures in NYC and San Francisco (courtesy of dygraphs home page)
is one of only two commercial offerings presented in this
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.
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
, which uses the Google Analytics API in conjunction with
Flot to produce an amazing new way to examine your Google analytics data.
4. Mouse-tracking with Flot (courtesy of Flot
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.
5. Creating a Gauge-based Chart (courtesy of Google
Chart Tools documentation)
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.
6. Sample Sparklines (courtesy of jQuery
Sparklines home page)
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.
7. Creating a Complex Multi-Layer Line Chart with JSCharts (courtesy of JSCharts.com/examples)
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.
8. Using the JSCharts Editor to Create and Embed a Chart
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.
9. Charting Google Analytics with Raphaël (courtesy of raphaeljs.com/analytics)
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. I Don't Know What It Is, But It Sure Looks Cool! (courtesy of raphaeljs.com/analytics)
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".