In working with clients, we’ve researched and used numerous technologies for interactive charting. To help you better understand what’s out there, I’ve selected six of our favorites, roughly ordered from simplest to most complex. In this article, we’ll be diving into the first three; check back soon for part 2.
- jQuery Visualize
- Google Charts
- Simile Exhibit (Part 2)
- D3.js (Part 2)
Developed by the Filament Group (the fine folks who helped bring us the awesome jQuery UI), jQuery Visualize is a great entry point into the world of dataviz online. jQuery Visualize is by far the simplest and easiest dataviz tool I know of. It simply converts an HTML table into a variety of charts – no need for a data file or anything. If you’ve used jQuery at all, you can get this up and running in minutes.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts
- Data Input Sources: HTML table
- Data Output: HTML, Canvas
- Styling Options: Parameters, CSS
Uses HTML Tabular Data
For me, the most useful feature in Visualize is that it will draw charts directly from an HTML table – no need to put the data into a special format or file. So, for example if you already have tables of data on your site, financial or impact metrics, for example, all you need to create a great-looking pie or bar chart is a single jQuery call.
jQuery Visualize does what it does very well and not much else. There’s no hovering over a data point to see the value, no animation options. If you want a more robust experience you’ll need to look elsewhere. But if you’re looking for easy, CSS-styleable charts from existing data on your site, look no further.
It seems Google is doing everything these days and one of the things it is doing very well is dataviz. Google Charts is one of two major Google dataviz products, concentrating on more traditional chart types and ease-of-implementation. The other, Google Fusion Tables, is primarily geared toward mapping, but also does other chart types.
- Visualization Types Supported: Area Charts, Bar Charts, Candlestick Charts, Column Charts, Combo Charts, Gauge Charts, Geo Charts, Line Charts, Pie Charts, Scatter Charts, Stepped Area Charts, Table Charts, Tree Map Charts
- Data Output: iFrame
- Styling Options: Parameters
- Type: Service
Ease of Use
Google Charts are very easy to set up; they render quickly and have some nice interactive touches (e.g. hover over a pie chart wedge and you automatically get a nicely styled popup displaying the name and value for the wedge).
Good Preset Parameters
Google Charts is ready to go with a good set of useful styling and layout parameters (colors, position of legend, type sizes, etc.) that will cover most scenarios. You can get a pretty strong on-brand look that integrates with your site’s look & feel pretty easily, though fine-tuning details can be a bit limiting.
Although Google does a good job providing a useful set of styling parameters, nothing quite beats the flexibility of CSS for controlling the look and feel of your charts. Since each chart is an iFrame, there’s no access to styling elements via CSS, only through script parameters. It is usable and, in most cases, flexible enough, but in our experience, Google Charts requires a bit of trial and error to get just right. Also worth noting, cross-browser testing is a bit difficult.
Unexpected Default Settings
We recently noticed that Google has added features to the charting tools (they are very, very busy over there at Google…) and that some features are enabled by default. This is great and all but, if you’ve used Google Charts in the past, the new default features will be enabled on your existing charts. This is a pretty major drawback that requires you to keep an eye on your projects that use Google Charts, then go back and disable features to keep charts looking as originally designed.
Highcharts is the only pay-for product in my roundup (free for non-commercial use, $80 for a single website license, other pricing options here). However, in my opinion, you get what you pay for with Highcharts. In addition to a very robust set of default chart styles, Highcharts is also very customizable and has some really nice animation features. It can pull in data from a wide range of sources and can also export a wide variety of graphic types directly from the webpage. Very handy!
Highcharts also has a fantastic zooming feature – just draw a box around what you want to see closer and voilá! Check it out! Really great.
If you are looking for the sweet spot between usability, flexibility, styleability, and out-of-the box features, Highchart is an excellent all-around tool for robust charting and graphing.
- Visualization Types Supported: Area Charts, Bar Charts, Line Charts, Pie Charts, Scatter Charts, Dynamic Charts, Combinations
- Data Output: SVG
- Styling Options: Parameters, CSS
You can create a master theme file for all of your charts and call it from the chart method. Nice touch to make styling easier and more consistent across projects.
You can set Highcharts up to allow the user to show and hide series of data. See this in action here by clicking in the legend area on the person’s name. Pretty nifty.
HTML Table Input
Highcharts can also read data from an HTML table that is on your page, like jQuery Visualize. This is really handy if you prefer to not deal with external data sources.
Highcharts can “draw” the chart on the page with some really nice animation effects, like this. It’s a very nice touch that makes your charts and your site look super pro.
Highcharts outputs a very nice SVG graphic that, when opened in Illustrator, retains type boxes and everything. It’s potentially a very handy feature for web/print workflow solutions.
Not that it is that much money but the expense of Highcharts might turn some clients off. In my opinion, the level of polish and capability of this product easily justifies the cost.
This article was originally published at http://www.ms-ds.com/our-thinking/insights/6-great-interactive-data-visualization-tools-part-1 and is reprinted with permission.