| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- var EasyPieChart = function(el, opts) {
- var defaultOptions = {
- barColor: '#ef1e25',
- trackColor: '#f9f9f9',
- scaleColor: '#dfe0e0',
- scaleLength: 5,
- lineCap: 'round',
- lineWidth: 3,
- trackWidth: undefined,
- size: 110,
- rotate: 0,
- animate: {
- duration: 1000,
- enabled: true
- },
- easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
- t = t / (d/2);
- if (t < 1) {
- return c / 2 * t * t + b;
- }
- return -c/2 * ((--t)*(t-2) - 1) + b;
- },
- onStart: function(from, to) {
- return;
- },
- onStep: function(from, to, currentValue) {
- return;
- },
- onStop: function(from, to) {
- return;
- }
- };
- // detect present renderer
- if (typeof(CanvasRenderer) !== 'undefined') {
- defaultOptions.renderer = CanvasRenderer;
- } else if (typeof(SVGRenderer) !== 'undefined') {
- defaultOptions.renderer = SVGRenderer;
- } else {
- throw new Error('Please load either the SVG- or the CanvasRenderer');
- }
- var options = {};
- var currentValue = 0;
- /**
- * Initialize the plugin by creating the options object and initialize rendering
- */
- var init = function() {
- this.el = el;
- this.options = options;
- // merge user options into default options
- for (var i in defaultOptions) {
- if (defaultOptions.hasOwnProperty(i)) {
- options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
- if (typeof(options[i]) === 'function') {
- options[i] = options[i].bind(this);
- }
- }
- }
- // check for jQuery easing
- if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
- options.easing = jQuery.easing[options.easing];
- } else {
- options.easing = defaultOptions.easing;
- }
- // process earlier animate option to avoid bc breaks
- if (typeof(options.animate) === 'number') {
- options.animate = {
- duration: options.animate,
- enabled: true
- };
- }
- if (typeof(options.animate) === 'boolean' && !options.animate) {
- options.animate = {
- duration: 1000,
- enabled: options.animate
- };
- }
- // create renderer
- this.renderer = new options.renderer(el, options);
- // initial draw
- this.renderer.draw(currentValue);
- // initial update
- if (el.dataset && el.dataset.percent) {
- this.update(parseFloat(el.dataset.percent));
- } else if (el.getAttribute && el.getAttribute('data-percent')) {
- this.update(parseFloat(el.getAttribute('data-percent')));
- }
- }.bind(this);
- /**
- * Update the value of the chart
- * @param {number} newValue Number between 0 and 100
- * @return {object} Instance of the plugin for method chaining
- */
- this.update = function(newValue) {
- newValue = parseFloat(newValue);
- if (options.animate.enabled) {
- this.renderer.animate(currentValue, newValue);
- } else {
- this.renderer.draw(newValue);
- }
- currentValue = newValue;
- return this;
- }.bind(this);
- /**
- * Disable animation
- * @return {object} Instance of the plugin for method chaining
- */
- this.disableAnimation = function() {
- options.animate.enabled = false;
- return this;
- };
- /**
- * Enable animation
- * @return {object} Instance of the plugin for method chaining
- */
- this.enableAnimation = function() {
- options.animate.enabled = true;
- return this;
- };
- init();
- };
|