具有大量数据的 HighChart 无法正常工作

Question

I am working with one of the large CakePHP portal, where I have used Highcharts for some graphical representations.

Its working fine for almost all the simple graphs, but my problem arise when Query retrieved large data from database and tried to plot in Highchart.

Below are the example data which I tried to render in HighChart:

[series] => Array
        (
            [0] => Array
                (
                    [name] => Name 1
                    [data] => Array
                        (
                            [0] => 1080
                            [1] => 25
                            [2] => 0.92
                            [3] => 19.5
                            [4] => 0
                            [5] => 0
                            [6] => 0
                            [7] => 0
                            [8] => 0
                            [9] => 0
                            [...] => 0
                              .
                              .
                            [320] => 0
                         )
                     )
                     .
                     .
                     .
                     .
                     .

           [upto 400] => Array
                (
                    [name] => Name 2
                    [data] => Array
                        (
                            [0] => 250
                            [1] => 25
                            [2] => 0.92
                            [3] => 19.5
                            [4] => 0
                            [5] => 0
                            [6] => 0
                            [7] => 0
                            [8] => 0
                            [9] => 0
                            [...] => 0
                              .
                              .
                            [320] => 0
                         )
                    )
              )

But after loading for a long time page goes to white blank page.

Answer 1

please have a look at below code.

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


        });

    }

thanks