CODEWITHSUNDEEP
jqueryanimationhighcharts
user709789
user709789

Reputation: 71

Animate half pie diagram

I created this graphic "half pie" in Flash: http://www.elperiodico.com/es/elecciones-28n/
Now I ported it to JavaScript: http://especiales.elperiodico.com/LABS/ELEC2011B/html/emi-basic2.htm

I would like the JavaScript "half pie" to use the same animation from left to right as the Flash version, but can't do it.

Would someone be so kind as to help?

Upvotes: 7

Views: 1595

Answers (1)

Alex
Alex

Reputation: 9041

As promised i've had a look at this and have made a good start for you that you can work with:

html

<div id="graph"><img src="http://ajthomas.co.uk/back.png"></div>

css

#graph{
    background:transparent url(http://ajthomas.co.uk/graph.png) no-repeat top left; 
    height:125px; 
    width:290px; 
    overflow:hidden;
}

jquery

$("img").rotate({ 
   bind: 
     { 
        click : function() { 
            $(this).rotate({animateTo:180})
        }
     }   
});

See it in action here - http://jsfiddle.net/ajthomascouk/hWt2v/

It uses a plugin called 'jqueryrotate' check it out here - http://code.google.com/p/jqueryrotate/

Hope this gives you a good starting point.

Al

Upvotes: 2

Related Questions