Creating Pie Chart Using CSS3 and HTML

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 .

Graphs can be represented in two ways:

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>

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

img2
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

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,

  • Pie chart is an important tool used to represent statistical data,
  • Pie charts are useful as it is easy to represent and understand pictorial data,
  • Pie charts can be created dynamically using CSS, HTML, AJAX and Jquery.

If you are interested in receiving the future articles, please subscribe here. follow us on @twitter and @facebook.

Comments

comments

About Manisha Patil

Manisha S Patil, currently residing at Pune India. She is currently working as freelance writer for websites. She had earlier worked at Caritor Bangalore, TCS Bangalore and Sungard Pune. She has 5 years of experience in Java/J2EE technologies.

Speak Your Mind

*