Padding line graph with empty values at the end and start
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;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id":"v1",
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value"
}],
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 30
},
"chartCursor": {
"cursorPosition": "mouse",
"pan": true,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
exportConfig:{
menuRight: '20px',
menuBottom: '150px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider": [{
"date": "2012-07-26"
}, {
"date": "2012-08-26",
"value": 11
}, {
"date": "2012-08-27",
"value": 13
}, {
"date": "2012-08-28",
"value": 18
}, {
"date": "2012-08-29",
"value": 20
}, {
"date": "2012-08-30",
"value": 29
}, {
"date": "2012-08-31",
"value": 33
}, {
"date": "2012-09-01",
"value": 42
}, {
"date": "2012-09-02",
"value": 35
...