https://julianofamilydental.com/wp-content/themes/health/js/jquery.easypiechart.js?ver=3.3

1/**!
2 * easyPieChart
3 * Lightweight plugin to render simple, animated and retina optimized pie charts
4 *
5 * @license 
6 * @author Robert Fleischmann <[email protected]> (http://robert-fleischmann.de)
7 * @version 2.1.5
8 **/
9
10(function(root, factory) {
11	
12	 "use strict";
13	 
14    if(typeof exports === 'object') {
15        module.exports = factory(require('jquery'));
16    }
17    else if(typeof define === 'function' && define.amd) {
18        define(['jquery'], factory);
19    }
20    else {
21        factory(root.jQuery);
22    }
23}(this, function($) {
24
25/**
26 * Renderer to render the chart on a canvas object
27 * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
28 * @param {object}     options options object of the plugin
29 */
30var CanvasRenderer = function(el, options) {
31	var cachedBackground;
32	var canvas = document.createElement('canvas');
33
34	el.appendChild(canvas);
35
36	if (typeof(G_vmlCanvasManager) !== 'undefined') {
37		G_vmlCanvasManager.initElement(canvas);
38	}
39
40	var ctx = canvas.getContext('2d');
41
42	canvas.width = canvas.height = options.size;
43
44	// canvas on retina devices
45	var scaleBy = 1;
46	if (window.devicePixelRatio > 1) {
47		scaleBy = window.devicePixelRatio;
48		canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
49		canvas.width = canvas.height = options.size * scaleBy;
50		ctx.scale(scaleBy, scaleBy);
51	}
52
53	// move 0,0 coordinates to the center
54	ctx.translate(options.size / 2, options.size / 2);
55
56	// rotate canvas -90deg
57	ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
58
59	var radius = (options.size - options.lineWidth) / 2;
60	if (options.scaleColor && options.scaleLength) {
61		radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
62	}
63
64	// IE polyfill for Date
65	Date.now = Date.now || function() {
66		return +(new Date());
67	};
68
69	/**
70	 * Draw a circle around the center of the canvas
71	 * @param {strong} color     Valid CSS color string
72	 * @param {number} lineWidth Width of the line in px
73	 * @param {number} percent   Percentage to draw (float between -1 and 1)
74	 */
75	var drawCircle = function(color, lineWidth, percent) {
76		percent = Math.min(Math.max(-1, percent || 0), 1);
77		var isNegative = percent <= 0 ? true : false;
78
79		ctx.beginPath();
80		ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
81
82		ctx.strokeStyle = color;
83		ctx.lineWidth = lineWidth;
84
85		ctx.stroke();
86	};
87
88	/**
89	 * Draw the scale of the chart
90	 */
91	var drawScale = function() {
92		var offset;
93		var length;
94
95		ctx.lineWidth = 1;
96		ctx.fillStyle = options.scaleColor;
97
98		ctx.save();
99		for (var i = 24; i > 0; --i) {
100			if (i % 6 === 0) {
101				length = options.scaleLength;
102				offset = 0;
103			} else {
104				length = options.scaleLength * 0.6;
105				offset = options.scaleLength - length;
106			}
107			ctx.fillRect(-options.size/2 + offset, 0, length, 1);
108			ctx.rotate(Math.PI / 12);
109		}
110		ctx.restore();
111	};
112
113	/**
114	 * Request animation frame wrapper with polyfill
115	 * @return {function} Request animation frame method or timeout fallback
116	 */
117	var reqAnimationFrame = (function() {
118		return  window.requestAnimationFrame ||
119				window.webkitRequestAnimationFrame ||
120				window.mozRequestAnimationFrame ||
121				function(callback) {
122					window.setTimeout(callback, 1000 / 60);
123				};
124	}());
125
126	/**
127	 * Draw the background of the plugin including the scale and the track
128	 */
129	var drawBackground = function() {
130		if(options.scaleColor) drawScale();
131		if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
132	};
133
134  /**
135    * Canvas accessor
136   */
137  this.getCanvas = function() {
138    return canvas;
139  };
140  
141  /**
142    * Canvas 2D context 'ctx' accessor
143   */
144  this.getCtx = function() {
145    return ctx;
146  };
147
148	/**
149	 * Clear the complete canvas
150	 */
151	this.clear = function() {
152		ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
153	};
154
155	/**
156	 * Draw the complete chart
157	 * @param {number} percent Percent shown by the chart between -100 and 100
158	 */
159	this.draw = function(percent) {
160		// do we need to render a background
161		if (!!options.scaleColor || !!options.trackColor) {
162			// getImageData and putImageData are supported
163			if (ctx.getImageData && ctx.putImageData) {

164				if (!cachedBackground) {
165					drawBackground();
166					cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
167				} else {
168					ctx.putImageData(cachedBackground, 0, 0);
169				}
170			} else {
171				this.clear();
172				drawBackground();
173			}
174		} else {
175			this.clear();
176		}
177
178		ctx.lineCap = options.lineCap;
179
180		// if barcolor is a function execute it and pass the percent as a value
181		var color;
182		if (typeof(options.barColor) === 'function') {
183			color = options.barColor(percent);
184		} else {
185			color = options.barColor;
186		}
187
188		// draw bar
189		drawCircle(color, options.lineWidth, percent / 100);
190	}.bind(this);
191
192	/**
193	 * Animate from some percent to some other percentage
194	 * @param {number} from Starting percentage
195	 * @param {number} to   Final percentage
196	 */
197	this.animate = function(from, to) {
198		var startTime = Date.now();
199		options.onStart(from, to);
200		var animation = function() {
201			var process = Math.min(Date.now() - startTime, options.animate.duration);
202			var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
203			this.draw(currentValue);
204			options.onStep(from, to, currentValue);
205			if (process >= options.animate.duration) {
206				options.onStop(from, to);
207			} else {
208				reqAnimationFrame(animation);
209			}
210		}.bind(this);
211
212		reqAnimationFrame(animation);
213	}.bind(this);
214};
215
216var EasyPieChart = function(el, opts) {
217	var defaultOptions = {
218		barColor: '#ef1e25',
219		trackColor: '#f9f9f9',
220		scaleColor: '#dfe0e0',
221		scaleLength: 5,
222		lineCap: 'round',
223		lineWidth: 3,
224		size: 110,
225		rotate: 0,
226		animate: {
227			duration: 1000,
228			enabled: true
229		},
230		easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
231			t = t / (d/2);
232			if (t < 1) {
233				return c / 2 * t * t + b;
234			}
235			return -c/2 * ((--t)*(t-2) - 1) + b;
236		},
237		onStart: function(from, to) {
238			return;
239		},
240		onStep: function(from, to, currentValue) {
241			return;
242		},
243		onStop: function(from, to) {
244			return;
245		}
246	};
247
248	// detect present renderer
249	if (typeof(CanvasRenderer) !== 'undefined') {
250		defaultOptions.renderer = CanvasRenderer;
251	} else if (typeof(SVGRenderer) !== 'undefined') {
252		defaultOptions.renderer = SVGRenderer;
253	} else {
254		throw new Error('Please load either the SVG- or the CanvasRenderer');
255	}
256
257	var options = {};
258	var currentValue = 0;
259
260	/**
261	 * Initialize the plugin by creating the options object and initialize rendering
262	 */
263	var init = function() {
264		this.el = el;
265		this.options = options;
266
267		// merge user options into default options
268		for (var i in defaultOptions) {
269			if (defaultOptions.hasOwnProperty(i)) {
270				options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
271				if (typeof(options[i]) === 'function') {
272					options[i] = options[i].bind(this);
273				}
274			}
275		}
276
277		// check for jQuery easing
278		if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
279			options.easing = jQuery.easing[options.easing];
280		} else {
281			options.easing = defaultOptions.easing;
282		}
283
284		// process earlier animate option to avoid bc breaks
285		if (typeof(options.animate) === 'number') {
286			options.animate = {
287				duration: options.animate,
288				enabled: true
289			};
290		}
291
292		if (typeof(options.animate) === 'boolean' && !options.animate) {
293			options.animate = {
294				duration: 1000,
295				enabled: options.animate
296			};
297		}
298
299		// create renderer
300		this.renderer = new options.renderer(el, options);
301
302		// initial draw
303		this.renderer.draw(currentValue);
304
305		// initial update
306		if (el.dataset && el.dataset.percent) {
307			this.update(parseFloat(el.dataset.percent));
308		} else if (el.getAttribute && el.getAttribute('data-percent')) {
309			this.update(parseFloat(el.getAttribute('data-percent')));
310		}
311	}.bind(this);
312
313	/**
314	 * Update the value of the chart
315	 * @param  {number} newValue Number between 0 and 100
316	 * @return {object}          Instance of the plugin for method chaining
317	 */
318	this.update = function(newValue) {
319		newValue = parseFloat(newValue);
320		if (options.animate.enabled) {
321			this.renderer.animate(currentValue, newValue);
322		} else {
323			this.renderer.draw(newValue);
324		}
325		currentValue = newValue;
326		return this;
327	}.bind(this);
328
329	/**
330	 * Disable animation
331	 * @return {object} Instance of the plugin for method chaining
332	 */
333	this.disableAnimation = function() {
334		options.animate.enabled = false;
335		return this;
336	};
337
338	/**
339	 * Enable animation
340	 * @return {object} Instance of the plugin for method chaining
341	 */
342	this.enableAnimation = function() {
343		options.animate.enabled = true;
344		return this;
345	};
346
347	init();
348};
349
350$.fn.easyPieChart = function(options) {
351	return this.each(function() {
352		var instanceOptions;
353
354		if (!$.data(this, 'easyPieChart')) {
355			instanceOptions = $.extend({}, options, $(this).data());
356			$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
357		}
358	});
359};
360
361
362}));