Animate half pie diagram

Question

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?

Answer 1

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