Web Project
ChartJS is a wonderful javascript code that you can use in your project to create awesome charts quickly and quite easily. In this tutorial we will be learning to create a Pie chart using ChartJS. For this project we will need the following resource.
Using ChartJS 1.x Download
Download ChartJS and jQuery from their website. If you have already download them then move to the next step.
Create a project folder on your desktop or at a location of your choice. Name the project folder. For instance, I have named it chartjs. Next copy the ChartJS and jQuery javascript files into the chartjs folder. Finally open this folder in your favourite text editor or IDE.
Now its time for us to create an index.html page inside the project folder. Since this is going to be a simple project so I will be putting the HTML code and javascript code in the index.html file. For bigger project it is always recommended to separate the html code, javascript code and style code into separate files so that the project code is manageable.
Alright then, time to write some code. Inside the index.html file create the basic structure of an html file and include the ChartJS and jQuery javascript files that you downloaded earlier.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie Chart</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="Chart.js"></script>
</head>
<body>
</body>
</html>
Now inside the body tag we create a canvas and give it an id my canvas and setting the width and height to 256.
<canvas id="mycanvas" width="256" height=“256">
Next we will write the javascript code that will do the drawing for us using the Pie chart data we provide. Note! In this tutorial I have hard coded the values, but in real life scenario you may fetch the data from some other file or database and render the chart accordingly.
<script>
$(document).ready(function(){
//some code goes here…
});
</script>
The above code tells to run the javascript only after the page has loaded.
Next, we get the canvas using the canvas id we assigned earlier. For this write the following code.
var ctx = $(“#mycanvas").get(0).getContext("2d");
Now we write the pie chart data.
var data = [
{
value: 270,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Corn Flower Blue"
},
{
value: 50,
color: "lightgreen",
highlight: "yellowgreen",
label: "Lightgreen"
},
{
value: 40,
color: "orange",
highlight: "darkorange",
label: "Orange"
}
];
The above code tells us that we have three sectors having values 270, 50 and 40 respectively. We have set the color of the sectors to cornflowerblue, yellow green and darkorange. The highlight tells us that when the user will move the mouse over the sectors its will be highlighted and the assigned color will be used. Finally we have labeled the sectors as "Corn Flower Blue", "Lightgreen" and "Orange".
Now its time to draw the pie chart on the canvas. For this we will write the last piece of code.
var piechart = new Chart(ctx).Pie(data);
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie Chart</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="Chart.js"></script>
</head>
<body>
<canvas id="mycanvas" width="256" height="256">
<script>
$(document).ready(function(){
var ctx = $("#mycanvas").get(0).getContext("2d");
//pie chart data
//sum of values = 360
var data = [
{
value: 270,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Corn Flower Blue"
},
{
value: 50,
color: "lightgreen",
highlight: "yellowgreen",
label: "Lightgreen"
},
{
value: 40,
color: "orange",
highlight: "darkorange",
label: "Orange"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
});
</script>
</body>
</html>
You can get the code from
ADVERTISEMENT