0

I want to create a circle that shows percent whit its border length like a circular diagram but with border. Like Have you seen https://pasteboard.co/IeLnpWt.jpg

MJS
  • 54
  • 4

2 Answers2

3

you need svg in your html:

$(document).ready(function(){
 $('circle.circle').each(function () {
  var percent = Number($(this).data('value'));
  var r = parseFloat($(this).css('r'));
  var dasharray = parseFloat($(this).css('stroke-dasharray'));
  var offset = dasharray - ((Math.PI*2*r) * (percent/100));
  $(this).delay(1000).animate({strokeDashoffset: offset}, 1000);
 });
});
.wrapper {
 position: relative;
 width: 60px;
 height: 60px;
}
.bar {
 position: relative;
    transform: rotateZ(-90deg);
    width: 60px;
    height: 60px;
 z-index: 2;
}

.circle {
    cx: 50%;
    cy: 50%;
    r: 28px;
    fill: white;
    stroke: #0b65bf;
    stroke-width: 4px;
    stroke-dasharray: calc(3.14 * 56px);
    stroke-dashoffset: calc(3.14 * 56px);
}

.border {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #ddd;
 border-radius: 50%;
 z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="bar">
    <circle class="circle" data-value="45" />
</svg>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
LoneWolf
  • 78
  • 9
2

function draw(radius,lineWidth,col,startPerc, endPerc)
{
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var posx = radius + lineWidth;
    var posy = radius + lineWidth;
    var start = -Math.PI/2; // Top of circle (0 would be right side)

    context.lineWidth = lineWidth;
    context.strokeStyle = col;

    context.beginPath();
    context.arc(posx, posy, radius, start  + (2*Math.PI)*startPerc, start + (2*Math.PI)*endPerc);
    context.stroke();
}
draw(30,5,"#2976CD",0,.60);
draw(30,5,"#E0E6E7",.60,1);
<canvas style="border:1px solid gray;" id="imgCanvas" width="100" height="100" onclick="draw()"></canvas>
Jan
  • 2,178
  • 3
  • 14
  • 26
  • 1st googled similar question then started from this one https://stackoverflow.com/questions/20526488/drawing-a-filled-circle-in-a-canvas-on-mouseclick/20545418#20545418 Scale is a bit tricky - not sure hot to get exact size and also on Android there is often different scale. Btw, do not try to answer too much questions to repay your luck not being downvoted or blocked unless you want to end like me ;-( – Jan May 15 '19 at 07:37
  • 1
    Btw, rest informations found here https://www.w3schools.com/tags/ref_canvas.asp and https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes – Jan May 15 '19 at 07:47
  • In case you cannot use canvas, there is also a workaround to generate graphic from objects, but it would need a bit more math and resources - something like this http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm mentioned here https://stackoverflow.com/questions/14560302/html-line-drawing-without-canvas-just-js. – Jan May 15 '19 at 10:21