CODEWITHSUNDEEP
javascriptsvgraphaelpie-chartslice
Decagrog
Decagrog

Reputation: 97

Raphael JS Pie: rotate the slice

I trying to create a sort of rounded carousel with 4 slices, by clicking on a slice it will expand to about 2/3 of the pie showing it's content (the other slice will equally shrink) Basically I started with the raphael "growing pie" demo http://raphaeljs.com/growing-pie.html and modified a bit to obtain this kind of behavior.

But I'm stuck with the last step, when a slice is clicked and expanded it should rotate and place on top ( an offset angle of 0°)...I think I need to know the exact angle of every slice in the animation() function and arbitrary change it but I can't figure how to do it.

function animate(ms) {
var start = 150,
    val;
for (i = 0; i <= 3; i++) {

    val = 360 / total * data[i];

    paths[i].animate({
        segment: [200, 200, 150, start, start += val]
    }, ms || 1500, "bounce");
    paths[i].angle = start - val / 2;
}

rotateCircle();

}

Here http://jsfiddle.net/ExFCb/32/ there's the example I'm actually working on

Upvotes: 2

Views: 1112

Answers (1)

namero999
namero999

Reputation: 3002

Take a look at the update fiddle http://jsfiddle.net/ExFCb/72/

Basically you have to set the correct rerotate variable at each cycle.

if (i === 0) {
    data = [240, 40, 40, 40];
    rerotate = 0;
}

And so on...

Upvotes: 1

Related Questions