Campaign Inventory chart

by Anton

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

var chart = getChartConfig();
chart.dataProvider = getChartData();

AmCharts.makeChart( "chartdiv", chart);


function getChartConfig() {
	return {
    "type": "serial",
    
    "addClassNames": true,
    
    "autoMargins": false,
    "marginLeft": 0,
    "marginRight": 0,
    "marginTop": 0,
    "marginBottom": 0,

    "balloon": {
      "adjustBorderColor": false,
      "horizontalPadding": 10,
      "verticalPadding": 8,
      "color": "#ffffff"
    },

    "valueAxes": [ {
      "axisAlpha": 0,
      "position": "left"
    } ],

    "startDuration": 0,

    "graphs": [ {
    	"id": "closing",
      "balloonText": "[[title]] on [[category]]: [[value]]",
      "fillAlphas": 1,
      "title": "Inventory",
      "type": "column",
      "valueField": "Closing",
      "colorField": "Colour",
      "lineThickness": 0
    }, {
      "id": "ss",
      "balloonText": "[[title]] on [[category]]: [[value]]",
      "bullet": "round",
      "lineThickness": 3,
      "bulletSize": 7,
      "bulletBorderAlpha": 1,
      "bulletColor": "#FFFFFF",
      "useLineColorForBulletBorder": true,
      "bulletBorderThickness": 3,
      "fillAlphas": 0.2,
      "lineAlpha": 1,
      "title": "Safety Stock",
      "valueField": "SafetyStock",
      "x": -50
    } ],

    "categoryField": "DateFrom",

    "categoryAxis": {
      "gridPosition": "start",
      "axisAlpha": 0,
      "tickLength": 0
    }
  };
}

function getChartData() {
	return [
    	{DateFrom: "2017-10-27T00:00:00", Closing: 27.75, SafetyStock: 10, Colour: "#5bb75b"},
        {DateFrom: "2017-10-28T00:00:00", Closing: 27.75, SafetyStock: 10, Colour: "#5bb75b"},
        {DateFrom: "2017-10-29T00:00:00", Closing: 24, SafetyStock: 8, Colour: "#5bb75b"},
        {DateFrom: "2017-10-30T00:00:00", Closing: 16, SafetyStock: 6, Colour: "#5bb75b"},
        {DateFrom: "2017-10-31T00:00:00", Closing: 4, SafetyStock: 5, Colour: "#fcd61b"},
        {DateFrom: "2017-11-01T00:00:00", Closing: 5, SafetyStock: 7, Colour: "#fcd61b"},
...