0

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?

Community
  • 1
  • 1
remyremy
  • 3,548
  • 3
  • 39
  • 56

1 Answers1

1

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/

Winestone
  • 1,500
  • 9
  • 19