JavaScript and CSS Pie chart

This started off as an experiment with a combination JQuery and WordPress custom fields. The idea was to total up the distances of all the walks on my other site, a walking blog and make something a bit more interesting than a simple table.

An obvious choice would be to use the new HTML5 canvas element however there's a great plugin which allows elements to be rotated rather than using the Mozilla/Web-kit CSS rules.it uses a combination of images layered on top of each other to mask, and display the animation.

The Image

An image sprite to create a pie chart

The HTML

 
<div id="walkDistanceFrame">
<div id="walkDistanceMask"></div>
<div id="walkArrowLine" style="display: block; -moz-transform: rotate(6.98421deg);"></div>
<div id="walkArrowLineMask"></div>
<div style="display: none;" id="walkArrowLine2"></div>
<div id="walkArrow"></div>
<h3 title="click me..." id="walkDistance">131.73
<span>miles</span></h3>
 
<a href="/about/#distance">Explain?</a>
</div>
 

The Javascript

 
$(document).ready(function() {
   $('#walkDistance').click(function(){animateHowFar();});
   animateHowFar();
});
 var randValue = -1;
 
function animateHowFar(){
   var animTime = 2000;
   var calcDistance = 0;
   var myLocations = ['far around the moon',
   'far along the M25',
   'far along the thames',
   'many marathons',
   'far round an olympic swimming pool',
   'far from Lands End to John o\'Groats' ];
 
   var myDistances = [6790,176,215,26.2, 0.093,874];
   var myImages    = ['a','b','c','d','e','f'];
   randValue = randValue + 1;
   if(randValue >= myLocations.length){
      randValue = 0;
   }
   var target = myDistances[randValue];
   var remainder = 0;
   var circuits = 0;
 
if(!runningAnim) {
  runningAnim = true;
  $('#walkAroundLoc').html(myLocations[randValue]);
  $('#walkArrowLine').hide();
  $('#walkArrowLine2').hide();
  $('#walkCircuits').hide();
 
  if(target < walkDistance){
  	remainder = (walkDistance % target);
  	circuits = ((walkDistance) / target).toFixed(2);
  	calcDistance = remainder;
  	$('#walkCircuits').html('<strong>Circuits:</strong> '+circuits).show();
  } else {
  	calcDistance = walkDistance;
  }
 
  var deg = ((calcDistance/target)*360);
  var walkPercentage = (calcDistance/target);
 
  var time1 = (animTime/deg) * 180;
  var time2 = (animTime/deg) * (deg - 180);
 
   $('#walkArrow').transform({rotate: 0});
   $('#walkArrowLine').transform({rotate: 0});
   $('#walkArrowLine2').transform({rotate: 0}); 
 
   $('#walkArrow').animate({rotate: deg+'deg'},animTime, 'easeOutBounce',function(){
   if(deg <= 180){
	   $('#walkArrowLine').transform({rotate: deg+"deg"}).show();
	    runningAnim = false;
   } else {
   	   $('#walkArrowLine').transform({rotate: "180deg"}).show();
   	   $('#walkArrowLine2').transform({rotate: (deg-180)+"deg"}).show();
	   runningAnim = false;
   }
   });
  }
}
 

A working demo can be seen on the homepage of MudWetandBeers.com.