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>
<div id="flot-placeholder" style="width:400px;height:300px"></div>
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>
grid: { hoverable: true }
$.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('')); }); }
$(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
var options = { series: { pie: { show: true, tilt: 0.5 } } };
Donut hole pie chart
var options = { series: { pie: { show: true, innerRadius: 0.5, label: { show: true } } } };