Animated Css Pie Chart And Percentage Counter On Page Load

In this article I will discuss how to create a pie chart using just CSS3. With the success of new technologies, we see that things that previously required external factors, being made directly with CSS and HTML. CSS3 is the latest standard for CSS. CSS3 coding is always backwards compatible, if you write an application with CSS3, it will also run in the CSS2. In this article we will see how to create pie charts using CSS3 .

CSS Z-Index example
New Features in CSS 3.0
Buy : HTML 5 and CSS3

Graphs can be represented in two ways:

Bar Chart (Bar Chart Using DOJO)
Pie chart (Pie Chart Using DOJO)

css3

Pie charts have become an essential means for representing the data to any audience. Graphical representation of data serves to introduce very few facts in front of any audience. There are many examples where pie charts are used and these charts show lot of meaning. Some of examples of pie charts are:

Representing the number of seats of each political group.
Representing the sales performance of each department in an organization.
Representing the marks obtained by a student in an exam.
Representing the number of users of a particular product in different geographical locations.

Pie charts can be created in the follwoing ways:

Cascading Style Sheets and HTML
Jquery and Ajax

Here I shall discuss only about creating Pie Chart using CSS and HTML.

Creating Pie Charts using CSS3

To draw a pie chart , the first thing we need to do is draw a circle. To create a circle border that adds just one radius value which is half a pixel width of a div. Below is the css code for creating the circle.

Code for creating CSS Circle

<html> <head> <style>      .pieContainer {           height: 100px;      }      .pieBackground {           background-color: gray;           position: absolute;           width: 100px;           height: 100px;           -Moz-border-radius: 50px;           -Webkit-border-radius: 50px;           -O-border-radius: 50px;           border-radius: 50px;           -Moz-box-shadow:-1px 1px 3px #000;           -Webkit-box-shadow:-1px 1px 3px #000;           -O-box-shadow:-1px 1px 3px #000;           box-shadow:-1px 1px 3px #s000;      } </style> </head> <body> <div class="pieContainer">     <div class="pieBackground"></div> </div> </body> </html>

The above code creates a basic circle. This can be used as background of the chart. Once the basic circle is created, we will then create a half circle using the clipping feature in order to hide the remaining half circle. This will create a slice. This slice would be exactly 50% of the circle. If you want a different size, you can change the size of the circle, by including it inside a div that controls rotation and uses an inner div to adjust the size.
Let's start the outer div to the first slice at 0 degrees, which is the default starting point. The following code creates a circle first and then creates a small section of this circle with a different color:

Creating a circle and then a short section on it

<!DOCTYPE html> <html>  <head>   <title>Pizza Graph  </title>  </head>   <body>   <style>      .pieContainer {           height: 100px;      }      .pieBackground {           background-color: gray;           position: absolute;           width: 100px;           height: 100px;           -moz-border-radius: 50px;           -webkit-border-radius: 50px;           -o-border-radius: 50px;           border-radius: 50px;           -moz-box-shadow:-1px 1px 3px #000;           -webkit-box-shadow:-1px 1px 3px #000;           -o-box-shadow:-1px 1px 3px #000;           box-shadow:-1px 1px 3px #000;      }      .pie {           position: absolute;           width: 100px;           height: 100px;           -Moz-border-radius: 50px;           -Webkit-border-radius: 50px;           -O-border-radius: 50px;           border-radius: 50px;           clip: rect (0px, 50px, 100px, 0px);      }      .hold {           position: absolute;           width: 100px;           height: 100px;           -moz-border-radius: 50px;           -webkit-border-radius: 50px;           -o-border-radius: 50px;           border-radius: 50px;           clip: rect (0px, 100px, 100px, 50px);      }      #pieSlice1 .pie {           background-color: #1b458b;           -webkit-transform:rotate(50deg);           -moz-transform:rotate(50deg);           -o-transform:rotate(50deg);           transform:rotate(50deg);      }  </style> <body> <div class="pieContainer">      <div class="pieBackground"></div>      <div id="pieSlice1" class="hold">         <div class="pie"> </div>     </div> </div>  </body> </html>

Since we are forced to create multiple slices , we just need to continue to add more equal slices with multiple colors. The following code shows how to create multiple slices in a circle:

Code to create multiple slices of the pie chart

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head>   <title> Pie </title>   <meta name="Generator" content="EditPlus">   <meta name="Author" content="">   <meta name="Keywords" content="">   <meta name="Description" content="">  </head>   <body> <style>     .pieContainer {           height: 100px;      }      .pieBackground {           background-color: grey;           position: absolute;           width: 100px;           height: 100px;           -moz-border-radius: 50px;           -webkit-border-radius: 50px;           -o-border-radius: 50px;           border-radius: 50px;           -moz-box-shadow: -1px 1px 3px #000;           -webkit-box-shadow: -1px 1px 3px #000;           -o-box-shadow: -1px 1px 3px #000;           box-shadow: -1px 1px 3px #000;      }      .pie {           position: absolute;           width: 100px;           height: 100px;           -moz-border-radius: 50px;           -webkit-border-radius: 50px;           -o-border-radius: 50px;           border-radius: 50px;           clip: rect(0px, 50px, 100px, 0px);      }      .hold {           position: absolute;           width: 100px;           height: 100px;           -moz-border-radius: 50px;           -webkit-border-radius: 50px;           -o-border-radius: 50px;           border-radius: 50px;           clip: rect(0px, 100px, 100px, 50px);      }       #pieSlice1 .pie {           background-color: #1b458b;           -webkit-transform:rotate(150deg);           -moz-transform:rotate(150deg);           -o-transform:rotate(150deg);           transform:rotate(150deg);      }      #pieSlice2 {           -webkit-transform:rotate(150deg);           -moz-transform:rotate(150deg);           -o-transform:rotate(150deg);           transform:rotate(150deg);      }      #pieSlice2 .pie {           background-color: #ccbb87;           -webkit-transform:rotate(40deg);           -moz-transform:rotate(40deg);           -o-transform:rotate(40deg);           transform:rotate(40deg);      }      #pieSlice3 {           -webkit-transform:rotate(190deg);           -moz-transform:rotate(190deg);           -o-transform:rotate(190deg);           transform:rotate(190deg);      }      #pieSlice3 .pie {           background-color: #cc0000;           -webkit-transform:rotate(70deg);           -moz-transform:rotate(70deg);           -o-transform:rotate(70deg);           transform:rotate(70deg);      }      #pieSlice4 {           -webkit-transform:rotate(260deg);           -moz-transform:rotate(260deg);           -o-transform:rotate(260deg);           transform:rotate(260deg);      }      #pieSlice4 .pie {           background-color: #cc00ff;           -webkit-transform:rotate(100deg);           -moz-transform:rotate(100deg);           -o-transform:rotate(100deg);           transform:rotate(100deg);      } </style>  <div class="pieContainer">      <div class="pieBackground"></div>      <div id="pieSlice1" class="hold"><div class="pie"></div></div>      <div id="pieSlice2" class="hold"><div class="pie"></div></div>      <div id="pieSlice3" class="hold"><div class="pie"></div></div>      <div id="pieSlice4" class="hold"><div class="pie"></div></div> </div>  </body> </html>

CSS3 Pie Chart

Summary

CSS Z-Index example
New Features in CSS 3.0
Buy : HTML 5 and CSS3

The use of graphics is very important when we want to generate a report for a client, or simply want to display certain information to the users of our website. To summarise what we have discussed,