Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatically zooming in on highcharts after loading

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.

like image 345
RoboKozo Avatar asked Aug 25 '11 16:08

RoboKozo


People also ask

How to enable zoom in highcharts?

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.

How can I tell if Highcharts are loaded?

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.

What is Highcharts library?

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.


2 Answers

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()));
like image 111
Dennis Avatar answered Sep 18 '22 14:09

Dennis


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)
        );
    });
});
like image 40
Andy Webov Avatar answered Sep 17 '22 14:09

Andy Webov