How to make Flot pie chart

Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin, we use the world population as data source, also we will show you how to add interactive features to the chart.

World population

Creating data

Because Flot doesn`t support pie chart, hence we have to include jquery.flot.pie.js plugin, the required files in this example are listed below.
   
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>      
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->   
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.pie.js"></script>
        
First, we create a <div>, and specify an id to it, also we give a width and a height to it, this is where the chart will be inserted.
   
        <div id="flot-placeholder" style="width:400px;height:300px"></div>
        
Making a pie chart is a lot easier than making other charts, first, we create an array call dataSet, and insert 6 data seires. We set label attribute with the values of continent names, and data attribute with the values of population, all you have to do is insert original values of population, Flot will autogenerate the percentage, and color attribute is used for setting the color of pie blocks.
   
        var dataSet = [
            {label: "Asia", data: 4119630000, color: "#005CDE" },
            { label: "Latin America", data: 590950000, color: "#00A36A" },
            { label: "Africa", data: 1012960000, color: "#7D0096" },
            { label: "Oceania", data: 35100000, color: "#992B00" },
            { label: "Europe", data: 727080000, color: "#DE000F" },
            { label: "North America", data: 344120000, color: "#ED7B00" }    
        ];
        

Pie chart options

The options of pie chart is all within the series.pie. In order to make chart come out as pie chart, you have to set series.pie.show to true. We also do some customization with the labels, by default, the legend will show up, but if you want pie chart to show labels instead of the legend, you can set legend.show to false.

label.radius is to set radius at which to place the labels, if the value is between 0 and 1, then it will use that value as a percentage of available space, otherwise it will be used as a direct pixel length.

We also use label.formatter to customize the labels. And label.background.opacity is used to set opacity of background, and label.background.color is used to set background color.
   
        series: {
            pie: {
                show: true,                
                label: {
                    show:true,
                    radius: 0.8,
                    formatter: function (label, series) {                
                        return '
' + label + ' : ' + Math.round(series.percent) + '%
'; }, background: { opacity: 0.8, color: '#000' } } } }

Interactive features

By default, pie chart lables can only show data percentage, but if we want to show the original values in the tooltip, we can use "plothover" event to achieve. First, we insert a div right below the placeholder, and give it an id call flot-memo.
   
        <div id="flot-memo" style="text-align:center;height:30px;width:250px;height:20px;text-align:center;margin:0 auto"></div>
        
Before using "plothover" event, we need to set grid.hoverable to true in the options, this way, when mouse move over the chart will trigger the event.
   
        grid: {
            hoverable: true
        }
        
Then we create a function call "showMemo", in this function we bind "plothover" event, an item object will be passed into this event, we can extract the color of data seires by using item.series.color, item.series.label can retrieve the string of data series label, and the original values we want, you can extract them from item.series.data[0][1]. The last step is to put all information together in the #flot-memo.
   
        $.fn.showMemo = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (!item) { return; }

                var html = [];
                var percent = parseFloat(item.series.percent).toFixed(2);        

                html.push("<div style=\"border:1px solid grey;background-color:",
                     item.series.color,
                     "\">",
                     "<span style=\"color:white\">",
                     item.series.label,
                     " : ",
                     $.formatNumber(item.series.data[0][1], { format: "#,###", locale: "us" }),
                     " (", percent, "%)",
                     "</span>", 
                     "</div>");
                $("#flot-memo").html(html.join(''));
            });
        }
        
In the end, you can call $.plot and pass dataset and options into it, then call showMemo(), the chart is completed.
   
        $(document).ready(function () {
            $.plot($("#flot-placeholder"), dataSet, options);
            $("#flot-placeholder").showMemo();
        });
        


Differenct pie chart

Flot pie chart aslo comes in different looks.
Tilted pie chart
The options codes of tilted pie chart
   
        var options = {
            series: {
                pie: {
                    show: true,
                    tilt: 0.5
                }
            }
        };
        
Donut hole pie chart
The options codes of donut hole pie chart
   
        var options = {
            series: {
                pie: {
                    show: true,
                    innerRadius: 0.5,
                    label: {
                        show: true
                    }
                }
            }
        };
        

Practice

You can find the source code of this example and test it online! Go to Example Tester