Highcharts large data set clustering - Javascript highcharts

Javascript examples for highcharts:Chart Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Data

Description

Highcharts large data set clustering

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//  ww  w.  j a v  a 2s.co m
   $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function(data) {
      data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
      $('#container').highcharts( {
         chart : {
            type: 'line',
            zoomType: 'x'
         },
         navigator : {
            adaptToUpdatedData: false,
            series : {
               data : data
            }
         },
         scrollbar: {
            liveRedraw: false
         },
         title: {
            text: 'AAPL history by the minute from 1998 to 2011'
         },
         subtitle: {
            text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
         },
         rangeSelector : {
            buttons: [{
               type: 'hour',
               count: 1,
               text: '1h'
            }, {
               type: 'day',
               count: 1,
               text: '1d'
            }, {
               type: 'month',
               count: 1,
               text: '1m'
            }, {
               type: 'year',
               count: 1,
               text: '1y'
            }, {
               type: 'all',
               text: 'All'
            }],
            inputEnabled: false, // it supports only days
            selected : 4 // all
         },
         xAxis : {
            events : {
               afterSetExtremes : afterSetExtremes
            },
            minRange: 3600 * 1000 // one hour
         },
         series : [{
            data : data,
            dataGrouping: {
               enabled: false
            }
         }]
      });
   });
});
function afterSetExtremes(e) {
   var url,
      currentExtremes = this.getExtremes(),
      range = e.max - e.min;
   var chart = $('#container').highcharts();
   chart.showLoading('Loading data from server...');
   $.getJSON('https://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();
   });
}

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; min-width: 600px"></div>  
   </body>
</html>

Related Tutorials