Highcharts großer Datensatz Clustering

Question

Ich habe Zehntausende (möglicherweise Hunderttausende) von Punkten, die ich mit Highcharts geplottet habe. Gibt es einen Weg, auf dem ich die Daten auf dem Server gruppieren kann, so dass es weniger als 1000 Punkte zeigt, aber wenn Sie hineinzoomen, wird AJAX Aufrufe an den Server machen, um die Daten für diese gezoomte Region zu erhalten der gleiche Cluster-Algorithmus). Wie würde diese Schnittstelle mit der Highcharts-API funktionieren?

Answer 1

ist hier eine Verbesserung für Barbaras Antwort,

Auf das Ereignis setExtremes registriert, zu wissen, ob dies ein Reset Zoom Ereignis. Wenn dies der Fall ist, wird der gesamte Datensatz, , abgerufen, sodass der Zoom zurückgesetzt werden kann.

Es ermöglicht auch das Zoomen in x und 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(); 


     }); 

    } 

Answer 2

Es gibt eine Highstock-Demo, die dies tut http://www.highcharts.com/stock/demo/lazy-loading. Aber man kann mit highcharts http://jsfiddle.net/RHkgr/ Das wichtige Bit das gleiche tun, ist die afterSetExtremes

funktionieren

... 
      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 3

Im Fall, wenn Sie nicht eine Grenze von Punkten haben, Sie turboThreshold Paramter erhöhen.