Flot Pie Chart Example

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

by Pratik Bhoir

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.pie.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;
    box-shadow: 0 0 10px #555;
    opacity: 0.7;
    filter: alpha(opacity=70);    
}

JavaScript

var data = [{
    label: "Pause",
    data: 150
}, {
    label: "No Pause",
    data: 100
}, {
    label: "Sleeping",
    data: 250
}];
var options = {
    series: {
        pie: {
            radius: 0.9,
            innerRadius: 0.45,
            show: true

        }
    },
    grid: {
        hoverable: true
    },
    legend: {
        show: true
    },
    tooltip: {
        cssClass: "flotTip",
        show: true,
        content: "%p, %s", // show percentages, rounding to 2 decimal places
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
};

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