Here is what the more than 840 readers who answered that survey question said.
// Run the code when the DOM is ready $( pieChart );
function pieChart() {
// Config settings var chartSizePercent = 80; // The chart radius relative to the canvas width/height (in percent) var sliceBorderWidth = 1; // Width (in pixels) of the border around each slice var sliceBorderStyle = "#fff"; // Colour of the border around each slice var sliceGradientColour = "#ddd"; // Colour to use for one end of the chart gradient var maxPullOutDistance = 25; // How far, in pixels, to pull slices out when clicked var pullOutFrameStep = 4; // How many pixels to move a slice with each animation frame var pullOutFrameInterval = 40; // How long (in ms) between each animation frame var pullOutLabelPadding = 65; // Padding between pulled-out slice and its label var pullOutLabelFont = "bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif"; // Pull-out slice label font var pullOutValueFont = "bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif"; // Pull-out slice value font var pullOutValuePrefix = ""; // Pull-out slice value prefix var pullOutShadowColour = "rgba( 0, 0, 0, .5 )"; // Colour to use for the pull-out slice shadow var pullOutShadowOffsetX = 5; // X-offset (in pixels) of the pull-out slice shadow var pullOutShadowOffsetY = 5; // Y-offset (in pixels) of the pull-out slice shadow var pullOutShadowBlur = 5; // How much to blur the pull-out slice shadow var pullOutBorderWidth = 2; // Width (in pixels) of the pull-out slice border var pullOutBorderStyle = "#fff"; // Colour of the pull-out slice border var chartStartAngle = -.5 * Math.PI; // Start the chart at 12 o'clock instead of 3 o'clock
// Declare some variables for the chart var canvas; // The canvas element in the page var currentPullOutSlice = -1; // The slice currently pulled out (-1 = no slice) var currentPullOutDistance = 0; // How many pixels the pulled-out slice is currently pulled out in the animation var animationId = 0; // Tracks the interval ID for the animation created by setInterval() var chartData = []; // Chart data (labels, values, and angles) var chartColours = []; // Chart colours (pulled from the HTML table) var totalValue = 0; // Total of all the values in the chart var canvasWidth; // Width of the canvas, in pixels var canvasHeight; // Height of the canvas, in pixels var centreX; // X-coordinate of centre of the canvas/chart var centreY; // Y-coordinate of centre of the canvas/chart var chartRadius; // Radius of the pie chart, in pixels
// Set things up and draw the chart init();
/** * Set up the chart data and colours, as well as the chart and table click handlers, * and draw the initial pie chart */
function init() {
// Get the canvas element in the page canvas = document.getElementById('chart');
// Exit if the browser isn't canvas-capable if ( typeof canvas.getContext === 'undefined' ) return;
// Initialise some properties of the canvas and chart canvasWidth = canvas.width; canvasHeight = canvas.height; centreX = canvasWidth / 2; centreY = canvasHeight / 2; chartRadius = Math.min( canvasWidth, canvasHeight ) / 2 * ( chartSizePercent / 100 );
// Grab the data from the table, // and assign click handlers to the table data cells
var currentRow = -1; var currentCell = 0;
$('#chartData td').each( function() { currentCell++; if ( currentCell % 2 != 0 ) { currentRow++; chartData[currentRow] = []; chartData[currentRow]['label'] = $(this).text(); } else { var value = parseFloat($(this).text()); totalValue += value; value = value.toFixed(2); chartData[currentRow]['value'] = value; }
// Store the slice index in this cell, and attach a click handler to it $(this).data( 'slice', currentRow ); $(this).click( handleTableClick );
// Extract and store the cell colour if ( rgb = $(this).css('color').match( /rgb((d+), (d+), (d+)/) ) { chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ]; } else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/) ) { chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ]; } else { alert( "Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'" ); return; }
} );
// Now compute and store the start and end angles of each slice in the chart data
var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)
for ( var slice in chartData ) { chartData[slice]['startAngle'] = 2 * Math.PI * currentPos; chartData[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) ); currentPos += chartData[slice]['value'] / totalValue; }
// All ready! Now draw the pie chart, and add the click handler to it drawChart(); $('#chart').click ( handleChartClick ); }
/** * Process mouse clicks in the chart area. * * If a slice was clicked, toggle it in or out. * If the user clicked outside the pie, push any slices back in. * * @param Event The click event */
function handleChartClick ( clickEvent ) {
// Get the mouse cursor position at the time of the click, relative to the canvas var mouseX = clickEvent.pageX - this.offsetLeft; var mouseY = clickEvent.pageY - this.offsetTop;
// Was the click inside the pie chart? var xFromCentre = mouseX - centreX; var yFromCentre = mouseY - centreY; var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ), 2 ) + Math.pow( Math.abs( yFromCentre ), 2 ) );
if ( distanceFromCentre <= chartRadius ) { // Yes, the click was inside the chart. // Find the slice that was clicked by comparing angles relative to the chart centre. var clickAngle = Math.atan2( yFromCentre, xFromCentre ) - chartStartAngle; if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle; for ( var slice in chartData ) { if ( clickAngle >= chartData[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ) { // Slice found. Pull it out or push it in, as required. toggleSlice ( slice ); return; } } } // User must have clicked outside the pie. Push any pulled-out slice back in. pushIn(); } /** * Process mouse clicks in the table area. * * Retrieve the slice number from the jQuery data stored in the * clicked table cell, then toggle the slice * * @param Event The click event */ function handleTableClick ( clickEvent ) { var slice = $(this).data('slice'); toggleSlice ( slice ); } /** * Push a slice in or out. * * If it's already pulled out, push it in. Otherwise, pull it out. * * @param Number The slice index (between 0 and the number of slices - 1) */ function toggleSlice ( slice ) { if ( slice == currentPullOutSlice ) { pushIn(); } else { startPullOut ( slice ); } } /** * Start pulling a slice out from the pie. * * @param Number The slice index (between 0 and the number of slices - 1) */ function startPullOut ( slice ) { // Exit if we're already pulling out this slice if ( currentPullOutSlice == slice ) return; // Record the slice that we're pulling out, clear any previous animation, then start the animation currentPullOutSlice = slice; currentPullOutDistance = 0; clearInterval( animationId ); animationId = setInterval( function() { animatePullOut( slice ); }, pullOutFrameInterval ); // Highlight the corresponding row in the key table $('#chartData td').removeClass('highlight'); var labelCell = $('#chartData td:eq(' + (slice*2) + ')'); var valueCell = $('#chartData td:eq(' + (slice*2+1) + ')'); labelCell.addClass('highlight'); valueCell.addClass('highlight'); } /** * Draw a frame of the pull-out animation. * * @param Number The index of the slice being pulled out */ function animatePullOut ( slice ) { // Pull the slice out some more currentPullOutDistance += pullOutFrameStep; // If we've pulled it right out, stop animating if ( currentPullOutDistance >= maxPullOutDistance ) { clearInterval( animationId ); return; }
// Draw the frame drawChart(); }
/** * Push any pulled-out slice back in. * * Resets the animation variables and redraws the chart. * Also un-highlights all rows in the table. */
function pushIn() { currentPullOutSlice = -1; currentPullOutDistance = 0; clearInterval( animationId ); drawChart(); $('#chartData td').removeClass('highlight'); }
/** * Draw the chart. * * Loop through each slice of the pie, and draw it. */
function drawChart() {
// Get a drawing context var context = canvas.getContext('2d');
// Clear the canvas, ready for the new frame context.clearRect ( 0, 0, canvasWidth, canvasHeight );
// Draw each slice of the chart, skipping the pull-out slice (if any) for ( var slice in chartData ) { if ( slice != currentPullOutSlice ) drawSlice( context, slice ); }
// If there's a pull-out slice in effect, draw it. // (We draw the pull-out slice last so its drop shadow doesn't get painted over.) if ( currentPullOutSlice != -1 ) drawSlice( context, currentPullOutSlice ); }
/** * Draw an individual slice in the chart. * * @param Context A canvas context to draw on * @param Number The index of the slice to draw */
function drawSlice ( context, slice ) {
// Compute the adjusted start and end angles for the slice var startAngle = chartData[slice]['startAngle'] + chartStartAngle; var endAngle = chartData[slice]['endAngle'] + chartStartAngle;
if ( slice == currentPullOutSlice ) {
// We're pulling (or have pulled) this slice out. // Offset it from the pie centre, draw the text label, // and add a drop shadow.
var midAngle = (startAngle + endAngle) / 2; var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance, .8 ); startX = centreX + Math.cos(midAngle) * actualPullOutDistance; startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
} else {
// This slice isn't pulled out, so draw it from the pie centre startX = centreX; startY = centreY; }
// Set up the gradient fill for the slice var sliceGradient = context.createLinearGradient( 0, 0, canvasWidth*.75, canvasHeight*.75 ); sliceGradient.addColorStop( 0, sliceGradientColour ); sliceGradient.addColorStop( 1, 'rgb(' + chartColours[slice].join(',') + ')' );
// Draw the slice context.beginPath(); context.moveTo( startX, startY ); context.arc( startX, startY, chartRadius, startAngle, endAngle, false ); context.lineTo( startX, startY ); context.closePath(); context.fillStyle = sliceGradient; context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour : "rgba( 0, 0, 0, 0 )"; context.fill(); context.shadowColor = "rgba( 0, 0, 0, 0 )";
// Style the slice border appropriately if ( slice == currentPullOutSlice ) { context.lineWidth = pullOutBorderWidth; context.strokeStyle = pullOutBorderStyle; } else { context.lineWidth = sliceBorderWidth; context.strokeStyle = sliceBorderStyle; }
// Draw the slice border context.stroke(); }
/** * Easing function. * * A bit hacky but it seems to work! (Note to self: Re-read my school maths books sometime) * * @param Number The ratio of the current distance travelled to the maximum distance * @param Number The power (higher numbers = more gradual easing) * @return Number The new ratio */
function easeOut( ratio, power ) { return ( Math.pow ( 1 - ratio, power ) + 1 ); }
};
Click a wedge in the pie chart for details
Somewhat Important | 41% |
Very Important | 31% |
Just One of Sveral Factors | 21% |
Not Important | 7% |