Task

We will create a pie chart for two teams namely, TeamA and TeamB and their score for 5 matches - match1, match2, ... match5.

Project structure

We will start with the following project structure.

Inside the css folder we will create a default.css file. This will contain the default stylesheet.

And inside the js folder we will create pie.js file. In this file we will be writing the code to create the pie graphs.

And inside the project folder we will create a pie.html file.

Now the project structure will look like the following.

There are some other files shown in the above image from my other tutorials.

pie.html

Copy the HTML structure from the index.html file and make sure you have the jQuery and ChartJS javascript files included.

Now in the head include the default.css file that we created and saved in the css folder.

Inside the body create a div and give it a class chart-container. Inside this we create two divs having class .pie-chart-container. And inside each of these divs create a canvas and give them respective id pie-chartcanvas-1 and pie-chartcanvas-2.

And lastly before closing of the body tag include the pie.js javascript file that we created inside the js folder.

default.css

In the above code we are setting the width, height and margin of the .chart-container class and for the .pie-chart-container we are setting the width and height to 360px and placing them side-by-side by setting float to left.

JavaScript

To draw the pie chart we will write some javascript.

Canvas

First we will get the two canvas using their respective ids pie-chartcanvas-1 and pie-chartcanvas-2 by writing the following code.