Flot Pie Chart Example

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

by Plippie Plop

HTML

<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);
}
.pieLabel div {
    color: white !important;
    text-shadow: 0 0 4px #000;
}

JavaScript

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

var options = {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 0.8,
                threshold: 0.1
                //formatter: "labelFormatter"
            }
        }
    },
    grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%p.0%, %s",
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
};

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