Originally published at: http://www.sitepoint.com/creating-beautiful-charts-chart-js/
Content is king. We all have heard or read this sentence that expresses how good text can drive conversion because of the effect on search engines. However, while text is excellent for search engines, sometimes people can better understand a concept by looking at an image or a chart. For example, if your website is specialized about surveys, a description about a survey is important but a chart that summarizes the data of the survey is much more powerful for your users.
In this article I’ll introduce you to a JavaScript library called Chart.js that employs the HTML5 canvas element to draw charts on a page. After a brief overview of the library I’ll also show you two examples of use of this library.
What is Chart.js?
Chart.js is a JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element. Since it uses canvas, you have to include a polyfill to support older browsers. The one suggested by the author is ExplorerCanvas, so you may want to stick with it.
The library doesn’t have dependencies and its weight is very low as it’s ~11kb in size when minified, concatenated, and served gzipped. However, you’re able to reduce the size even further, if you don’t use all six of the core chart types, by including only the modules you need. So, let’s say that you only need to draw a bar chart in your website, you can include the core and the bar module and save bandwidth for your users.
Another cool feature of Chart.js is that the charts are responsive, so they will adapt based on the space available. Finally, unlike many libraries you can find on the web, it provides extensive and clear documentation that makes using its basic features as well as its advanced options very easy.
In the next section we’ll see how you can obtain and include it in your website.
Getting Started with Chart.js
The first step to use this library is to download and include it in the page where you plan to draw one or more charts. To download Chart.js you have two possibilities. The first is to download the library by visiting its GitHub repository. A second possibility is to use Bower, the dependency manager for the web, by running the following command:
bower install chartjs --saveOnce downloaded, you have to include the JavaScript file(s) in your page. In the next example I’ll assume you want to include the all-inclusive version:
<script src="path/to/Chart.js"></script>
Please note the capital letter of the file. It’s not usual that a library is written with the first letter uppercase so the first time you use it you may struggle in understanding why you obtain a 404 error.
Once done, the library will provide all its methods through a global variable named Chart. With the JavaScript file in place we’re ready to create our first chart. To do so you need to instantiate a new Chart object by passing to it the 2d context of the canvas you want to employ in your page. To understand this concept, let’s say that you have the following element in your page that will be used to place the chart:
<canvas id="skills"></canvas>