title: How do you increase the performance of highcharts chart creation and rendering
body: <p>I have a file locally that has <code>JSON</code> formatted data. I have created little <code>PHP</code> script to echo out the the output of this file when call via <code>AJAX</code>. The data file's size is <code>59k</code>. I followed the highcharts recommendation to disable animation and shadow. when I load the chart, it takes a very very very long time to render. I have pasted the script below. Any ideas what I can do to render this chart faster? As it stands, this is definitely not acceptable.</p>
  
  <p><code>echo_file.php</code> output looks like this:</p>
  
  <pre><code>[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
  43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]
  </code></pre>
  
  <p>this is the script:</p>
  
  <pre><code>$(document).ready(function() {
  
  
   var seriesOptions = [],
      yAxisOptions = [],
      colors = Highcharts.getOptions().colors;
  
  function myAjax() {
      $.ajax({
                  url: 'echo_file.php', 
                  datatype: 'json',
                  success: function(data) {
  
                      seriesOptions=data;
                      createChart();
                  },
  
                  cache: false    
                  });
  }
  
  setInterval(myAjax, 300000); 
  
  
     function createChart() {
  
          $('#container').highcharts('StockChart', {
              chart: {
                  animation: false,
                  shadow: false
  
              },
              title : {
              text : 'CPU Utilization'
          },
  
              plotOptions: {
  
              series: {
                  lineWidth: 2
              }
          },
  
              rangeSelector: {
                  enabled: true,
                  buttons: [{
                          type: 'minute',
                          count: 60,
                          text: 'hourly'
                      }, {
                          type: 'all',
                          text: 'All'
                      }]
              },
              credits: {
                  enabled: false
              },
               xAxis: {
                  type: 'datetime',
                  minPadding:0.02,
                  maxPadding:0.02,
                  ordinal: false
  
  
  
              },
  
  
              yAxis: {
                  labels: {
                      formatter: function() {
                          //return (this.value &gt; 0 ? '+' : '') + this.value + '%';
                          return (this.value);
                      }
                  }
  
              },
  
  
              yAxis : {
                  title : {
                      text : '% CPU Utilization'
                  },
                  min:0,
                  max:100,
  
                  plotLines : {
                      value : 70,
                      color : '#FFA500',
                      dashStyle : 'shortdash',
                      width : 2,
                      label : {
                          text : 'Threshold',
                          align:'right'
                      }
                  }                           
  
              },
              scrollbar: {
                      enabled: true
                      },
              navigator : {
                  adaptToUpdatedData: false
  
              },
  
  
              tooltip: {
                  pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y} &lt;/b&gt;',
                  valueDecimals: 2
              },
  
              series: seriesOptions
  
          });
      }
  
  });
  </code></pre>