Pointing arrow on precise location on donut chart

Question

I am trying to point to certain parts on a donut chart. The chart is divided into 9 parts.

comArray is the main array which contain all parts. angleArray is the angles in degrees for each part. useArray contains the parts that should be located through the pointer.

My code is working for sometime but then it starts locating on some different point. For example, if pointer needs to point to 3 it locates properly but after 1 hour it will start locating on the 6 part for 3 part.

What I am doing wrong? You can check the working example here: https://bishttech.com/newtest/

$(document).ready(function() {
  var comArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // main array of all parts
  var angleArray = [20, 60, 100, 140, 180, 220, 260, 300, 340]; // angle in degrees for all parts
  var useArray = [3, 6, 8, 2]; // pointer should stop on these parts

  //console.log(areacount);
  var canvas = document.getElementById("chart");
  var ctx = canvas.getContext("2d");

  function drawMultiRadiantCircle(xc, yc, r, radientColors) {
    var partLength = (2 * Math.PI) / radientColors.length;
    var start = 0;
    var gradient = null;
    var startColor = null,
      endColor = null;
    var startAngle = 0;
    
    for (var i = 0; i < radientColors.length; i++) {
      startColor = radientColors[i];
      //  endColor = radientColors[(i + 1) % radientColors.length];
      endColor = adjust(startColor, -30);
      // x start / end of the next arc to draw
      var xStart = xc + Math.cos(start) * r;
      var xEnd = xc + Math.cos(start + partLength) * r;
      // y start / end of the next arc to draw
      var yStart = yc + Math.sin(start) * r;
      var yEnd = yc + Math.sin(start + partLength) * r;

      ctx.beginPath();

      gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
      gradient.addColorStop(0, endColor);
      gradient.addColorStop(0.5, startColor);
      gradient.addColorStop(1.0, endColor);

      ctx.strokeStyle = gradient;
      ctx.arc(xc, yc, r, start, start + partLength);
      ctx.lineWidth = 30;
      ctx.stroke();
      ctx.closePath();
      start += partLength;
      startAngle = partLength;
    }
  }
  
  var someColors = ["#fb4168", "#4efb7f", "#fbf672", "#63e0fb", "#5b5bfb", "#f079fb", "#e0dffb", "#1aa3fb", "#1aa3fb"];
  drawMultiRadiantCircle(300, 300, 200, someColors);

  // get location of value
  function getCurLoc(value) {
    for (var i = 0; i < comArray.length; i++) {
      if (value == comArray[i]) {
        return i;
        break;
      }
    }
  }

  var startingPnt = 0;
  var curangleDegrees = 0;
  var prevangleDegrees = 0;
  var prevLoc = 0;
  var curLoc = 0;
  var rotateNum = 0;
  var diffLoc = 0;
  //function for displaying data on chart
  
  function displayData() {
    var maxPnt = useArray.length - 1;
    var currentValue = useArray[startingPnt];
    var getLoc = getCurLoc(currentValue); // getting location of value in comArray

    if (rotateNum == 0) {
      curangleDegrees = angleArray[getLoc];
      curLoc = getLoc;
    } else {
      curLoc = getLoc;
      diffLoc = curLoc - prevLoc;
      curangleDegrees = (diffLoc * 40);
    }

    $(".img").rotate(curangleDegrees, {
      easing: 'easeInExpo'
    });
    
    console.log(getLoc);
    
    if (startingPnt == maxPnt) {
      startingPnt = 0;
    } else {
      startingPnt++;
    }

    prevLoc = curLoc;
    prevangleDegrees = curangleDegrees;
    rotateNum++;
  }

  setInterval(function() {
    displayData();

  }, 10000);

  function adjust(color, amount) {
    return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
  }
});

.img {
  margin: 48px 52px;
  position: absolute;
  z-index: 1;
}

#container {
  width: 50%;
  display: block;
  margin: 0 auto;
  position: relative;
}

#chart {
  position: relative;
  z-index: 20;
}

Pointing arrow on precise location on donut chart

0 Answers