display percentage arc in javascript

Question

how to display percentage the form a circle or arc in JavaScript. I want to display the black color circumference in percentage. Say If I input max value 20 and min value 10, it should display 50% of a circle (arc) How to do it?.

<!DOCTYPE html>
<html>
    <body>

    //displays circle with dimensions 
    <svg height="300" width="300">
        <circle cx="150" cy="100" r="90" stroke="brown" stroke-width="10" fill="white"/>
    </svg>
    <br/><br/>

    maxValue: <input type="text" value="" id="value1" /><br/>
    minValue: <input type="text" value="" id="value2" /><br/>
    <input type="button" value="Stroke-percentage" onclick="" />
    stroke-percentage = maxValue/minValue * 100
    </body>
</html>

check [this](https://codepen.io/JMChristensen/pen/Ablch) – Durga Sep 20 '17 at 08:45 — Durga, Sep 20 '17 at 08:45

score 1 · Answer 1 · answered Sep 20 '17 at 09:03

Santho's answer is correct for SVG, but i would like to mention HTML5's Canvas element as an alternative:

/**
 * arcPercentage
 *
 * @param {{ radius?: number, rate?: number, color?: string }} parameters
 * @returns
 */
function arcPercentage(parameters) {
  var radius = (parameters.radius !== void 0 ? parameters.radius : 100);
  var rate = (parameters.rate !== void 0 ? parameters.rate : 1);
  var color = (parameters.color !== void 0 ? parameters.color : "rgba(255,0,0,1)");
  var c = document.createElement("canvas");
  var size = c.width = c.height = radius * 2;
  var ctx = c.getContext("2d");
  if (rate == 0) {
    return c;
  }
  ctx.fillStyle = color;
  ctx.beginPath();
  //Start in origo
  ctx.arc(radius, radius, 0, 0, 0);
  //Move to start position
  ctx.arc(radius, radius, radius, 0, 0);
  //Arc to percentage
  ctx.arc(radius, radius, radius, 0, (Math.PI * 2) * rate);
  //move to origo
  ctx.arc(radius, radius, 0, (Math.PI * 2) * rate, (Math.PI * 2) * rate);
  ctx.fill();
  ctx.closePath();
  return c;
}

//TEST
//Get nodes
var inputNode = document.getElementById("circle-input");
var imageNode = document.getElementById("circle-image");
//Bind event
inputNode.onchange = inputNode.onkeyup = inputNode.onmouseup = function() {
  //Only fire if valid input
  if (inputNode.validity.valid) {
    //Parse value
    var value = parseInt(inputNode.value, 10) / 100;
    //Draw the arc
    imageNode.src = arcPercentage({
      color: "blue",
      radius: 100,
      rate: value
    }).toDataURL();
  }
};

<input id="circle-input" min="0" max="100" type="number" value="0">
<br/>
<img id="circle-image">

score 0 · Answer 2 · answered Sep 20 '17 at 08:44

HTML code:

 <!DOCTYPE html>
    <html>
    <body>
     <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle>
       <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle>
     </svg>

     Value: <input type="text" value="" id="value1" /><br/>
     <input type="button" value="Stroke-percentage" id="generateProgress" />
    </body>
    </html>

Jquery script:

$('#generateProgress').on('click', function(){
  var val = parseInt($('#value1').val());
  var $circle = $('#svg #bar');

  if (isNaN(val)) {
     val = 100; 
  }
  else{
    var r = $circle.attr('r');
    var c = Math.PI*(r*2);
    if (val < 0) { val = 0;}
       if (val > 100) { val = 100;}
          var pct = ((100-val)/100)*c;
          $circle.css({ strokeDashoffset: pct});
          $('#cont').attr('data-pct',val);
     } 
});

Thanks... but I don't want to use any library. Can it be done in plain javascript — Krithika, Sep 20 '17 at 09:06

score 0 · Answer 3 · answered Sep 20 '17 at 09:36

HTML code:

 <!DOCTYPE html>
    <html>
    <body>
     <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle>
       <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle>
     </svg>

     Value: <input type="text" value="" id="value1" /><br/>
     <input type="button" value="Stroke-percentage" onclick="generateProgress()" />
    </body>
    </html>

Jquery script:

$('#generateProgress').on('click', function(){
  var val = parseInt($('#value1').val());
  var $circle = $('#svg #bar');

  if (isNaN(val)) {
     val = 100; 
  }
  else{
    var r = $circle.attr('r');
    var c = Math.PI*(r*2);
    if (val < 0) { val = 0;}
       if (val > 100) { val = 100;}
          var pct = ((100-val)/100)*c;
          $circle.css({ strokeDashoffset: pct});
          $('#cont').attr('data-pct',val);
     } 
});

Javascript code:

 var value = document.getElementById("value1");
 function generateProgress() {
   var val = parseInt(value);
   var circle = document.getElementById('bar');

   if (isNaN(val)) {
      val = 100; 
   }
   else{
    var r = circle.getAttribute('r');
    var c = Math.PI*(r*2);
    if (val < 0) { val = 0;}
       if (val > 100) { val = 100;}
          var pct = ((100-val)/100)*c;
          circle.style.strokeDashoffset = pct;
     } 

 }

display percentage arc in javascript

3 Answers3