<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/themes/light.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"titleField": "category",
"valueField": "column-1",
"theme": "light",
"allLabels": [],
"balloon": {},
"legend": {
"align": "center",
"markerType": "circle"
},
"titles": [],
"dataProvider": [
{
"category": "category 1",
"column-1": "1"
},
{
"category": "category 2",
"column-1": 6
},
{
"category": "category 3",
"column-1": 2
},
{
"category": "Female Ratio",
"column-1": "3"
}
]
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
</body>
</html>