score:2

Accepted answer

Here is an improvement for Barbara's answer,

It registers to the setExtremes event, to know if this is a reset zoom event. If it is - it gets the entire dataset, thus allowing reset zoom to work correctly.

It also allows zooming in both x and y.

http://jsfiddle.net/DktpS/8/

var isReset = false;

...

            xAxis: {
                events: {
                        afterSetExtremes : afterSetExtremes,
                    setExtremes: function (e) {


                        if (e.max == null || e.min == null) {
                           isReset = true;                            
                        }
                        else
                        {
                         isReset = false;   
                        }
                    }
                },
                minRange: 3600 * 1000 // one hour
            },

            series: [{
                data: data,
                dataGrouping: {
                    enabled: false
                }
            }]
        });
    });
});


    /**
     * Load new data depending on the selected min and max
     */
    function afterSetExtremes(e) {

        var url,
        currentExtremes = this.getExtremes(),
            range = e.max - e.min;
        var chart = $('#container').highcharts();

        var min = 0;
        var max = 1.35e12;
        if(!isReset)
        {
            min = e.min;
            max = e.max;
        }
         chart.showLoading('Loading data from server...');
        $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(min) +
            '&end=' + Math.round(max) + '&callback=?', function (data) {

            chart.series[0].setData(data);

            chart.hideLoading();


        });

    }

score:0

In case when you will not have a limit of points, you can increase turboThreshold paramter.

score:3

There is a highstock demo that does this http://www.highcharts.com/stock/demo/lazy-loading. But you can do the same thing with highcharts http://jsfiddle.net/RHkgr/ The important bit is the afterSetExtremes function

...
            xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
...


/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

    var url,
        currentExtremes = this.getExtremes(),
        range = e.max - e.min;
    var chart = $('#container').highcharts();
    chart.showLoading('Loading data from server...');
    $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) +
            '&end='+ Math.round(e.max) +'&callback=?', function(data) {

        chart.series[0].setData(data);
        chart.hideLoading();
    });

}

Related Query

More Query from same tag