Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Pie Charts with CSS3

In this article we will talk about Pie charts and their creation using CSS3. We all know the usefulness of pie charts while representing statistical data.

Statistical data can be represented in two forms:

  • Bar chart.
  • Pie chart.

Either of these two formats are a good representation of data especially for the senior management. These become helpful in presenting some data to the audience as a pictorial representation is always better than any other formats of representation.

Introduction to Pie Chart

Pie charts have become essential way to represent data to any audience. Pictorial representation of data serves a lot while presenting some facts in front of any audience. There are many examples where pie charts are used and have a lot of meaning. Some of them are:

  • Representing the number of seats each political group is holding in the house of parliament.
  • Representing the sales performance of each department in an organization.
  • Representing the marks obtained by a student in an examination.
  • Representing the number of users for a particular product in different geographic locations.

In a web application pie charts can be created using:

Pie Charts using Cascading Style Sheets or CSS 3:

In order to draw a pie chart the first thing we need to do is to draw a circle. To create a circle we simply add a border radius which is half the pixel value of the width of a square div. We need to use browser specific tags. Here is how we create a circle:

Listing 1: CSS code to create a circle

<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;
     } 
</style>
<div id="pieContainer">
     <div class="pieBackground"></div>
</div>

The above code creates a basic circle which can be used as the background of the chart. Once the basic circle is created we then create a half circle by using the clipping feature in order to hide the remaining half circle. This will create a slice which is exactly 50 % of the circle. If want a different size, we need to change the size of this circle by dropping it inside a div which controls the rotation and uses an inner div to adjust the size. Let us start the outer div for 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 on it in a different color:

Listing 2: CSS code to create a circle and then a small section on it

<!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(50deg);
          -moz-transform:rotate(50deg);
          -o-transform:rotate(50deg);
          transform:rotate(50deg);
     }

</style>

<div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold">
		<div class="pie"></div>
	</div>
</div>
 </body>
</html>

If we are required to create multiple slices or large slices we just need to keep on adding more slices in same or multiple colors. The following code creates multiple slices on a circle:

Listing 3: CSS code to create multicolored slices

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

The above code creates four circles in four different colors.

Pie charts using HTML Java scripts:

We can also create pie charts using html JavaScript’s as under:

Listing 4: Creation of pie charts using HTML- JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Plot Pie Chart</title>
 
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 250px; height: 150px; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; left: 170px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
</style>
 
<script type="text/javascript" language="javascript" src="jquery.Plot.pie.min.js"></script>
 
<script type="text/javascript">
var data = [
    { label: "IE",  data: 19.5, color: "#457447"},
    { label: "Safari",  data: 4.5, color: "#80622B"},
    { label: "Firefox",  data: 36.6, color: "#AA7743"},
    { label: "Opera",  data: 2.3, color: "#3D77AE"},
    { label: "Chrome",  data: 36.3, color: "#890F4E"},
    { label: "Other",  data: 0.8, color: "#3D9E4E"}
];
 
$(document).ready(function () {
    $.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true
        }
    },
    legend: {
        labelBoxBorderColor: "none"
    }
});
});

</script>
</head>
 
<body>
<div id="placeholder"></div>
</body>
</html>

Conclusion:

In order to conclude this topic let us summarize what we have discussed above in the following bullets as under:

  • 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
    • Cascading Style Sheets or CSS
    • HTML or JavaScript
    • AJAX
    • JQuery


Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login