Hello;

We are using easypiechart in our html page and this easypiechart is a JavaScript file that is included in the page using <script>src="js/easypiechart.js"</script>, the problem that I am facing that if values are changed, we need to re-draw the circle of the easypiechart without refresh the page, so I am not able to know how to do this. So I appreciate if possible to help.

This easypiechart was obtained from template from this link: https://mediatool.com/

By the way, I am able to change the values of the easypiechart, I can do this using the following:

var x = 5000;
   $("#easypiechart-red .count").html(x);
   $("#easypiechart-red").attr("data-count",x);

But I do not know which method to called to re-draw the circle of the easypiechart.
Below are the scripts that are used:

 <div class="easypiechart" id="easypiechart-red" data-percent="900" ><span class="percent">900</span></div>
And below is the easypiechart.js code (I know it is long, but I have to add it): 

to render simple, animated and retina optimized pie charts
 *
 * @license 
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.1.5
 **/
 
(function(root, factory) {
    if(typeof exports === 'object') {
        module.exports = factory(require('jquery'));
    }
    else if(typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else {
        factory(root.jQuery);
    }
}(this, function($) {
 
/**
 * Renderer to render the chart on a canvas object
 * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
 * @param {object}     options options object of the plugin
 */
var CanvasRenderer = function(el, options) {
    var cachedBackground;
    var canvas = document.createElement('canvas');
 
    el.appendChild(canvas);
 
    if (typeof(G_vmlCanvasManager) !== 'undefined') {
        G_vmlCanvasManager.initElement(canvas);
    }
 
    var ctx = canvas.getContext('2d');
 
    canvas.width = canvas.height = options.size;
 
    // canvas on retina devices
    var scaleBy = 1;
    if (window.devicePixelRatio > 1) {
        scaleBy = window.devicePixelRatio;
        canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
        canvas.width = canvas.height = options.size * scaleBy;
        ctx.scale(scaleBy, scaleBy);
    }
 
    // move 0,0 coordinates to the center
    ctx.translate(options.size / 2, options.size / 2);
 
    // rotate canvas -90deg
    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
 
    var radius = (options.size - options.lineWidth) / 2;
    if (options.scaleColor && options.scaleLength) {
        radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
    }
 
    // IE polyfill for Date
    Date.now = Date.now || function() {
        return +(new Date());
    };
 
    /**
     * Draw a circle around the center of the canvas
     * @param {strong} color     Valid CSS color string
     * @param {number} lineWidth Width of the line in px
     * @param {number} percent   Percentage to draw (float between -1 and 1)
     */
    var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(-1, percent || 0), 1);
        var isNegative = percent <= 0 ? true : false;
 
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
 
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth;
 
        ctx.stroke();
    };
 
    /**
     * Draw the scale of the chart
     */
    var drawScale = function() {
        var offset;
        var length;
 
        ctx.lineWidth = 1;
        ctx.fillStyle = options.scaleColor;
 
        ctx.save();
        for (var i = 24; i > 0; --i) {
            if (i % 6 === 0) {
                length = options.scaleLength;
                offset = 0;
            } else {
                length = options.scaleLength * 0.6;
                offset = options.scaleLength - length;
            }
            ctx.fillRect(-options.size/2 + offset, 0, length, 1);
            ctx.rotate(Math.PI / 12);
        }
        ctx.restore();
    };
 
    /**
     * Request animation frame wrapper with polyfill
     * @return {function} Request animation frame method or timeout fallback
     */
    var reqAnimationFrame = (function() {
        return  window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    }());
 
    /**
     * Draw the background of the plugin including the scale and the track
     */
    var drawBackground = function() {
        if(options.scaleColor) drawScale();
        if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
    };
 
  /**
    * Canvas accessor
   */
  this.getCanvas = function() {
    return canvas;
  };
   

  /**
    * Canvas 2D context 'ctx' accessor
   */
  this.getCtx = function() {
    return ctx;
  };
 
    /**
     * Clear the complete canvas
     */
    this.clear = function() {
        ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
    };
 
    /**
     * Draw the complete chart
     * @param {number} percent Percent shown by the chart between -100 and 100
     */
    this.draw = function(percent) {
        // do we need to render a background
        if (!!options.scaleColor || !!options.trackColor) {
            // getImageData and putImageData are supported
            if (ctx.getImageData && ctx.putImageData) {
                if (!cachedBackground) {
                    drawBackground();
                    cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
                } else {
                    ctx.putImageData(cachedBackground, 0, 0);
                }
            } else {
                this.clear();
                drawBackground();
            }
        } else {
            this.clear();
        }
 
        ctx.lineCap = options.lineCap;
 
        // if barcolor is a function execute it and pass the percent as a value
        var color;
        if (typeof(options.barColor) === 'function') {
            color = options.barColor(percent);
        } else {
            color = options.barColor;
        }
 
        // draw bar
        drawCircle(color, options.lineWidth, percent / 10000);
    }.bind(this);
 
    /**
     * Animate from some percent to some other percentage
     * @param {number} from Starting percentage
     * @param {number} to   Final percentage
     */
    this.animate = function(from, to) {
        var startTime = Date.now();
        options.onStart(from, to);
        var animation = function() {
            var process = Math.min(Date.now() - startTime, options.animate.duration);
            var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
            this.draw(currentValue);
            options.onStep(from, to, currentValue);
            if (process >= options.animate.duration) {
                options.onStop(from, to);
            } else {
                reqAnimationFrame(animation);
            }
        }.bind(this);
 
        reqAnimationFrame(animation);
    }.bind(this);
};
 
var EasyPieChart = function(el, opts) {
    var defaultOptions = {
        barColor: '#ef1e25',
        trackColor:'#969696',
        scaleColor: '#dfe0e0',
        scaleLength: 5,
        lineCap: 'round',
        lineWidth: 15,
        size: 150,
        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();
};
 
$.fn.easyPieChart = function(options) {
    return this.each(function() {
        var instanceOptions;
 
    if (!$.data(this, 'easyPieChart')) {
        instanceOptions = $.extend({}, options, $(this).data());
        $.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));

Regards
Bilal

Edited by site staff: Inserted code tags [code]your code here[/code]