Use the following code to create a pie chart using jquery/jqplot.
<head>
<title>Programming language - Usage Pie Chart </title>
<link rel="stylesheet" href="/jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css"type="text/css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/jquery/css/jquery.jqplot.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/jquery/css/jquery.jqplot.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="/jquery/plugins/excanvas.js"></script>
<script type="text/javascript" src="/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.ui.core.js"></script>
<script type="text/javascript" src="/jquery/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript" src="/jquery/global.js"></script>
<script type="text/javascript" src="/jquery/plugins/jquery.jqplot.js"></script>
<script type="text/javascript" src="/jquery/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="/jquery/plugins/jqplot.donutRenderer.min.js"></script>
</head>
<body>
<script type="text/javascript">
var progLangUsageDistributionArray = new Array(5) ;
$(document).ready(function(){
progLangUsageDistributionArray = [['Java',50],['.Net',35],['c/c++',25],['Perl/PHP',20],['Ruby',15]];
var plot1 = $.jqplot('progLangUsagePieChart', [progLangUsageDistributionArray], {
grid : {
drawBorder : false,
drawGridlines : false,
background : '#F5F5F5',
shadow : false
},
title: {text: 'Programming Language - Usage'},
gridPadding : {
top : 0,
bottom : 100,
left : 180,
right : 20
},
seriesDefaults : {
renderer : $.jqplot.PieRenderer,
trendline : {
show : false
},
rendererOptions : {
padding : 8,
showDataLabels : true
}
},
legend : {
show : true,
placement : 'outside',
rendererOptions : {
numberRows : 1
},
location : 's',
marginTop : '15px',
border : '0 none'
}
});
});
</script>
<div id="progLangUsagePieChart" style="height:200px;width:400px; "></div>
</body>
</html>
Note: In the above html document, the necessary jquery/jqplot relate (js,css) files should be included to make it work.