function drawDonutChart(element, percent, width, height,c1, c2,name)
{

    var duration   = 2000;

    var  color = d3.scale.ordinal()
           .range([c1,c2]);

    var dataset = {
          lower: calcPercent(0),
          upper: calcPercent(percent)
        },
        radius = Math.min(width, height) / 2,
        pie = d3.layout.pie().sort(null),
        format = d3.format(".0%");

    var arc = d3.svg.arc()
          .innerRadius(radius - radius/4)
          .outerRadius(radius);

    var svg = d3.select(element).append("svg")
          .attr("id",name)
          .attr("width", width+5)
          .attr("height", height+5)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    var path = svg.selectAll("path")
          .data(pie(dataset.lower))
          .enter().append("path")
          .attr("fill", function(d,i) { return color(d+i); })
          .attr("d", arc)
          .each(function(d) { this._current = d; }); // store the initial values

    var text = svg.append("text")
          .attr("text-anchor", "middle")
          .attr("dy", ".35em")
         .attr("fill", function(d) { return color(d); })
          .attr("font-size", 40)
          .attr("font-weight",900);


      var progress = 0;
      var timeout = setTimeout(function () {
        clearTimeout(timeout);
        path = path.data(pie(dataset.upper)); // update the data
        path.transition().duration(duration).attrTween("d", function (a) {

          var i  = d3.interpolate(this._current, a);
          var i2 = d3.interpolate(progress, percent);
          this._current = i(0);
          return function(t) {
            text.text( format(i2(t) / 100) );
            return arc(i(t));
          };
        }); // redraw the arcs
      }, 200);
    }