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.
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 a <canvas> element with height, width and unique id.
Example 1In 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 depanding 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 ChartA Doughnut chart looks much similar to a pie chart except they have the centre 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 ChartFor 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.