Post
Ask Question

Draw Charts in HTML Using Chart js

Introduction

 
Recently, I am working on a project in which I must create some charts and graphs in a website. As we know Graphs are very useful in displaying data visually rather than displaying data in tables. Using Chart.js, we can draw charts and graphs on a webpage using a HTML5 canvas element. We can create six types of charts using chart.js. In this article, let's learn how to use chat js to create chats in HTML web apps.
 
Let's Start
 
First, we need to go http://www.chartjs.org/ for downloading the chart.js JavaScript plugin. Clicking on the download button will take you to the GitHub page from where you can download the archive.
 
 
After extracting the files in the Chart.js-master.rar file, you will be able to find the documentation, examples, and chart.js file.
 
Add the chart.js JavaScript library into your document between the head tags.
  1. <script src="js/Chart.min.js"></script> 
     

I am using a minified version of chart.js. Add an <canvas> element with height, width, and unique id.

 

Example 1

 

In the first example we will create a Pie Chart using chart.js. For creating the pie chart, a variable array (named pieChartData) is declared that contains value and color properties. Set the values and color depending upon your chart.

 
 

Chart.js provides various options for changing the animation and look. You can change these options depending on your wishes.

 

For creating the chart, we must initialize the chart class and our canvas element and "2D" drawing context and call the pie method.

  1. <!Doctype HTML>  
  2. <html>  
  3. <head>  
  4.     <title>Pie Chart</title>  
  5.     <script src="js/Chart.min.js"></script>  
  6. </head>  
  7. <body>  
  8.     <canvas id="pieChartLoc" height="300" width="300"></canvas>  
  9.     <script>  
  10.         var pieChartData = [  
  11.         {  
  12.             value: 50,  
  13.             color: "lightblue"  
  14.         },  
  15.         {  
  16.             value: 10,  
  17.             color: "red"  
  18.         },  
  19.         {  
  20.             value: 40,  
  21.             color: "green"  
  22.         }  
  23.         ]  
  24.         var myLine = new Chart(document.getElementById("pieChartLoc").getContext("2d")).Pie(pieChartData);  
  25.     </script>  
  26. </body>  
  27. </html> 

Example 2: Creating the Doughnut Chart

 

A Doughnut chart looks much similar to a pie chart except they have the center cut out. Everything is similar to the above process except we need to call the doughnut method this time.

  1. <!Doctype HTML>  
  2. <html>  
  3. <head>  
  4.     <title>Doughnut Chart</title>  
  5.     <script src="js/Chart.min.js"></script>  
  6. </head>  
  7. <body>  
  8.     <canvas id="doughNutChartLoc" height="300" width="300"></canvas>  
  9.     <script>  
  10.         var DoughNutChartData = [  
  11.         {  
  12.             value: 50,  
  13.             color: "lightblue"  
  14.         },  
  15.         {  
  16.             value: 10,  
  17.             color: "red"  
  18.         },  
  19.         {  
  20.             value: 40,  
  21.             color: "green"  
  22.         }  
  23.         ]  
  24.         var myDoughnut = new Chart(document.getElementById("doughNutChartLoc").getContext("2d")).Doughnut(DoughNutChartData);  
  25.     </script>  
  26. </body>  
  27. </html> 

Preview

 
 

Example 3: Creating the Bar Chart

 

For creating the Bar Chart, we need two labels (displayed on the x-axis) and datasets (to contain information about fillColor, strokeColor and data that is basically the value on the y-axis).

 
 
  1. <!Doctype HTML>  
  2. <html>  
  3. <head>  
  4.     <title>Bar Chart</title>  
  5.     <script src="js/Chart.min.js"></script>  
  6. </head>  
  7. <body>  
  8.     <canvas id="barChartLoc" height="300" width="300"></canvas>  
  9.     <script>  
  10.         var barChartLocData = {  
  11.             labels: ["January", "Feburary", "March"],  
  12.             datasets: [{ fillColor: "lightblue", strokeColor: "blue", data: [15, 20, 35] }]  
  13.         };  
  14.         var mybarChartLoc = new Chart(document.getElementById("barChartLoc").getContext("2d")).Bar(barChartLocData);  
  15.     </script>  
  16. </body>  
  17. </html> 

I hope you like it. Thanks.


Similar Articles