Draw Charts in HTML Using Chart js

Anoop Kumar Sharma

4y126.1k8100Article

Chart.jscanvas chartchart javascriptHTML chart.js

8 Comments

Join the conversation! Your thoughts help the community grow.

Bharath Radhekrishna Chennu10y ago
Followed same but unable to see chart. Plz help
- Anoop Kumar Sharma10y ago
  bharath krishna you are doing something wrong that's why you are not able see the chart. I suggest you to download Example file and compare your code with that file. Hope this will help you.
Jayendra Mistry12y ago
thanks but i have doubt that how to attch this chart dynamicaly with sql stored procedure or query & get data using javascript
Gopi Chand12y ago
Very good article...
- Anoop Kumar Sharma12y ago
  Thanks :-)
Mahesh Chand12y ago
Great Anoop. I can see we using Chart.js on C# Corner My Account.
- Anoop Kumar Sharma12y ago
  Thanks Mahesh Sir for your valuable comment. As per my knowledge C# Corner is using Google Charts in C# Corner My Account.
- Ano Mepani7y ago
  Yeah true its google charts

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.

<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.

<!Doctype HTML>
<html>
<head>
<title>Pie Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="pieChartLoc" height="300" width="300"></canvas>
<script>
var pieChartData = [
{
value: 50,
color: "lightblue"
},
{
value: 10,
color: "red"
},
{
value: 40,
color: "green"
}
]
var myLine = new Chart(document.getElementById("pieChartLoc").getContext("2d")).Pie(pieChartData);
</script>
</body>
</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.

<!Doctype HTML>
<html>
<head>
<title>Doughnut Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="doughNutChartLoc" height="300" width="300"></canvas>
<script>
var DoughNutChartData = [
{
value: 50,
color: "lightblue"
},
{
value: 10,
color: "red"
},
{
value: 40,
color: "green"
}
]
var myDoughnut = new Chart(document.getElementById("doughNutChartLoc").getContext("2d")).Doughnut(DoughNutChartData);
</script>
</body>
</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).

<!Doctype HTML>
<html>
<head>
<title>Bar Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="barChartLoc" height="300" width="300"></canvas>
<script>
var barChartLocData = {
labels: ["January", "Feburary", "March"],
datasets: [{ fillColor: "lightblue", strokeColor: "blue", data: [15, 20, 35] }]
};
var mybarChartLoc = new Chart(document.getElementById("barChartLoc").getContext("2d")).Bar(barChartLocData);
</script>
</body>
</html>

I hope you like it. Thanks.