a
b
c
54%
30%
15%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
    var plot1 = $.jqplot('pie1', [[['a',25],['b',14],['c',7]]], {
        gridPadding: {top:0, bottom:38, left:0, right:0},
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            trendline:{ show:false },
            rendererOptions: { padding: 8, showDataLabels: true }
        },
        legend:{
            show:true,
            placement: 'outside',
            rendererOptions: {
                numberRows: 1
            },
            location:'s',
            marginTop: '15px'
        }      
    });
});

1
2
3
4
5
6
$(document).ready(function(){
    var plot2 = $.jqplot('pie2', [[['a',25],['b',14],['c',7]]], {
        seriesDefaults:{ renderer:$.jqplot.PieRenderer, trendline:{ show: true } },
        legend:{ show: true }   
    });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){   
    var plot3 = $.jqplot('pie3', [[['a',1],['b',9],['c',1]]], {
        seriesDefaults:{
            shadow: false,
            renderer:$.jqplot.PieRenderer,
            rendererOptions:{
                sliceMargin: 4,
                // rotate the starting position of the pie around to 12 o'clock.
                startAngle: -90
            }
        },
        legend:{ show: true }     
    });
});

1
2
3
4
5
6
7
8
9
$(document).ready(function(){  
    var plot4 = $.jqplot('pie4', [[["a",0],["b",1],["c",.01]]], {
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions:{ sliceMargin: 0 }
        },
        legend:{ show: true }     
    });
});

1
2
3
4
5
6
$(document).ready(function(){ 
    var plot5 = $.jqplot('pie5', [[["none",23],["error",0],["click",5],["impression",25]]], {
        seriesDefaults:{ renderer: $.jqplot.PieRenderer },
        legend:{ show:true }     
    });  
});

1
2
3
4
5
6
$(document).ready(function(){ 
    var plot6 = $.jqplot('pie6', [[["none",0],["error",0],["click",0],["impression",0]]], {
        seriesDefaults:{ renderer: $.jqplot.PieRenderer },
        legend:{ show:true }    
    });  
});
all
100%

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){ 
    var plot7 = $.jqplot('pie7', [[["all", 10]]], {
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend:{show:true}     
    });  
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
    var s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
         
    var plot8 = $.jqplot('pie8', [s1], {
        grid: {
            drawBorder: false,
            drawGridlines: false,
            background: '#ffffff',
            shadow:false
        },
        axesDefaults: {
             
        },
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {
            show: true,
            rendererOptions: {
                numberRows: 1
            },
            location: 's'
        }
    });
});

The charts on this page depend on the following files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />