Half Circle Chart Animation

Question

I created this graphic “half cake” 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 cannot do this.

Would anyone be so kind as to help?

Answer 1

As promised, I looked at it and made a good start for you with which you can work:

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 here in action - http://jsfiddle.net/ajthomascouk/hWt2v/

It uses a plugin called "jqueryrotate", here - http://code.google.com/p/jqueryrotate/

Hope this gives you a good starting point.

Al