Esküvő

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

HTML

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>

CSS

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

jQuery

<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);
});
</script>

 

Demo »


Esküvő


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

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

Free vector icons

Free vector icons

31/01/2016

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

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

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 flower *


Find us on Facebook

Tags

Esküvő

Back to Top