Pie Chart with Flot jQuery Plugin

In the previous article I wrote about Flot chart plugin, now I show you how to draw beautiful pie charts with this amazing plugin. It is very easy to use and implement into your project.
Flot homepage: flotcharts.org


Include jQuery, Flot and Flot Pie  in HTML head. For  HTML5 incompatible browsers include excanvas.min.js.

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

HTML markup

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


<style type="text/css">


<script type="text/javascript">
$(function () {
    // data
    var data = [
	{ label: "Series1",  data: 10},
	{ label: "Series2",  data: 30},
	{ label: "Series3",  data: 90},
	{ label: "Series4",  data: 70},
	{ label: "Series5",  data: 80},
	{ label: "Series6",  data: 110}
    // options
    var options = { 
        series: {
            pie: { show: true }
    // draw graph
    $.plot($("#placeholder"), data, options);


Demo »

Go Daddy

Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art


If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons


Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap


Would you like some cool stock photos for free? Check out this article, and try this website.

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the airplane *

Find us on Facebook


Get online with the world's Best - GoDaddy.com!

Back to Top