Javascript Charts for Data Visualization
The saying “a picture is worth a thousand words” is immensely true for data, especially when generated in huge volume that we see today. The ability to understand and extract value from data is easier when Data Visualization techniques are applied rather than by looking at the raw data or the simple statistics of the data.
The essence of data visualization is to communicate information clearly and effectively to users via sophisticated ways such as infographics, dials and gauges, geographic maps, heat maps, and detailed bar, pie and combination charts. Effective visualization makes complex data more accessible, understandable and usable thus helping users extract insights and actionable information easily.
HTML5/ JavaScript Charting Libraries are popular for great visualization when you are developing a product or application that is consumed over web using wide range of devices including desktop computers, tablets and smart phones.
Choosing The Right Javascript Charting Library
If you are trying to identify the best javascript charting library for your project, then you are going to face the problem of plenty. For a list of JavaScript Charting Libraries visit this page
Though some might have very specific advanced charting requirements, majority of developers are looking for generic solutions. Few popular questions on internet will give you some perspective on this.
- “Which are the best charting (bar charts, pie charts, etc.) javascript libraries available?”
- “I need to implement a dashboard in my web application. What’s a good JavaScript Library for Charting?”
- “What’s a good JavaScript library for real-time charting?”
- “What are the best free html5 javascript charts libraries for real-time data updates?”
- “Which is the best responsive JavaScript chart library?”
- “What is the best javascript charting library with bi-directional communication capability?”
- “I am already using JQuery, so something compatible with JQuery would be fine.”
- “I want to select a library that is under active development and maintenance.”
- “I require something that can be shipped along with my app and not require internet access.”
- “I’m looking for a well documented & supported library“
Evaluating every product available in the market is daunting or worst yet impossible to do. So you may need to choose some criteria to narrow down to couple of charts you could try out. In this article I will try to set direction by listing most important factors that one should use for evaluation.
Deciding Factors
There are so many factors you can consider while selecting a charting library. Based on the nature of your requirement you may need to prioritise weightage to be given to each factor.
Range of Chart Types
What types of charts you need to visualize and analyze the data? Are the basic types such as pie, bar, line etc.. enough? Or do you need more specialised advanced chart types such as heatmap, hierarchical tree maps, Gantt etc..?
By using different types of charts you can do four types of analysis viz. show relationship between data points, a comparison of data points, a composition of data, or a distribution of data.
For example, while you can use scatter plots for distributions, line charts are best used to show relationships. Pie charts are better suited to communicate a composition, but make for poor comparisons or distributions.
Also Read: Visualizing Statistical Data Using Javascript Charts: An Open Data Example
While it is very important that you select a charting library which satisfies all your needs in the short to mid term, it is crucially important that you do not get a bloated library. Don’t go for a library with all possible chart types that you would require many years down the line. It might slow your site to death in the short term. The right balance is very important.
Feature-Richness
For visualization, most of us just require basic charting and graphing capabilities. Title, Axis and Scale, Grid, Legend (Key) and Labels are the basic standard features every chart will have.
If you anticipate you will require robust set of additional capabilities, you need to ensure that your charting library has the capability to handle those. Don’t over anticipate and select a bloated library, if you just need the basic stuff. It might be an overkill in most cases. Here you might take a minimalistic approach.
some of the most advanced features which may not be available in all the charting libraries are,
- Export as Image/PDF: Your users might want to export charts to PDF or images so that they can embed it in their presentation or other documents.
- Input Data Formats Supported: Most of the charting libraries support JSON (JavaScript Object Notation) and most languages today have some kind of JSON library for parsing JSON. But in case you need support for another format make sure your library supports it.
- Interactivity: Interactive charts help users engage with the charts and get better insights. Many charts support drill downs, live data updates, hovering etc., . For example, clicking a slice on a pie chart could show a column chart with more details in another dimension.
- Customizability: Check whether the charting library you are considering is flexible enough to accommodate modifications that you will require with minimal effort.
Learning Curve
Your aim is to get your product/application rolled out as early as possible. Rapid development and quick deployment are key in today’s fast paced environment. You don’t want to develop everything from scratch. This is the reason why you are considering using an off the shelf charting component. You don’t want to spend lot of time learning how to use the charts either. If you can get the chart ready with couple of lines code and in hours rather than days you would be happier.
Also Read: A Beginner’s Guide To Area Charts And Its Uses
Choose a chart that is easy to learn and have declarative approach. You choose a chart type (column, line, pie) and specify a configuration object and you want the library to render a great looking interactive chart. This is very much possible with some of the charting libraries. Such charts are ideal fit if you want to embrace a higher development efficiency and a lesser project cost!
In some cases you have long term plan with data visualization and you want to experiment a lot. This calls for libraries such as D3.js which is very powerful and robust. But the downside is the steep learning curve.If you are building something where visualization is the focus and you have to visualize something complex, then there is no alternative but to dive in and learn how to use libraries like D3.js. They provide you with helper methods which you can use in your own custom code that visualises your data.
But if you are running on a tight deadline or using a charting library for the first time, it is not recommended to use D3.js. You may try using libraries such as PlusCharts and C3.js which are built on top of D3 but has simple declarative approach.
Support & Documentation
Good documentation, examples with code, a vibrant online community (stack overflow/forums) etc.. could help you to get started fast and move ahead whenever you face hurdles during the development. Documentation and demo/examples will also help in getting the chart implemented faster. This will have an impact on project timeline and cost.
At times this may not be enough. Fast and time bound response specific to the issue that you are facing could be very important if you are working on mission critical applications. In such cases you may consider charts that provide support on defined SLA. Your obvious choice would be a commercial chart in this case.
Cross device, browser and platform Compatibility
Cross browser compatibility was a major criteria while selecting a charting library in the earlier days. Since the older versions of IE has almost disappeared from the mainstream this need not be a major concern now. Charting libraries that work with all modern browsers might be a good choice for most of the scenarios.
Your product or application has to be developed in such a way that it is able to be viewed and interacted with on a multitude of devices and screen sizes. To ensure a consistent experience across all devices and screens, the charting library you choose should be responsive. This has become more important because of the proliferation of smartphones and tablets which has changed the user habits in recent times.
Also read: Why Use A Pie Chart?
Apart from being compatible across multiple devices and different browsers, you also need to verify the compatibility of the charting library with popular frameworks. People use different Javascript frameworks such Angular, Backbone and React for application development. Charting library should be compatible with popular application framework libraries.
Licensing/Pricing
Some of the libraries give away their source code when you buy the licence, but that doesn’t mean you also get the right to use in whatever way you want. It’s important to know what all permissions you’ll need for your project and buy a suitable license. License terms and pricing varies based on number of users, type of application (SaaS, intranet, web), number of servers etc.. Some companies may offers multiple version of the library based on the chart types, features, and the API access.
While comparing the pricing you should consider the total cost of ownership and not just the upfront cost of the license. Don’t choose a library with the lowest upfront cost as additional expenses like maintenance, upgradation and support can add to the total cost in the long term.
