HTML5 Canvas Charts

<!--
any better fix,email me [email protected]
-->
<html>
<head>
<title>Circluar Chart</title>
</head>
<body>


<canvas id="canvas" width="400" height="400"></canvas>
<canvas id="canvas2"    width="200" height="200"></canvas>

<script>
function    drawChart(canvasID,array)
{
    var i,sum=0;
    for(i=0;i<array.length;i++)
        sum+=array[i];
    var canvas = document.getElementById(canvasID);
    var context = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = Math.min(centerX,centerY);
    var startingAngle,endingAngle;
    var lastAngle = 0;
    var counterclockwise = false;
    //anything better than black!
    oldColor="#000000";
    array.sort();
    // Draw the 1s with bigger area first
    for(i=array.length-1;i>=0;i--)
    {
        context.beginPath();
        startingAngle=lastAngle;
        endingAngle=startingAngle+Math.PI*2*array[i]/sum;
        context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
        context.closePath();
        //pick a different random color ,other than the last 1
        while(context.fillStyle==oldColor)
            context.fillStyle="#"+(Math.floor(Math.random()*parseInt("FFFFFF",16))).toString(16).toUpperCase();
        oldColor=context.fillStyle;
            context.fill();
        context.beginPath(); // begin custom shape
        context.moveTo(centerX, centerY);
        context.lineTo(centerX+Math.cos(startingAngle)*radius ,centerY+Math.sin(startingAngle)*radius);
        context.lineTo(centerX+Math.cos(endingAngle)*radius ,centerY+Math.sin(endingAngle)*radius);
        context.lineTo(centerX,centerY);
        context.closePath();
        context.fill();
        lastAngle=endingAngle;
    }
}


drawChart("canvas",[1,2,3]);
drawChart("canvas2",[1,3,9]);
</script>
</body>
</html>