Flot Pie Chart

Pie chart requires a plugin for Flot 'jquery.flot.pie.js', it can be found in the Flot zip file.
//remember 'jquery.flot.pien.js' must include after 'jquery.flot.js' to make stacking work
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.pien.js"></script>

Simple pie chart
ExamplePie chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {show: true}
		    }
         };

    $.plot($("#flotcontainer"), data, options);  
});
</script>

<!-- HTML -->
<div id="legendPlaceholder"></div>
<div id="flotcontainer"></div>



Pie chart without legend
ExamplePie chart without legend
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 400px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {show: true}
		    },
            legend: {
                show: false
            }
         };

    $.plot($("#flotcontainer"), data, options);  
});
</script>

<!-- HTML -->
<div id="legendPlaceholder"></div>
<div id="flotcontainer"></div>



Pie chart with transparent label
ExamplePie chart with transparent label
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 400px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    tilt: 0.5,
                    label:{                        
                        radius: 3/4,
                        formatter: function (label, series) {
                            return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                            Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
		    },
            legend: {
                show: false
            }
         };

    $.plot($("#flotcontainer"), data, options);  
});
</script>

<!-- HTML -->
<div id="legendPlaceholder"></div>
<div id="flotcontainer"></div>



Interactive pie chart(move mouse over the pie chart)
ExampleInteractive pie chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 400px;
    text-align: left;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    tilt: 0.5,
                    label:{                        
                        radius: 3/4,
                        formatter: function (label, series) {
                            return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                            Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
		    },
            legend: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true
            }
         };

    $.plot($("#flotcontainer"), data, options);  

    $("#flotcontainer").bind("plothover", function(event, pos, obj){
        if (!obj){return;}
	    percent = parseFloat(obj.series.percent).toFixed(2);

        var html = [];
        html.push("<div style=\"flot:left;width:105px;height:20px;text-align:center;border:1px solid black;background-color:", obj.series.color, "\">",
                  "<span style=\"font-weight:bold;color:white\">", obj.series.label, " (", percent, "%)</span>",
                  "</div>");

	    $("#showInteractive").html(html.join(''));        
    });
});
</script>

<!-- HTML -->
<div>
	Hover percent : <span id="showInteractive"></span>
</div>
<div id="flotcontainer"></div>


comments powered by Disqus