ABC analysis chart
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
// randomize data
var chartData = [];
for (var i = 1; i <= 50; i++ ) {
var dataPoint = {
index: i,
value: Math.random() * 25 + 1,
curve: Math.log(i) * 25
};
chartData.push(dataPoint);
}
console.log(chartData);
// add data points for step graph
chartData[0].step = 80;
chartData[0].stepColor = "#ff0000";
chartData[10].step = 95;
chartData[10].stepColor = "#ffff00";
chartData[15].step = 100;
chartData[15].stepColor = "#00ff00";
chartData[49].step = 100;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "value"
},{
"balloonText": "",
"lineThickness": 2,
"type": "smoothedLine",
"valueField": "curve"
},{
"balloonText": "",
"lineAlpha": 0,
"fillAlphas": 0.3,
"type": "step",
"valueField": "step",
"fillColorsField": "stepColor",
"behindColumns": true
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "index",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
},
"valueAxes": [{
"minimum": 0,
"maximum": 100,
"position": "right",
"labelsEnabled": false,
"gridAlpha": 0
}],
"guides": [{
"value": 50,
"dashLength": 5,
"lineColor": "#5555CC",
"lineAlpha": 0.5,
"label": "50%",
"inside": false
},{
"value": 80,
"dashLength": 5,
"lineColor": "#5555CC",
"lineAlpha": 0.5,
"label": "80%",
"inside": false
},{
"value": 95,
"dashLength": 5,
"lineColor": "#5555CC",
"lineAlpha": 0.5,
"label":...