Flot Doughnut Chart Example

FOr more description http://www.flotcharts.org/flot/examples/series-pie/index.html

HTML

<script src="http://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="http://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<div id="pie-placeholder" class="flot"></div>

CSS

.flot {
    left: 0px;
    top: 0px;
    width: 610px;
    height: 250px;
}
#flotTip {
    padding: 3px 5px;
    background-color: #000;
    z-index: 100;
    color: #fff;
    opacity: .80;
    filter: alpha(opacity=85);
}

JavaScript

var data = [{
    label: "Pause",
    data: 150
}, {
    label: "No Pause",
    data: 100
}, {
    label: "Sleeping",
    data: 250
}];

var options = {
    series: {
        pie: {
            show: true,
            innerRadius: 0.5,
            radius: 1
        }
    },
    grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%: %p.0%",
        defaultTheme: false
    }
};

$.plot($("#pie-placeholder"), data, options);