Automatically zooming in on highcharts after loading

Question

Does anyone know how to automatically zoom into a portion of a chart after it finishes loading? I have a lot of timeseries data but the most important info is to the right. I'd still like all the data to be available but only the most recent 7 days in view zoomed in.

What I would like to simulate is a user click-dragging for the 7 latest days on my chart. So if anyone knows how to manually trigger that event, it's probably what I'd like to do.

Here is a sample chart from jsfiddle that has the normal zooming functionality: http://jsfiddle.net/Y5q8H/50/

I have a few other ideas of how this could be done, but I think what I want is the best way to go about it.

Other ideas:

1) Only load the last 7 days, put a fake 'Reset Zoom' button that then loads the whole data series afterwards

2) Look into that sister product StockCharts that's in Beta right now. It seems to have a bunch of preset range displays which would be cool to have too. I'm not sure how much of my existing code I'd have to change though.

Answer 1

You can use the setExtremes function to change the zoom. http://jsfiddle.net/quVda/382/

For a timeseries chart with day-by-day information, you need to use the UTC representation of the date:

var d = new Date();
chart.xAxis[0].setExtremes(
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7),
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));

Answer 2

Updated official fiddle for solution, guys: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/

$(function() {
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });

    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2007, 0, 1),
            Date.UTC(2007, 11, 31)
        );
    });
});