<canvas  id="chart" width="200" height="200"></canvas>

function add_chart(num) {
            var drawingCanvas = document.getElementById('chart');
            if(drawingCanvas && drawingCanvas.getContext) {
             var context = drawingCanvas.getContext('2d');
             // рисуем окружность
             context.fillStyle = "#ddd";
             context.strokeStyle = "#ddd";
             context.beginPath();
             context.arc(100,100,86,0,Math.PI*2,true);
             context.closePath();
             context.fill();

             // рисуем сектор окружности num%
             context.fillStyle = "#b2d63c";
             context.beginPath();
             context.moveTo(100, 100);
             var start=(Math.PI/180)*90-((Math.PI/180)*num*360/100)/2 //координаты старта определяем так чтоб закрашенная область всегда была снизу
             context.arc(100,100,86,start,start+(Math.PI/180)*num*360/100,false);
             context.closePath();
             context.fill();

             // закрашиваем внутреннюю окружность меньшего радиуса
             context.fillStyle = "#F8F8F8";
             context.beginPath();
             context.arc(100,100,54,0,Math.PI*2,true);
             context.closePath();
             context.fill();

             context.fillStyle = "#000000";
             context.font = "20pt Tahoma";
             context.textAlign = "center";
             context.textBaseline = 'middle';
             var x=drawingCanvas.width/2;
             var y=drawingCanvas.height/2;
             context.fillText(num+"%", x,y);
            }

        }

 add_chart(12)
Заранее спасибо...