overlaying two charts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
 <div id="chartdiv2" style="width: 100%; height : 400px; position:absolute;"> </div>
 <div id="chartdiv1" style="width: 100%; height : 400px; position:absolute;"> </div>

<!-- this is not finished example, because of non-equal years, the idea is not very good, but can be used as a base in some cases -->

JavaScript

var chart1;
var chartData1 = [];

var chart2;
var chartData2 = [];


AmCharts.ready(function() {
    // generate some data first
    generateChartData();

    // SERIAL CHART
    chart1 = new AmCharts.AmSerialChart();
    chart1.pathToImages = "http://www.amcharts.com/lib/3/images/";
    chart1.dataProvider = chartData1;
    chart1.categoryField = "date";
    chart1.balloon.bulletSize = 5;

    // as we need to match width/height of both charts, we can't use auto margins feature
    chart1.autoMargins = false;
    chart1.marginLeft = 70;
    chart1.marginTop = 20;

    // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
    chart1.addListener("dataUpdated", zoomChart);

    // AXES
    // category
    var categoryAxis = chart1.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.axisColor = "#DADADA";

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0;
    valueAxis.minimum = 0; // we have to set minimum/maximum of the axis to the min/max values of both data sets, unless we know the data will be similar
    chart1.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.title = "red line";
    graph.valueField = "visits";
    graph.balloonText = "[[category]]: [[value]]";
    chart1.addGraph(graph);

    // CURSOR
    chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chartCursor.addListener("changed", handleCursorChange);
    chartCursor.categoryBalloonDateFormat = "DD MMM YYYY";
    chartCursor.categoryBalloonEnabled = false;
    chart1.addChartCursor(chartCursor);

    // SCROLLBAR
    var chartScrollbar = new AmCharts.ChartScrollbar();
    chartScrollbar.scrollbarHeight = 20;
    chart1.addChartScrollbar(chartScrollbar);
    // we should listen for...