title: Loading millions of points with Highcharts
body: <p>I have a json dataset with millions of points.The structure is like this:</p>
  
  <p>[[1436997600000,7],[....]]</p>
  
  <p>The first number is a data and second one is a value.
  I want to plot this in a highchart so that it doesn't take so much time to load the chart and to navigate in it. I followed this example: <a href="http://www.highcharts.com/stock/demo/lazy-loading" rel="nofollow">http://www.highcharts.com/stock/demo/lazy-loading</a></p>
  
  <p>but can't get it work with my data. It take so much time to load and when I zoom the message 'loading from server' doesn't disappear. Can anyone help me on this please?</p>
  
  <p>JS:</p>
  
  <pre><code>$(function () {
  /**
   * Load new data depending on the selected min and max
   */
  function afterSetExtremes(e) {
  
      var chart = $('#container').highcharts();
  
      chart.showLoading('Loading data from server...');
      $.getJSON('http://localhost/public_html/webservice.php/re/pap/' + Math.round(e.min) + '/' + Math.round(e.max), function (data) {
  
          chart.series[0].setData(data);
  
          chart.hideLoading();
      });
  }
  
  // See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
  $.getJSON('http://localhost/public_html/webservice.php/re/pap', function (data) {
  
      // Add a null value for the end date
      data = [].concat(data, [[Date.UTC(2016, 9, 14, 19, 59), null]]);
  
      // create the chart
      $('#container').highcharts('StockChart', {
          chart : {
              type: 'scatter',
              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
          },
  
          yAxis: {
              floor: 0
          },
  
          series : [{
              data : data,
              dataGrouping: {
                  enabled: false
              }
          }]
      });
  });
  }); 
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/f0u5c4pg/" rel="nofollow">http://jsfiddle.net/f0u5c4pg/</a></p>
  
  <p>Thanks in advance!</p>