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

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

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

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

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

3. Emprise JavaScript Charts

Emprise
JavaScript Charts
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.


4. Flot

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

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

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.

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts

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

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

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

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

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

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories