Dashboard History

by myrluk3

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

#chartdiv {
	width		: 600px;
	height		: 200px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": [{
        lineColor: "#f9c802",
        "date": "2012-01-01",
        "duration": 40
    }, {
        "date": "2012-01-02",
        "duration": 48
    }, {
        "date": "2012-01-03",
        "duration": 56
    }, {
        "date": "2012-01-04",
        "duration": 37
    }, {
        "date": "2012-01-05",
        "duration": 50
    }, {
        "date": "2012-01-06",
        "duration": 44
    }, {
        "date": "2012-01-07",
        "duration": 40
    }, {
    		 lineColor: '#ff0000',
        "date": "2012-01-08",
        "duration": 30
    }, {
        "date": "2012-01-09",
        "duration": 28
    }, {
        lineColor: "#f9c802",
        "date": "2012-01-10",
        "duration": 48
    }, {
        lineColor: "#a9d70b",
        "date": "2012-01-11",
        "duration": 89
    }, {
        "date": "2012-01-12",
        "duration": 81
    }],
    "balloon": {
        "cornerRadius": 6,
        "horizontalPadding": 15,
        "verticalPadding": 10
    },
    "valueAxes": [{
        //"axisAlpha": 0
    }],
    "graphs": [{
        "bullet": "square",
        "bulletBorderAlpha": 1,
        "bulletBorderThickness": 1,
        "fillAlphas": 0.3,
        "fillColorsField": "lineColor",
        "legendValueText": "[[value]]",
        "lineColorField": "lineColor",
        "title": "duration",
        "valueField": "duration"
    }],
    "chartCursor": {
        "categoryBalloonDateFormat": "YYYY MMM DD",
        "cursorAlpha": 0,
        "fullWidth": true
    },
    "dataDateFormat": "YYYY-MM-DD",
    "categoryField": "date",
    "categoryAxis": {
        "dateFormats": [{
            "period": "DD",
            "format": "DD"
        }, {
            "period": "WW",
            "format": "MMM DD"
        }, {
            "period": "MM",
            "format": "MMM"
        }, {
            "period": "YYYY",
            "format": "YYYY"
        }],
  ...