How to make 2 figures overlap in raphael.js - raphael

Question

I'm completely new at raphael and never have been especially good working with canvas elements. I found a useful piechart but need to tweak it a little more to fit my needs.
This is what I have now : http://jsfiddle.net/El4a/sbxjfafx/4/
And this is the figure I want to achieve
The white circle I'm trying to draw on top of the piechart, appears underneath it instead. I honestly have no idea how to fix this, although I'm sure the solution won't be that difficult.
I can achieve this figure using manual positioning (which is a crappy way) with the following code:
var paper = Raphael(10, 50, 500, 500);
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
But obviously this won't scale with the piechart, and is easily ruined by inconvenient things like changing the window size.
I have tried putting that code inside a function and create it the same way the piechart gets created.
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
raphael("circle", 700, 700).circle(350, 350, 175, values, labels, "#fff");
But that leaves me with the result you can see in the fiddle.
Hope anyone can help!
Thanks in advance.

Answer 1

Make sure you don't create the canvas twice. So create it once, and then use that reference to create the new elements.
Also place the circle after the coloured one, so that it appears in front. This is all about the order of elements in the DOM.
eg jsfiddle
Relevant amended code.
var r = raphael("holder", 700, 700);
r.pieChart(350, 350, 200, values, labels, "#fff");
r.circle(350, 350, 175).attr({ fill: 'white' });