Draw an animated Pie Chart using jQuery and SVG

19 Jul

Svg (Scalable Vector Graphics) is a very handy language for describing two-dimensional vector graphics in XML. we draw svg graphics using jquery and svg.

In order to use jquery with svg we need jquery.svg.js file with jquery. here in the example we are using jquery-1.11.1.js and jquery.svg.js. both of files can be downloaded from the download link.

So now we are going to draw an amimated pie chart with svg and jquery. A pie chart is a circular chart divided into sectors and each sectors is devided according to percentage. here in this example we will only draw one sector of pie chart.

A pie chart is a circuler chart and each circle require a center point and radius. but with this code we can draw pie chart in both shapes ellipse and circular shape.

First we need to decide the x,y position in the screen that is the center point of our pie chart. so now we are taking two variables.

var center_x = 175;

var center_y = 175;

We can draw both type of shapes in our pie chart circular and ellipse. in circuler pie chart we need only one radius but in ellipse pie chart we need two radiuses. In this example we are taking two variables for radiuses (radius_x and radius_y).

We can set same values in both radius when we need to draw chart in circular shape

var radius_x = 150;

var radius_y = 60;

Now we need another variable which will fill the pie chart according to given percentage. Every circle contains 0 to 360 degree. so if we need to fill a circle with 60% then calculation will be like this.

var drawPercent = 60

var totalFilledDeg = 360/100 * drawPercent;

the totalFilledDeg is the value in degree that we should fill in the pie chart. here in this calculation we wil get 216 degree. it means we need to fill circle from 0 degree to 216 degree.

But an another question may be reaise in our mind is that it is not neccesary that always we fill the pie chart from 0 degree. what if we need to start filling from 90 degree or 110 degree. to solve this problem we have another paremeter startFromDegree.

var startFromDegree = 90;

This parameter decides the starting point of drawing.

below is the full code of pie chart animation.

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/jquery.svg.js"></script>
    <div id="svgpiechart" style="border:1px solid;width:400px;height:400px;"></div>
   jQuery(document).ready(function() {
        var center_x = 175;
        var center_y = 175;
        var radius_x = 150;
        var radius_y = 60;
        var drawPercent = 60
        var startFromDegree = 90;
    function draw_pie_chart(center_x,center_y,radius_x,radius_y,drawPercent,startFromDegree) {
        var obj  = jQuery("#svgpiechart");
        var svg = jQuery(obj).svg('get');
        var g = svg.group({stroke: '#d42026'});
        var draw_at_x = center_x;
        var draw_at_y = center_y;
        var x_Radius = radius_x;
        var y_Radius = radius_y;
        var totalDegD = 360/100 * drawPercent;
        var i = startFromDegree;
        var atTo = i + totalDegD;
        var timer = 0;
        var stop = 0;
        var method = function() {
        for(s = 0; s < 4; s++) {
          if(stop == 1) return;
          var d = i;
          var a = d * Math.PI / 180;
          var x = draw_at_x + x_Radius * Math.cos(a);
          var y = draw_at_y + y_Radius * Math.sin(a);
          svg.line(g, draw_at_x, draw_at_y, x, y, {strokeWidth: 5});

            i = i + 1;
            if(i >= atTo) {
                stop = 1;
  timer = window.setInterval(method,1);


Leave a Reply

Your email address will not be published. Required fields are marked *