add border to the outer area of slice in pie

Question

How can I add border to the outer area of slice in pie? Please check my jsfiddle. I have implemented Polar Area Chart here. I need each border to be of different color which I can specify. For example refer to this image enter image description here

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

var center = {
x: 200,
y: 150
};
var myColor = ["#ccc", "#ccc", "#ccc", "#ccc", "#c01c3f"];
var myData = [20, 40, 50, 70, 100];
var myRadius = [150, 120, 80, 100, 70];
var myDistance = [5, 5, 2, 2, 2];
var myText = ['first', 'second', 'third', 'fourth', 'fifth'];

function getTotal(data) {
var myTotal = 0;
for (var j = 0; j < data.length; j++) {
    myTotal += (typeof data[j] == 'number') ? data[j] : 0;
}
return myTotal;
}

function plotData() {
var lastend = 0;
var myTotal = getTotal(myData);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
//ctx.strokeStyle = 'rgba(255,255,255,0.5)';
ctx.lineWidth = 1;
ctx.font="15px Arial";
for (var i = 0; i < myData.length; i++) {
    ctx.save();
    ctx.fillStyle = myColor[i];
    ctx.beginPath();
    ctx.translate(center.x, center.y);
    var thisAngle = (Math.PI * 2 * (myData[i] / myTotal));
    ctx.rotate(lastend + thisAngle / 2);
    ctx.translate(myDistance[i], 0);
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2, false);
    ctx.closePath();
    ctx.fill();
   // ctx.stroke();
    ctx.fillStyle = '#fff';
    ctx.translate(0.6 * myRadius[i], 0);
    ctx.rotate(-(lastend + thisAngle / 2));
    ctx.fillText(myText[i], 0, 0);
    ctx.restore();
    lastend += thisAngle;
}
}

plotData();

Thanks for all the help.

So you are building your solution step by step by asking questions on Stack Overflow. And you seem to understand very little of what you do. Ethically puzzling. (The other post is here : http://stackoverflow.com/questions/26210600/creating-polar-area-chart-using-canvas ) — GameAlchemist, Oct 13 '14 at 11:52
Yes the timeframe that I have been allotted is very less to understand these things. But I am trying my best to understand what I am doing. I am not completely blind in this. — Nits, Oct 13 '14 at 11:57

score 3 · Accepted Answer · answered Oct 13 '14 at 06:04

3

You need to do it in two steps, first fill the shape then stroke just an arc. To do so you need to use a beginPath() for the outer border after filling it so to not stroke the complete shape.

...
ctx.closePath();
ctx.fill();
// original code stops

// insert this code
ctx.beginPath();
ctx.strokeStyle = '#079';
ctx.lineWidth = 9;
ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2);
ctx.stroke();

// original code continues...
// ctx.stroke();
ctx.fillStyle = '#fff';
...

Updated fiddle

answered Oct 13 '14 at 06:04

Can you please look into this question? http://stackoverflow.com/questions/26210600/creating-polar-aread-chart-using-canvas – Nits Oct 13 '14 at 07:25
No its not solved completely but its closer to what I want. I still did not get the dynamic part completely. – Nits Oct 14 '14 at 03:52
@Nits ok, added a solution to that question. Hope that helps. – Oct 15 '14 at 22:55

score 0 · Answer 2 · answered Oct 13 '14 at 05:12

Use strokeStyle. JSFiddle

var lineColor = ["blue", "green", "purple", "pink", "aqua"];
for (var i = 0; i < myData.length; i++) {
    ............................
    ctx.strokeStyle = lineColor[i];
    ctx.fillStyle = myColor[i];
    ........
    .............
    ctx.fill();
    ctx.stroke();
    ......................
}

add border to the outer area of slice in pie

2 Answers2