Search code examples
javascriptcsscanvasprogress

multiple progress circle same page

Inspiring myself from this answer, I want to make several progress circle in my page (about 30). It works perfectly for one but I don't get the circle for the values. I however get the percentage displayed correctly.

I've tried various thing, adding [count] to most of the options but still the circle is not drawn for each cell.

I added my code in this Fiddle.

Can you see what's wrong?

Solution

  • Your drawCircle function needs a bit more information (ctx and radius)

    var drawCircle = function(ctx, radius, color, lineWidth, percent) {
    percent = Math.min(Math.max(0, percent || 1), 1);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
    ctx.strokeStyle = color;
    ctx.lineCap = 'round'; // butt, round or square
    ctx.lineWidth = lineWidth;
    ctx.stroke();
};

    and you need to pass it that info when using it:

    drawCircle(ctx[count], radius[count], '#efefef', options[count].lineWidth, 100 / 100);
drawCircle(ctx[count], radius[count], color[count], options[count].lineWidth, options[count].percent / 100);

    like here: https://fiddle.jshell.net/6ooL53pp/3/