0

I'm trying to make a data visualization through a circular diagram. The data is being pulled out of my database and in to an associative array. The Object keys in this case are addresses and the values are numbers (how many times they exist in my database). This is the short version of my code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var s = 0;

//var t = total sum of values
var l = Object.keys(arr);
for (var i=0;i<l.length;i++){
    var e = Object.values(arr)[i]/t;
    var perc = 2*Math.PI*e;

    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
    ctx.arc(canvas.width/2,canvas.height/2,canvas.height/2,s,s + perc,false);
    ctx.lineTo(canvas.width/2,canvas.height/2);
    ctx.stroke();
    s += perc;
}

This is the current result:

picture

As you can see it's not a round circle as it's supposed to be. I hope someone can help me.

UPDATE

So the strangest thing happened. Apparently there is a difference between the height and width on the canvas set by css and those who's set by javascript. I just gave my canvas canvas.width=400 and canvas.height=400 in javascript and deleted my css height=400px and width=400px. All of a sudden the circle is how it's supposed to be. Very, very strange.

almcd
  • 1,069
  • 2
  • 16
  • 29
  • The argument for arc are `(x,y,radius,startAngle,endAngle,[direction])` to make a full circle `startAngle = 0` and `endAngle = Math.PI * 2` not direction is an optional argument. For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc – Blindman67 Oct 19 '16 at 17:50
  • What are your canvas.height and canvas.width? Is css modifying the canvas size? – R. Schifini Oct 19 '16 at 23:08
  • The only css I have for the canvas are width: 400px and height: 400px. When I halve my height to 200px the circle is how it's supposed to be. So there has to be something wrong with my calculations but I can't figure out what. –  Oct 20 '16 at 09:50

0 Answers0