Tutorial: Flot – How to Create Pie Charts

16 March 2012 by Sharon Daws

It is simple to create a number of different types of pie charts in Flot. I’ve provided examples of various Flot pie charts below.

For a more in depth introduction to Flot and how to use it in your web pages, take a look at the tutorial how to add charts to your web pages using Flot.

The code for all of the pie charts shown in this page is quite similar, so to save space I will only provide the full code for the first pie chart (don’t worry – it is easy to create other pie charts from this):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Pie Chart</title>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 250px; height: 150px; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; left: 170px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.pie.min.js"></script>

<script type="text/javascript">
var data = [
    { label: "IE",  data: 19.5, color: "#4572A7"},
    { label: "Safari",  data: 4.5, color: "#80699B"},
    { label: "Firefox",  data: 36.6, color: "#AA4643"},
    { label: "Opera",  data: 2.3, color: "#3D96AE"},
    { label: "Chrome",  data: 36.3, color: "#89A54E"},
    { label: "Other",  data: 0.8, color: "#3D96AE"}
];

$(document).ready(function () {
    $.plot($("#placeholder"), data, {
         series: {
            pie: {
                show: true
            }
         },
         legend: {
            labelBoxBorderColor: "none"
         }
    });
});
</script>
</head>

<body>
<div id="placeholder"></div>
</body>
</html>

You will see that the data in all of the pie charts is the same – see the data in the above code.

To create each pie chart, just replace the code inside $(document).ready(function(){ … }); with the code next to each pie chart.

In addition to this, the width and height of the pie charts varies slightly. I’ve included the width and height for each pie chart next to the chart. Replace the CSS in the above code for #placeholder with the CSS next to each pie chart.

Note that you will need to include the pie chart plugin – include jquery.flot.pie.min.js underneath jquery.flot.js in the head section of your HTML document:

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.pie.min.js"></script>

Pie Chart with a Legend

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true
        }
    },
    legend: {
        labelBoxBorderColor: "none"
    }
});

#placeholder { width: 250px; height: 150px; }

Pie Chart with Labels Instead of a Legend

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true
        }
    },
    legend: {
        show: false
    }
});

#placeholder { width: 250px; height: 250px; }

Pie Chart with Coloured Labels

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 1,
                formatter: function(label, series) {
                    return '<div style="font-size:11px; text-align:center; padding:2px; color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                },
                background: {
                    opacity: 0.8
                }
            }
        }
    },
    legend: {
        show: false
    }
});

#placeholder { width: 200px; height: 200px; }

Pie Chart with Grey Labels

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 1,
                formatter: function(label, series) {
                    return '<div style="font-size:11px; text-align:center; padding:2px; color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                },
                background: {
                    opacity: 0.8,
                    color: '#444'
                }
            }
        }
    },
    legend: {
        show: false
    }
});

#placeholder { width: 200px; height: 200px; }

Pie Chart with Smaller Percentages Combined into One Slice

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true,
            combine: {
                color: '#999',
                threshold: 0.1
            }
        }
    },
    legend: {
        show: false
    }
});

#placeholder { width: 250px; height: 250px; }

Hide Series Label if Percentage is Less Than 10%

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 2/3,
                formatter: function(label, series) {
                    return '<div style="font-size:11px ;text-align:center; padding:2px; color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                },
                threshold: 0.1
            }
        }
    },
    legend: {
        show: false
    }
});

#placeholder { width: 250px; height: 150px; }

Doughnut Pie Chart

$.plot($("#placeholder"), data, {
    series: {
        pie: {
            innerRadius: 0.5,
            show: true
        }
    },
    legend: {
        labelBoxBorderColor: "none"
    }
});

#placeholder { width: 250px; height: 150px; }

Interactive Pie Chart

To create this last pie chart, it will require a little extra code.

$(document).ready(function () {
    $.plot($("#placeholder"), data, {
        series: {
            pie: {
                show: true
            }
        },
        grid: {
            hoverable: true
        },
        legend: {
            labelBoxBorderColor: "none"
        }
    });
    $("#placeholder").bind("plothover", pieHover);
});

function pieHover(event, pos, obj) {
    if (!obj)
        return;

    percent = parseFloat(obj.series.percent).toFixed(2);
    $("#pieHover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
}

#placeholder { width: 350px; height: 150px; }

In addition to the #placeholder div element, I’ve also included a div element called #pieHover. I’ve placed this alongside the #placeholder element:

<div id="pieHover"></div>

The #pieHover div will show a slice label and the percentage value of a slice when it is hovered over.

Posted in: Tutorial, Web Development | Tags: Chart, Flot, jQuery | 2 Comments

2 Comments

Trying to draw pie chart with dynamic data, but not being able to set the json data array (received through ajax call) as the pie data series.

Any help would be greatly appreciated. It’s really urgent.

In order for Flot to render pie charts, the data you are passing to it has to be in a particular format. Without seeing your code I can’t see what’s wrong but I’ve coded you up a quick example to show you how it can work with JSON and Ajax. Note that in this example the JSON data values being passed are numbers, not strings. Also, as I don’t know where your data is coming from, I’ve included mine in a JSON file.

Here is the HTML, CSS and jQuery for a simple pie chart. Make sure you include the correct links to your jQuery, Flot and Flot pie chart plugin files, and also your data source:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flot Pie Chart</title>

<style type="text/css">
#placeholder { width: 250px; height: 150px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript"
src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript"
src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" language="javascript"
src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript"
src="jquery.flot.pie.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var chartError = function(req, status, err) {
        console.log('An error occurred: ', status, err);
	};

    function chartDataReceived(data) {
        $.plot($("#placeholder"), data, {
            series: {
                pie: {
                    show: true
                }
            }
        });
    }

    $.ajax({
        url: 'data.json',
        method: 'GET',
        dataType: 'json',
        success: chartDataReceived,
        error: chartError
    });
});
</script>
</head>

<body>
<div id="placeholder"></div>
</body>
</html>

I’ve included the data in a file called ‘data.json’:

[
{
    "label": "IE",
    "data": 19.5,
    "color": "#4572A7"
},
{
    "label": "Safari",
    "data": 4.5,
    "color": "#80699B"
},
{
    "label": "Firefox",
    "data": 36.6,
    "color": "#AA4643"
},
{
    "label": "Opera",
    "data": 2.3,
    "color": "#3D96AE"
},
{
    "label": "Chrome",
    "data": 36.3,
    "color": "#89A54E"
},
{
    "label": "Other",
    "data": 0.8,
    "color": "#3D96AE"
}
]

Hope this helps!

Pikemere Web Services