Setting Grid Background and Border
HTML
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.4/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.4/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.4/plugins/jqplot.donutRenderer.js"></script>
<div id="chart" style="width: 400px; height: 300px;"></div>
JavaScript
var data = [['success',50], ['fail',120]];
//var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
$.jqplot('chart', [data], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
totalLabel: true,
dataLabels: 'value'
}
}
});