title: Auto Update Highcharts with Ajax
body: <p>Hopefully somebody can be of help to me here.</p>
  
  <p>I'm trying to update a graph with information from ajax, I've already confirmed that the ajax is of the correct format etc and the initial graph load works perfectly but it doesn't seem to update correctly.</p>
  
  <p>My code:</p>
  
  <pre><code>$(document).ready(function() {
  
      var options = {
          chart: {
              renderTo: 'cpuhealth',
              type: 'column'
          },
          title: {
              text: 'CPU Usage'
          },
          yAxis: {
              labels: {
                  formatter: function() {
                      return this.value + ' %';
                  }
              },
              title: {
                  text: 'Usage (%)'
              }
          },
          xAxis: {
              title: {
                  text: 'CPU Core ID#'
              }
          },
          tooltip: {
              formatter: function() {
                  return 'CPU Core: &lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br&gt;Usage &lt;b&gt;' + this.y + '%&lt;/b&gt;';
              }
          },
          legend: {
              enabled: false
          },
          series: [{}]
      };
  
  
      var chart;
      $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
          options.series[0].data = JSON.parse(jsondata.cpu);
          chart = new Highcharts.Chart(options);
      });
  
      window.setInterval(function(){
          var chart = new Highcharts.Chart(options);
          $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
              options.series[0].data = JSON.parse(jsondata.cpu);
          });
      }, 5000);
  });
  </code></pre>
  
  <p>The JSON is being pulled fine but it just isn't updating the chart every 5 seconds :(</p>
  
  <p>Any help would be greatly appreciated, I'm abit of a novice with JS.</p>