Top 10 JavaScript Solutions for Converting Dull Data Sets into Slick Charts

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 article, I'll introduce 10 JavaScript-driven charting solutions that can bring new life to sports statistics, demographics, and even your Twitter stream.

1. Bluff

Gruff is a wildly popular charting solution for the Ruby community. It is so popular in fact that James Coglan decided to port it to JavaScript for the benefit of those not using Ruby or Rails to build their applications. The result is Bluff, a small yet slick charting library that supports convenient features such as themes and tooltips.

Figure 1. Creating Charts with Bluff (courtesy of Bluff Homepage)

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 theme.

Figure 2. Creating a Themed Chart with Bluff (courtesy of Bluff API documentation)

2. dygraphs JavaScript Visualization Library

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 investigating.

Figure 3. Charting Temperatures in NYC and San Francisco (courtesy of dygraphs home page)

3. Emprise JavaScript Charts

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. Flot

Figure 4. Mouse-tracking with Flot (courtesy of Flot documentation)

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.

Figure 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 GUI-based interface.

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 do all of your JavaScript coding using the jQuery 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.

Figure 6. Sample Sparklines (courtesy of jQuery Sparklines home page)

8. JSCharts

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 format or by way of a JavaScript array, it's incredibly easy to create and 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.

Figure 7. Creating a Complex Multi-Layer Line Chart with JSCharts (courtesy of JSCharts.com/examples)

While you can integrate the JSCharts JavaScript library directly 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.

Figure 8. Using the JSCharts Editor to Create and Embed a Chart

JSCharts is free for non-commercial use, and is available for commercial use for $149.

9. Raphaël

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 some fairly complex JavaScript in order to create charting features because they were not available in existing solutions (see Figure 9 for an example that uses Raphaël to chart Google Analytics data). The Raphaël JavaScript library gives you a hand up by providing a basis from which you can create wildly complex charts and other vector designs. Offering a JavaScript interface for creating SVG- and VML-based graphics, you can use Raphaël to create features that rival even the most powerful Flash-based designs.

Figure 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.

Figure 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 Library. Although it's JavaScript-based, the YUI Charts Control requires users to have 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 to meld JavaScript- and Flash-based solutions.

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.

Conclusion

With so many JavaScript-based charting solutions at your fingertips, 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 comments!

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".