So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be difficult for them to understand. This is why you need help from charts. In web design, charts are one of the best tools for data visualization. It is easy to read, easy on the eyes and relatively easy to set up.
But let’s take things up a notch: let’s add animation and interactivity to those charts, so that readers can not only learn something new from the chart, but also play with it. It is actually easier than it sounds, thanks to a number of JS libraries out there. Let’s check them out.
1. Chart JS
Chart.js is a no-dependency library to build charts in 6 different types: line charts, bar charts, radar charts, polar area charts, pie and donut charts. The library is also split according to chart type so your pages aren’t bogged down with what is not needed. It supports responsive design and you can easily change variables like color or animation to customize the chart interface.
2. Chartist JS
Chartist JS is great library to build responsive charts that make use of SVG. Besides its responsiveness, Chartist gives you flexibility by using clear separation of concerns: style with CSS and control with JS. To make customization easier, the SASS files are included. The great thing here is you have limitless options to animate your chart using the Chartist animation API, SMIL, which gives you additional animation options.
3. C3 JS
C3 JS is a library to build charts based on D3 JS. It wraps up the required code to build charts with D3 JS, so you can skip writing the D3 code, and just input your data. C3 comes with a variety of API that you can use to control your charts easily. To customize your chart, define your own custom styles to the given CSS classes. Build charts from simple line charts to gauge charts. Check out this page to see how the library works.
Flot is a jQuery plguin for creating charts with interactive elements like turning a series on or off, data point interactions, panning, zooming and more. Flot comes with a variety of chart type options and if you want more ability on your chart, here are some plugins you can use as well. The charts will work well with browsers that support HTML canvases.
Echart is an amazingly comprehensive library from China which supports multiple chart types, can process big data (plotting up to 200,000 data points on a Cartesian chart), has scale roaming, the ability to effortlessly extract, integrate, and exchange data among multiple charts, allowing one to easily switch from one data type to another, and a whole lot more.
Peity will add a mini chart to your web page. It is a small jQuery plugin that transforms an element into a mini
svg line, bar, donut, or pie chart. You just need to create an element and give a value like
1/5 and make a call
peity('pie') on that element to make a mini pie chart. For instance, to create a donut chart that is only one-fifth highlighted, here is the HTML:
You can customize the chart color, radius, width and height, but by default it’s displayed in small size.
7. DC JS
DC JS has similarities with C3 JS in terms of engine used; they both use the D3 library to render charts in SVG. DC JS is created to help you visualize data and analysis for browsers and for mobile devices. Since it leverages on the D3 JS, it allows you to add user interaction to your chart. DC JS is one powerful library to create charts from simple to high complexities.
8. Google Chart
<div> with that id to display your chart.
NVD3 is a set of reusable charts and chart components that are built with D3 JS. This library is hence a ‘template’ that will help make it easier for you to build charts. Check out the many sample charts built with NVD3 here.