Highcharts zooming between points

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 200px"></div>
<div id="container2" style="height: 200px"></div>
<div>
    zoom calls setExtremes with the same values on both charts. The only difference is their data.
</div>
<div>
    <button id="zoom">zoom</button>
</div>

TypeScript

$(function () {
    var chart1 = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container1',
            zoomType: 'x',
        },
               
        xAxis: {
               type: 'datetime',
               startOnTick: false,
               endOnTick: false,
        },
  
        series: [{
            data: [
                [ date( "7/1/2012 1:00" ), 5 ],
                [ date( "7/5/2012 1:00" ), 20 ],
                [ date( "7/10/2012 1:00" ), 80 ],
                [ date( "7/20/2012 1:00" ), 30 ],
                [ date( "7/25/2012 1:00" ), 10 ],
                [ date( "8/1/2012 1:00" ), 100 ] ]
        }]
    
    });

    var chart2 = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container2',
            zoomType: 'xy',
        },
               
        xAxis: {
               type: 'datetime',
               startOnTick: false,
               endOnTick: false,
        },
  
        series: [{
            data: [
                 [ date( "7/1/2012 1:00" ), 5 ],
                 [ date( "8/1/2012 1:00" ), 100 ] ]
        }]
    
    });

    
    $('#zoom').click( function() {
        var startDate = date( "7/15/2012 1:00" );
        var endDate = date( "8/1/2012 1:00");
        
        chart1.xAxis[0].setExtremes( startDate, endDate, true, false );
        chart2.xAxis[0].setExtremes( startDate, endDate, true, false );
    } );
});




function date( text )
{
    return new Date( text ).getTime();
}