Pareto chart example
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "/lib/3/images/",
"dataProvider": [{
"issue": "Issue #1",
"complaints": 250,
"percent": 10
}, {
"issue": "Issue #2",
"complaints": 210,
"percent": 20
}, {
"issue": "Issue #3",
"complaints": 180,
"percent": 35
}, {
"issue": "Issue #4",
"complaints": 150,
"percent": 65
}, {
"issue": "Issue #5",
"complaints": 120,
"percent": 80
}, {
"issue": "Issue #6",
"complaints": 60,
"percent": 100
}],
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
},{
"id": "v2",
"axisAlpha": 0,
"position": "right",
"unit": "%",
"gridAlpha": 0,
"maximum": 100
}],
"startDuration": 1,
"graphs": [{
"fillAlphas": 1,
"title": "Complaints",
"type": "column",
"valueField": "complaints"
}, {
"valueAxis": "v2",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Percent",
"valueField": "percent"
}],
"categoryField": "issue",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha":0,
"tickLength":0
}
});