How to Use Chart.js For Displaying Data in Graphs?

By Hujatulla Asghari On Apr 16, 2016 0

Displaying data in graphs or charts make you application more user friendly and awesome looking. There are many frameworks to use for chart and graph display, but Chart.js is the best option. Chartjs is Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free. In this tutorial, you learn the basic, how to use chartjs in your own projects.

Getting Started

Though, Chartjs has a great documentation, we will teach you this framework by practical example. Before showing how to use chartjs, let see a live example of it. Imagine if you want to report the monthly income from two resource, like Google and ads.

[codepen_embed height=”356″ theme_id=”0″ slug_hash=”XdEwdK” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/XdEwdK/’>Chartjs Practice</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

So, it was just an example. You can use it in different ways of course. Now lets learn it works

How to use Chartjs?

To use chartjs in your project, all you need is to download and include it in you project. Chartjs is free and open-source. We are going to use cdnjs to inlcude this file to our project, so if you want, you can do the same.

Step 1

Simply add the following code to at the bottom of your HTML page.

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>

Step 2

Now create a canvas tag to draw the chart inside in your HTML file.

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Chartjs practice</title>
</head>
<body>
  <canvas id="technig" width="500" height="400"></canvas>
</body>
</html>

You can specify the height and width as much as you want. We give it an ID as well, so we can get its context through JavaScript.

Step 3

Now is the JavaScript part in how to use chartjs. If you have added the Chart.js framework file currectly, you have access to Chart class and its all functions.

First, let’s get the canvas tag context in 2d.

var context = document.getElementById("technig").getContext("2d");

To draw the chart in the selected canvas tag, pass the context variable to Chart class and than add any of the Chart.js function or charting type. The most command types of charts that Chartjs support are, line chart, bar chart, radar chart and a few more that you can see in the documentation.

Here is how you can add line chart.

new Chart(context).Line(data);

In the above code, we have created a new instance of the Chart class and gave than the context argument. After that we appended the Line function with accept two argument, but the second argument is optional. The first argument is the data that you want to display.

step 4

Now you can the data as an array.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "Google Income",
            fillColor: "rgba(229,89,52,0.2)",
            strokeColor: "#9BC53D",
            pointColor: "#E55934",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 40, 71, 56, 65, 80]
        }

    ]
};

The labels property will contain all the label which you want to have break-point on. The datasets property will contain the graph design and data. As you can see, last property of the datasets is data, which hase number values. That is where your data will be placed. For example, in January the value will be 65, and on February it will be 59 and so on.

Now it will show one line graph with data specified. If you want to show more than one data report, you can another array to the datasets property.

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”XdEwdK” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/XdEwdK/’>Chartjs Practice</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see, we have two lines in graph. You can check the JavaScript tab to see how we added the second array.

Finally

To apply another type of chart, just change the Line function to Bar or Radar.

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”vGjBBW” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/vGjBBW/’>Bar chart using chartjs practice</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

Chartjs is really an awesome framework for reporting data. We hope it has been informative for you. If you have any types of questions related to charting, feel free to comment it below in the comments. 🙂