javascript - Statistics circles in CSS -

i don't know how.

i have idea doesn't work.

<div id="stats">     <div id="men" class="circle"></div>     <div id="women" class="circle"></div>     <div id="white-circle" class="small-circle"></div> </div>  <style> #stats {     width: 100px;     height: 100px;     background: white;     position: relative; }  .circle {     border-radius: 100px;     background: #ccc;     width: 100px;     height: 100px;     position: absolute; }  .circle#men {    background: #27ae60;  }  .circle#women {    background: #f26646;  }  .small-circle {     border-radius: 100px;     background: white;     width: 65px;     height: 65px;     position: absolute;     top: 0; bottom: 0; left: 0; right: 0;     margin: auto; } </style> 

it called donut chart. difficult use div tag. instead use canvas or use javascript framework charting. here few examples.

<canvas></canvas> 

1. example1
2. example2
3. example3
4. example4

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 canvas         context.restore();         context.save();         context.clearrect(0,0,500,250);          (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 chart around segments start 12 o'clock          (i=0;i<segments.length;i++) {              //draw 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 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'; // basicall divide circle 4 parts demo: http://jsfiddle.net/zgfb6/