https://www.innatrichmond.com/wp-content/plugins/designthemes-core-features/shortcodes/js/jquery.donutchart.js

1(function($) {
2
3  var defaultsettings = {
4    'bgColor' : '#ccc',
5    'fgColor' : 'red',
6    'size' : 160,
7    'donutwidth': 40,
8    'textsize': 16,
9  }
10  
11  var methods = {
12    init : function(options) {
13      
14      var initcanvas=true;
15      
16      if (typeof(options) == "object")
17      {
18        this.donutchartsettings = $.extend({}, defaultsettings, options);
19    
20        // autoscale donutwidth and textsize
21        if (options["size"] && !options["donutwidth"])
22          this.donutchartsettings["donutwidth"]=options["size"]/4;
23        if (options["size"] && !options["textsize"])
24          this.donutchartsettings["textsize"]=options["size"]/10;
25      }
26      else
27      {
28        if (typeof(this.donutchartsettings) == "object")
29          initcanvas=false;
30        else
31          this.donutchartsettings = defaultsettings;
32      }
33      
34      if (initcanvas)
35      {
36        $(this).css("position","relative");
37        $(this).css("width",this.donutchartsettings.size+"px");
38        $(this).css("height",this.donutchartsettings.size+"px");
39        $(this).html("<canvas width='"+this.donutchartsettings.size+"' height='"+this.donutchartsettings.size+"'></canvas><div class='donutchart-text' style='position:absolute;top:0;left:0;line-height:"+this.donutchartsettings.size+"px;text-align:center;width:"+this.donutchartsettings.size+"px;font-weight:bold;font-size:"+this.donutchartsettings.textsize+"px;font-weight:bold;'></div>");
40      
41        var canvas = $("canvas",this).get(0);
42      
43        // excanvas support
44        if (typeof(G_vmlCanvasManager) != "undefined")
45          G_vmlCanvasManager.initElement(canvas);
46      
47        var ctx = canvas.getContext('2d');
48        methods.drawBg.call(ctx, this.donutchartsettings);
49      }
50
51    },
52    
53    drawBg : function(settings) {
54      this.clearRect(0,0,settings.size,settings.size);
55      this.beginPath();
56      this.fillStyle = settings.bgColor;
57      this.arc(settings.size/2,settings.size/2,settings.size/2,0,2*Math.PI,false);
58      this.arc(settings.size/2,settings.size/2,settings.size/2-settings.donutwidth,0,2*Math.PI,true);
59      this.fill();
60    },
61    
62    drawFg : function(settings,percent) {
63      
64      var ratio = percent/100 * 360;
65      var startAngle = Math.PI*-90/180;
66      var endAngle = Math.PI*(-90+ratio)/180;
67
68      this.beginPath();
69      this.fillStyle = settings.fgColor;
70      this.arc(settings.size/2,settings.size/2,settings.size/2,startAngle,endAngle,false);
71      this.arc(settings.size/2,settings.size/2,settings.size/2-settings.donutwidth,endAngle,startAngle,true);
72      this.fill();
73    },
74  };
75  
76  $.fn.donutchart = function(method) {
77    return this.each(function() {
78      
79      methods.init.call(this, method);
80
81      if (method=="animate")
82      {
83        
84        var percentage = $(this).attr("data-percent");
85        var canvas = $(this).children("canvas").get(0);
86        var percenttext = $(this).children("div");
87        var dcs = this.donutchartsettings;
88
89        if (canvas.getContext)
90        {
91          var ctx = canvas.getContext('2d');
92          var j = 0;
93          
94          function animateDonutChart()
95          {
96            j++;
97
98            methods.drawBg.call(ctx,dcs);
99            methods.drawFg.apply(ctx,[dcs,j]);
100            percenttext.text(j+"%");
101
102            if (j >= percentage)
103              clearInterval(animationID);
104          }
105      
106          var animationID = setInterval(animateDonutChart,20); 
107        }
108      }
109    })
110  }
111})( jQuery );