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()));