Awesome

Sweet Donut

A jQuery plugin for drawing sweet donut charts on HTML5 Canvas elements (see examples below).

Usage:

1.Stick a canvas element somewhere in your code:

<canvas id="donut-chart" width="300" height="300"></canvas>

2.Define some data and draw the donut on your canvas:

$(document).ready(function() {
  var props = {
    "data": [2,7,4],
    "colors": ["#3498db", "#d35400", "#1abc9c"], // OPTIONAL. If you want to make your colors static and fixed, use this. Otherwise random colors will be chosen.
    "shade_factor": "-14", // OPTIONAL. It defines the color shadiness on the inner donut edge.
    "shade_area_percent": "0.31", //OPTIONAL. It defines the width of shady area.
    "inner_area_factor": "0.5" //OPTIONAL. It defines how big the inner blank circle is.
  };

  $('#donut-chart').drawDonut(props);
});

3.???

4.Profit!

Here are some examples of rendered donuts with default (randomly chosen) chunk colors: