I-Plan Forecating Serial graph mockup

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/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

body {
  background: #fff;
}

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": [{
        "date": "01-2015",
        "history": 26,
        "unadjustedHistory": 26,
      	"fittedHistory": 25,
    }, {
        "date": "02-2015",
        "history": 28,
        "unadjustedHistory": 27,
      	"fittedHistory": 27.5
    }, {
        "date": "03-2015",
      	"history": 30,
        "unadjustedHistory": 30,
        "system": 30,
      	"customer": 31.5,
      	"final": 32,
      	"trend": 30,
      	"budget": 30,
      	"upper": 34,
      	"lower": 26,
    }, {
        "date": "04-2015",
        "finalColor": "#ff0000",
        "finalComment": "This is a final value comment!",
      	"finalBulletSize": 14,
      	"system": 35,
      	"customer": 32,
      	"final": 36,
      	"trend": 33,
      	"budget": 30,
      	"upper": 39,
      	"lower": 25,
    }, {
        "date": "05-2015",
        "customerColor": "#ff0000",
      	"customerComment": "This is a customer value comment!",
      	"customerBulletSize": 14,
      	"system": 36,
      	"customer": 36,
      	"final": 37,
      	"trend": 36,
      	"budget": 33,
      	"upper": 43,
      	"lower": 24,
    }],
    "valueAxes": [{
        "axisAlpha": 0,
        "dashLength": 4,
        "position": "left",
    }],
    "graphs": [{
        "bulletSize": 8,
        "bullet": "round",
        "valueField": "history",
      	"title": "History",
      	"balloonText": "[[title]]: [[value]]",
    }, {
        "bulletSize": 8,
        "bullet": "round",
        "hidden": true,
        "valueField": "unadjustedHistory",
      	"title": "Unadjusted History",
      	"balloonText": "[[title]]: [[value]]",
    }, {
        "bulletSize": 8,
        "bullet": "round",
        "valueField": "fittedHistory",
      	"title": "Fitted History",
      	"balloonText": "[[title]]: [[value]]",
    }, {
        "bulletSize": 8,
        "bullet": "round",
        "valueField": "final",
      	"title": "Final",
  ...