Choosing a JavaScript Charting Library: the Main Contenders

JavaScript charting is a crowded space with plenty of open-source and paid options, and choosing the right library for your project is not always a straightforward decision. There are many factors to consider before you can make the call.

What I’ve noticed is that more often than not, the choice always comes down to the top three or four libraries - D3.js, Highcharts, FusionCharts or Google Charts. To make your task easier, I’ve compared the top three in detail with pros, cons and live examples.

Let’s get started!

D3.js

Created by Mike Bostock, D3.js has become almost synonymous with Data Visualization. D3 is based on modern web standards and gives you complete control over how your chart is rendered.

Pros:

• It’s elegant and beautiful: With D3 you can create mind-blowing visualizations (like this and this) that are simply not possible with any other library. In that sense, all other libraries look like a subset of D3.
• Lightweight: The D3 core JavaScript file is just 336 KB, the minified version is just 151 KB. This is a great advantage when it comes to building high performance web applications.
• Highly customizable: D3 doesn’t come with a fancy feature list out of the box. Instead it opts for efficient manipulation of documents based on data, leaving you free to customize it any way you want.
• Community: Owing to its open-source status, it has a huge community around it. There are already thousands of answered questions on StackOverflow, and if you have new issues you can easily get them answered there, or even in our own forums.
• Huge gallery for inspiration: D3 has a gallery with 900+ examples for your inspiration. These examples range from very basic to extremely sophisticated and are often interactive.

Cons:

• Steep learning curve: It’s fun and intellectually stimulating to use D3. But if you are on a deadline and want something that ‘just works’, D3 might not be the right option. FusionCharts and Highcharts would be a better choice in this case because of their ease of use.
• Browser support: D3 doesn’t support IE 6, 7, 8. It’s sometimes not smooth on IE 9, as well. So if you are targeting a wider audience or enterprises, D3 would be a bad choice.
• Label management: Label management is an uphill task in D3, but it is automatically taken care of by libraries such as FusionCharts and Highcharts. To see a live example of what I am talking about, visit this page, and click on the discrete bar chart (first row, fourth tile). Then try entering longer names (than ‘A’, ‘B’, ‘C’ etc).
• Chart export: Libraries such as FusionCharts and Highcharts support the exporting of charts to PNG, JPG, SVG and PDF files out of the box. However, in D3 you’ll have to write extra code to do this.

Example:

I have created a column chart using some sample data. I’ve manually defined axes, tool-tips, data plots and chart cosmetics. This is a huge advantage when compared to other libraries where these things are predefined and you have limited configuration options.

Continue reading %Choosing a JavaScript Charting Library: the Main Contenders%

by Vaibhav Singhal via SitePoint