#6488

by amcharts

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

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
        "theme": "none",
        "dataDateFormat": "YYYY-MM-DD HH:NN",
        "dataProvider": [{
        "date": "2012-01-01",

            "value": 2025
    }, {
        "date": "2012-01-02",
            "value": 1882
    }],

        "valueAxes": [{
        "gridColor": "#FFFFFF",
            "gridAlpha": 0.2,
            "dashLength": 0
    }],
        "gridAboveGraphs": true,
        "startDuration": 1,
        "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "value"
    }],

        "trendLines": [{
        "finalDate": "2012-01-02 12",
            "finalValue": 1900,
            "initialDate": "2012-01-02 12",
            "initialValue": 2000,

    }],

        "chartCursor": {
        "categoryBalloonEnabled": false,
            "cursorAlpha": 0,
            "zoomable": false
    },
        "categoryField": "date",
        "categoryAxis": {
            parseDates: true,
        "gridPosition": "start",
            "gridAlpha": 0
    },
        "exportConfig": {
        "menuTop": 0,
            "menuItems": [{
            "icon": '/lib/3/images/export.png',
                "format": 'png'
        }]
    }
});