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.
Highcharts Basic type option is set to either "x" , "y" or "xy" . With a mouse pointer, the zooming is performed by dragging out a rectangle in the chart. If the chart. panKey is set, the user can press that key and drag the mouse in order to pan.
To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.
Highcharts is a software library for charting written in pure JavaScript, first released in 2009. The license is proprietary. It is free for personal/non-commercial uses and paid for commercial applications.
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()));
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)
);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With