February 28, 2021
Hot Topics:

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

  • By Jason Gilmore
  • Send Email »
  • More Articles »

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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
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.


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

Page 2 of 2

This article was originally published on April 16, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date