Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create beautiful HTML5 charts with Chart.js

Sunday, July 10th, 2016 by Servage

chart-jsChart.js is a JavaScript library that allows designers to visualize data using pretty HTML5 charts. Chart.js comes with 6 different chart types and is mobile-responsive out of the box. You can use Chart.js for virtually anything: Comparison charts, data usage charts, visitor statistics and even interactive charts. After reading this article you will know, with the help of the official Chart.js documentation at www.chartjs.org/docs, how to create an HTML5-powered chart for your own website or web application.

Getting started

This article assumes you have access to the Chart.js documentation. To get started as easily as possible, you should have the documentation open at this moment. The first step is to include the Chart.js library using the <script> HTML tag. You can download the library from www.chartjs.org or use the CDN link provided in the documentation. The basic workflow for creating a chart consists of four steps: Creating an HTML canvas element, finding the element using JavaScript, generating data for the chart, and finally, populating the chart with the data.

Creating the HTML5 canvas element

Creating the canvas is simple. You only need a new canvas element with an ID (or a class), for example: <canvas id=”myChart”></canvas>.

Getting the canvas context with JavaScript

To manipulate the canvas with Chart.js, the canvas element must be stored in a variable. More specifically, the 2D context of the element must be stored, which allows us to draw content to the canvas. This can be done with a combination of getElementById and getContext functions. For example: var myChart = new Chart(document.getElementById(“myChart”).getContext(“2d”)). Refer to the documentation for more information about this.

Generating data for the chart

Chart.js takes input data for the charts as an array of objects. In a pie chart, one object of the array corresponds to one slice in the chart. A pie chart requires only one object with a numerical value to generate a chart. This would generate a chart with only one slice that fills the whole chart. However, it is recommended to also add colors for the slices with the color property. Refer to the documentation for more examples and values for the charts.

Attaching a chart to the canvas

Now that we have access to the canvas with JavaScript and we have data for the chart, we can add our data to the canvas. This can be achieved with the pie function that is part of Chart.js. If you saved a reference to canvas in the myChart variable and the data in the myData array, the following JavaScript code will visually populate our chart: myChart.Pie(myData).

Final words

By now you should have a working pie chart on your website. There are 5 more chart types in Chart.js and other properties to decorate your charts with. The documentation of Chart.js contains complete examples for other chart types as well as properties they support. Experiment with the charts and properties on your own, and you will be amazed about the feature-rich charts you will create in no-time.

Create beautiful HTML5 charts with Chart.js, 3.3 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.