Building an animated pie chart in jQuery

Published on February 18, 2015

Building an animated pie chart in jQuery

Original author: Jake Rocheleau
  • Transfer
  • Tutorial
Forms are a good way to add some zest to the elements on your web page. Circles are especially good in this regard because they are holistic, simple, and pie-like. Now seriously, who doesn't like pies?



Demo - Source Code

As you must have noticed from your many years of experience using the Internet, most of the elements on web pages, in fact, are either squares or rectangles. Therefore, in some cases, interesting elements such as circles and triangles in your design can be very useful. This tutorial will demonstrate how to build an animated pie chart similar to the ones you usually see on portfolio sites. This can help visually emphasize your skills, as well as demonstrate what tasks you can handle. Take a look at the demo to see the final result.

So, let's begin!


When writing this tutorial, I will work with Circliful . This is a free open source jQuery plugin. You can download the main file from Github . It includes a .js file along with the corresponding CSS style sheet. The page must contain both in order to achieve the effect of a circle.

<pre lang="PHP" line="1"><!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Animated Circle Stats - Template Monster Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css">
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.circliful.min.js"></script>
</head>
</pre>


My page contains a similar styles.css stylesheet for my personal CSS styles. You also need to make a copy of the jQuery library . It is necessary for the plugin to work correctly.
By itself, the page is fairly easy to structure. Circle elements are contained in div tags that use HTML5 attributes to manipulate data. Alternatively, they can be stored in the jQuery function, but if you want to control each element better, then it’s easier to work in HTML.

<pre lang="PHP" line="1"><div id="stats" class="clearfix">
  <div class="wrap">
  <div class="row">
    <div class="circle-container">
      <h3>Photoshop</h3>
      <div class="circlestat" data-dimension="200" data-text="55%" data-width="30" data-fontsize="38" data-percent="55" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
    </div>
        <div class="circle-container">
      <h3>Illustrator</h3>
      <div class="circlestat" data-dimension="200" data-text="75%" data-width="30" data-fontsize="38" data-percent="75" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
    </div>
        <div class="circle-container">
      <h3>After Effects</h3>
      <div class="circlestat" data-dimension="200" data-text="35%" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
    </div>
  </div><!-- @end .row -->
</pre>


This is a copy of the first row of circles, consisting of 3 animated units. All these data attributes are further explained in the plugin documentation . Each presents an option that defines an animated effect. Below is a brief description of the options that I use:

  • data-dimension - total circle size width / height;
  • data-text - the text that appears in the center of each circle;
  • data-width - thickness of a rotating data arc;
  • data-fontsize - the font size of the text in the center;
  • data-percent - a number from 0-100 that displays the percentages in your circle;
  • data-fgcolor - circle foreground color;
  • data-bgcolor - background color of the circle;
  • data-fill - inner fill of the background color of the inner circle.


CSS page layout


I do not insist that you directly edit jquery.circliful.css , of course if you do not want to customize the plugin. Most of the colors can be changed directly from the HTML5 data attributes, and if you really want to rewrite any of the Circliful styles , I would recommend that you do this in your own stylesheet.
Having told you this, I created my own stylesheet for this project, and not to rewrite Circliful styles . The web page itself needs a default layout, which is really easy to design. The content area is centered in a small section for a pie chart. Each area moves freely in the row container within the original#stats div .

<pre lang="PHP" line="1">/** page structure **/
.wrap {
  display: block;
  margin: 0 auto;
  max-width: 800px;
}
#intro {
  display: block;
  margin-bottom: 25px;
  text-align: center;
}
#intro p {
  font-size: 1.8em;
  line-height: 1.35em;
  color: #616161;
  font-style: italic;
  margin-bottom: 25px;
}
#stats {
  display: block;
  width: 100%;
  padding: 15px 0;
  background: #f8f8f8;
  border-top: 4px solid #c3c3c3;
  border-bottom: 4px solid #c3c3c3;
}
#stats .row {
  display: block;
}
.circle-container {
  display: block;
  float: left;
  margin-right: 55px;
  margin-bottom: 45px;
}
.circle-container h3 {
  display: block;
  text-align: center;
  font-size: 2.25em;
  line-height: 1.4em;
  color: #363636;
  text-shadow: 1px 1px 0 #fff;
}
</pre>


Inside each section, the content is held within the .wrap div to be fixed in the center. Also, freely moving circle elements require an additional .clearfix container to ensure that everything remains correctly aligned.

<pre lang="PHP" line="1">/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
</pre>


This clearfix class has been known for years as a container solution with freely moving elements. Usually they are removed from the text of the document and do not retain the value of their original width / height. But this keeps the #stats container constant and leaves room for more content, which will be located lower on the page.

Finishing touches


So, we knead the dough, fill the baking tray for the pie, put it in the oven and are almost ready to take the sample. If everything looks good enough, then what will be the final step? We need some jQuery code to decorate this project.
Open a new tag script at the bottom of this HTML page. It will contain a small snippet of JavaScript. Since I used all the HTML5 data attributes, we do not need to call any jQuery options. The script just needs to run the Circliful function on each circle of divs. Using a duplicate class name, such as .circlestat, makes the process very simple.

<pre lang="PHP" line="1">$(function(){
  $('.circlestat').circliful();
});
</pre>


For those not familiar with the jQuery syntax, I will provide a short description. After the document is loaded, we launch a new function. Our internal goal is every element that uses the .circlestat class and runs the circliful () function . This brings the Circliful plugin , which creates animated effects, to action and applies additional content / colors.

I can’t say that these circles will always be the best solution. I saw many portfolios that were based on words and numbers, but not on work as such. Consider using these circles on rare occasions and try to borrow them for other purposes beyond simple skills. Your statistics do not have to be measured as a percentage - they can show how many years you have been in business, the total number of your projects or other similar figures. You can download a copy of my guide for free and experiment with the code to make it better suited to your projects.