CODEWITHSUNDEEP
javascriptanimationraphaelpie-chart
Mujtaba Haider
Mujtaba Haider

Reputation: 1650

RaphaelJs Pie Chart Animation on Hover

i am customizing the pie chart given on the raphael site below link http://raphaeljs.com/pie.html

this chart shows animation when hover a slice, this animation simply expand the slice a little

what i want is to separate the slice from the chart

i played with the transform property of following lines of code but could not make it as i want.

p.mouseover(function () {
var xis= p.getBBox(true);
p.stop().animate({transform: "s1.1 1.1 "+ cx + " " + cy }, ms, "linear");
txt.stop().animate({opacity: 1}, ms, "linear");
}).mouseout(function () {
p.stop().animate({transform: ""}, ms, "linear");
txt.stop().animate({opacity: 0}, ms);
});

Changing the line 3's cx and cy actually fixed the animation for every slice in the same manner, that is, on hover every slice will change the position constantly.

http://imageshack.us/photo/my-images/690/sliced1.png

anyone please help me out to solve this problem

Upvotes: 0

Views: 2707

Answers (2)

Ash Blue
Ash Blue

Reputation: 5582

You should probably be using .hover which is built into Raphael. See documentation here: http://raphaeljs.com/reference.html#Element.hover

Working off of Oli's example I was able to figure out most of the basic animation principles. Not being a math guru there were a lot of gaps to fill in for the example. Here is a fully functioning version (tested). Enjoy!

pie.hover(function () {
    // Stop all existing animation
    this.sector.stop();

    // Collect/Create variables
    var rad = Math.PI / 180;
    var distance = 50; // Amount in pixels to push graph segment out
    var popangle = this.sector.mangle; // Pull angle right out of segment object
    var ms = 300; // Time in milliseconds

    // Setup shift variables to move pie segments
    var xShiftTo = distance*Math.cos(-popangle * rad);
    var yShiftTo = distance*Math.sin(-popangle * rad);

    this.sector.animate({transform: "t" + xShiftTo + " " + yShiftTo}, ms, "linear");
}, function () {
    // Passing an empty transform property animates the segment back to its default location
    this.sector.animate({ transform: '' }, ms, "linear");
});

Upvotes: 1

oli
oli

Reputation: 3551

If I understand your question correctly, you want the slice to completely disconnect from the pie chart when somebody hovers over it.

To do this, you want to translate the segment, which allows you to move an SVG object in a given direction, toward x, y co-ordinates. I'm no SVG pro, so I'd suggest taking a look into the full functionality of this yourself; regardless, to do these types of operations with Raphael, you can use the Element.transform, or can provide transform values in an animate call.

The second of these is what is happening in the example you provided, except a scale transformation is being used, as indicated by the leading s in transform: "s1.1 1.1.. A scale will make the object bigger.

Here, you want to use a translation which moves the object but doesn't make it bigger - it uses a t.

Here is a slightly edited block of code that will do this:

        p.mouseover(function () {
            var distance = 20;
            var xShiftTo = distance*Math.cos(-popangle * rad);
            var yShiftTo = distance*Math.sin(-popangle * rad);
            p.stop().animate({transform: "t" + xShiftTo + " " + yShiftTo}, ms, "bounce");
            txt.stop().animate({opacity: 1}, ms, "bounce");
        }).mouseout(function () {
            p.stop().animate({transform: ""}, ms, "bounce");
            txt.stop().animate({opacity: 0}, ms);
        });

In the example, distance refers to how far the slice should move away (so feel free to adjust this), xShiftTo and yShiftTo calculate the x, y values that the object should shift by, relative to where they currently are. Note that this is a little complicated - you need to figure out the x, y values at a given angle away from the pie centre. The positioning of the text also does something like this, so I just took the required maths from there. Also, I just left the bounce animation, but you can change that to linear or whatever you want. Hope that helps.

Upvotes: 1

Related Questions