Simple Flot Pie Chart

by Plippie Plop

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>
<div id="output"></div>

CSS

#output .pieLabel {
    font-family: arial;
    font-size: 14px !important;
}
#output {
    width: 300px;
    height: 300px;
}

JavaScript

(function(){
	var data = [
        { label: "Bus(ses)",  data: 6},
        { label: "SUV",  data: 5},
        { label: "Electric",  data: 5},
        { label: "Air/planes",  data: 4},
        { label: "Bikes",  data: 3},
        { label: "Crossover",  data: 3},
        { label: "Minivan",  data: 2},
        { label: "Taxis",  data: 2},
        { label: "Trucks",  data: 2},
        { label: "Ship", data: 2}
    ];
    
    $.plot('#output', data, {
    	series: {
        	pie: {
           		show: true,
                label: {
                    show: true,
                    formatter: function (label, series) {
                    	var element = '<div style="font-size:9pt;text-align:center;padding:2px;color:' + series.color + ';">' + label + '<br/>' + series.data[0][1] + '</div>';
                        return element;
                	}
                }
            }
        },
        legend: {
     	   show: false
    	}
	});
})();