Donut progress bars
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<div id="pie1" style="width: 200px; height: 200px; float:left;"></div>
<div id="pie2" style="width: 200px; height: 200px; float:left;"></div>
<div id="pie3" style="width: 200px; height: 200px; float:left;"></div>
JavaScript
var lineChart;
var lineChartData = [];
AmCharts.ready(function () {
makePieChart('pie1', 5, '#ff0000');
makePieChart('pie2', 20, '#0000ff');
makePieChart('pie3', 80, '#00ff00');
});
function makePieChart( div, value, color ) {
var pieChart = new AmCharts.AmPieChart();
pieChart.addLabel("50%", "45%", "" + value + "%", "middle", 20);
pieChart.dataProvider = [{
"title": "Label",
"value": ,
"color": color
}, {
"value": 100 - value,
"color": "#000000"
}];
pieChart.titleField = "title";
pieChart.valueField = "value";
pieChart.outlineColor = "#FFFFFF";
pieChart.outlineAlpha = 0.8;
pieChart.outlineThickness = 2;
pieChart.colorField = "color";
pieChart.radius = "42%";
pieChart.innerRadius = "60%";
pieChart.labelsEnabled = false;
pieChart.balloonText = "[[percents]]%";
// WRITE
pieChart.write(div);
}