Inventory Profile Graph with AmCharts

by Anton

HTML

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var data = getData();

// TODO: This is required for data preparation, include in CustomChart.js
for(var i = 0; i < data.length; i++) {
    data[i].DATEFROM = new Date(data[i].DATEFROM);
}

// Don't show orders for the first day
data[0].INFIRMORDERSGRAPH = 0;
data[0].INTENTATIVEORDERSGRAPH = 0;
data[0].OUTFIRMORDERSGRAPH = 0;
data[0].OUTTENTATIVEORDERSGRAPH = 0;

// Custom balloon text
function getBalloonText(item, graph) {
    var html = '';
    var propsArr = ['INFIRMORDERSGRAPH', 'INTENTATIVEORDERSGRAPH', 'OUTFIRMORDERSGRAPH', 'OUTTENTATIVEORDERSGRAPH'];
    
    html += '<span style="font-size:13px;">Closing: <b>' 
        + item.dataContext.CLOSINGGRAPH + '</b>' 
        + '<br>Safety Stock: <b>' 
        + item.dataContext['SAFETYSTOCK'] + '</b>'
        + '<br>Demand: <b>' 
        + item.dataContext.DEMANDGRAPH + '</b>';
    
    // Show only non-zero properties
    for(var i = 0; i < propsArr.length; i++) {
        //console.log(item.dataContext[propsArr[i]]);
        if(item.dataContext[propsArr[i]] > 0) {
            html += '<br>' + propsArr[i] + ': <b>' 
                + item.dataContext[propsArr[i]] + '</b>';
        }
    }
    
    return html;
}

// Docs: http://docs.amcharts.com/3/javascriptcharts/AmGraph
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "autoMargins": true,
    // TODO: Local image path
    "pathToImages": "http://www.amcharts.com/lib/images/",
    
    "chartCursor": {
        "cursorColor": "#CC0000"
    },
    
    "legend": {
        "position": "bottom",
        "align": "center",
        "horizontalGap": 10,
        "verticalGap": 3,
        "markerSize": 10
    },
    
    "startDuration": 0, // animation duration, in seconds
    
    "chartScrollbar": {
        "graph": "closing",
        "hideResizeGrips": true,
    },
    
    "dataProvider": data,
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "stackType": "regular",
    }],
    
   ...