Syncing zoom across several date-based serial charts
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>
<div id="chartdiv2"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv, #chartdiv2 {
width : 100%;
height : 300px;
}
JavaScript
var chartConfig = {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD",
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value"
}],
"chartCursor": {
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
"dataProvider": [{
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-28",
"value": 11
}, {
"date": "2012-07-29",
"value": 15
}, {
"date": "2012-07-30",
"value": 16
}, {
"date": "2012-07-31",
"value": 18
}, {
"date": "2012-08-01",
"value": 13
}, {
"date": "2012-08-02",
"value": 22
}, {
"date": "2012-08-03",
"value": 23
}, {
"date": "2012-08-04",
"value": 20
}, {
"date": "2012-08-05",
"value": 17
}, {
"date": "2012-08-06",
"value": 16
}, {
"date": "2012-08-07",
"value": 18
}, {
"date": "2012-08-08",
"value": 21
}, {
"date": "2012-08-09",
"value": 26
}, {
"date": "2012-08-10",
"value": 24
}, {
"date": "2012-08-11",
"value": 29
}, {
"date": "2012-08-12",
"value": 32
}, {
...