Jquery flot pie chart implementation.

In this tutorial I am going to implement pie chart by using jquery.flot.pie.js plugin. Jquery.flot.pie.js is very customizale jquery plugin. We can customize lables, tooltip, legend and colors of pie slices using this plugin according to our requirements. Following are the very simple steps to implement pie chart using jquery.flot.pie.js plugin.

Step 1: Download the pie chart plugins from following link and add jquery libraries refrences in following sequence in your page:
https://drive.google.com/drive/folders/0BxE2_mAUtGjJOU1sbm8weGxBNE0?usp=sharing

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.flot.js"></script>
<script src="~/Scripts/jquery.flot.pie.js"></script>
<script src="~/Scripts/jquery.flot.tooltip.js"></script>


Step 2: Paste fllowing html in html of your page:
    <div class="demo-container">
        <div id="divEmptyText"></div>
        <div id="placeholder" class="demo-placeholder"></div>
    </div>

Step 3: I have customized the labels and tooltip of pie charts by using following css. Paste following css in your style tag:
<style>
    .demo-container {
    box-sizing: border-box;
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table {
    border-spacing: 5px;
}

.chart-lable {
    border: 1px solid #CBD0D4;
    color: black;
    background-color: white;
    font-size:8pt; text-align:center; padding:2px;
}
    .flotTip {
        border: 1px solid #CBD0D4;
        color: black;
        background-color: white;
        font-size: 8pt;
        text-align: center;
        padding: 5px;
        font-weight: bold;
        max-width: 130px;
    }

#divEmptyText {
        top: 50%;
    position: relative;
    left: 46%;
}
</style>


Step 4: Now bind the pie chart with html element. Add following js code in your page:
<script type="text/javascript">
        $(function () {
            var data = [];
            data.push({
                label: "Series",
                data: 2,
                color: "red"
            });
            data.push({
                label: "Series1",
                data: 2,
                color: "green"
            });

            //In case no data you need to add an empty object with color. This color will be the sign of empty data.
            //data.push({
            //    label: "",
            //    data: 1,
            //    color: "blue"
            //})

            bindDonutPieChart("placeholder", data, true);
        });

        function bindDonutPieChart(elementId, data, isDonutChart) {
            var dataFound = true;
            var pieOptions = {
                show: true,
                radius: 3 / 4
            };

            if (isDonutChart) {
                pieOptions.innerRadius = 0.6;
            }

            if (data.length == 1) {
                if (data[0].label != "") { //This will display no lable if no data found.
                    pieOptions.label = {
                        show: true,
                        radius: 3 / 4,
                        formatter: labelFormatter,
                        background: {
                            opacity: 0.5,
                            color: "#000"
                        }
                    }
                }
                else {
                    dataFound = false;
                    $("#divEmptyText").text("No data");
                }
            }
            else {
                pieOptions.label = {
                    show: true,
                    radius: 3 / 4,
                    formatter: labelFormatter,
                    background: {
                        opacity: 0.5,
                        color: "#000"
                    }
                }
            }

            $.plot("#" + elementId, data, {
                series: {
                    pie: pieOptions
                },
                legend: {
                    show: true,
                    position: "sw",//"nw" or "ne"
                    margin: [120, 0]
                },
                grid: {
                    hoverable: true
                },
                tooltip: {
                    show: dataFound,
                    content: "%s <br/> %p.0%", // show percentages, rounding to 2 decimal places
                    shifts: {
                        x: 20,
                        y: 0
                    },
                    defaultTheme: false
                }
            });
        }

        // A custom label formatter used by several of the plots
        function labelFormatter(label, series) {
            return "<div class='chart-lable'>" + label + "<br/></div>";
        }
    </script>