markup

<canvas width="500px" height="250px"></canvas>

javascript

$(document).ready(function() {
 
    var context = $("canvas")[0].getContext("2d");

        var values = '24,43,43,45';
        var segments = values.split(",");
        var segmentColor = 50;
        var total = 0;
        
        //Reset the canvas
        context.restore();
        context.save();
        context.clearRect(0,0,500,250);
    
        for (i=0;i<segments.length;i++) {
            total = total + parseFloat(segments[i]);
        }

        var parts = 360/total;
        var startAngle=0
        
        context.translate(100,100)
        context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock
        
        for (i=0;i<segments.length;i++) {

            //Draw the segments
            context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")";
            context.beginPath();
            context.moveTo(0,0);
            context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false);
            context.lineTo(0,0);
            context.closePath();
            context.fill();
            
            startAngle = startAngle + parseFloat(segments[i]*parts);
            segmentColor = segmentColor + 20;   
        }
            
            //Turn into a donut!!                   
            context.fillStyle = "White";
            context.beginPath();
            context.arc(0,0,60,0,Math.PI*2,false);
            context.closePath();
            context.fill();                 

        
});

Notice: var values = '24,43,43,45'; // This will basicall divide the circle into 4 parts Demo: http://jsfiddle.net/Zgfb6/