Highcharts large data set clustering

Question

I have tens of thousands (possibly hundreds of thousands) of points that I need plotted with Highcharts. Is there a way where I can cluster the data on the server, so it will show less than 1000 points, but as you zoom in it will make AJAX calls to the server to get the data for that zoomed region (it would probably run through the same cluster algorithm). How would this interface with the Highcharts API?

Answer 1

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

}

Answer 2

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


        });

    }