February 28, 2021
Hot Topics:

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

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

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.

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

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

Top 10 JavaScript Solutions for Converting Data Sets into Eye-Popping Charts
Figure 3. Charting Temperatures in NYC and San Francisco (courtesy of dygraphs home page)

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

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

Page 1 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