2014-02-04 5 views
1

Надеюсь, кто-то может помочь мне здесь.Auto Update Highcharts с Ajax

Я пытаюсь обновить график информацией из ajax, я уже подтвердил, что ajax имеет правильный формат и т. Д., А загрузка начального графа работает отлично, но, похоже, не обновляется правильно.

Мой код:

$(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: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>'; 
      } 
     }, 
     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); 
}); 

JSON тянут нормально, но он просто не обновляет таблицу каждые 5 секунд :(

Любая помощь будет принята с благодарностью, я ABIT из новичок с JS.

+0

Возможные DUP: http://stackoverflow.com/questions/12223972/load-data-into-highcharts-with-ajax – Hackerman

+0

вы можете проверить это для справки http://jsfiddle.net/4c2Qy/ – rockStar

+0

При попытке использовать приведенный выше URL-адрес я получаю эту ошибку «Uncaught TypeError: Object # не имеет метода« setData »в журнале консоли для каждого другого вызова ajax. – Glow

ответ

2

вы пробовали,

events: { 
     load: function() { 

    // set up the updating of the chart each second 
    var series = this.series[0]; 
    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); 
    }    
} 

Тогда ваши данные диаграммы были бы,

var options = { 
    chart: { 
     renderTo: 'cpuhealth', 
     type: 'column' 
    }, 
    title: { 
     text: 'CPU Usage' 
    }, 
    events: { 
      load: function() { 

     // set up the updating of the chart each second 
     var series = this.series[0]; 
     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); 
     }    
    }, 
    yAxis: { 
     labels: { 
      formatter: function() { 
       return this.value + ' %'; 
      } 
     }, 
     title: { 
      text: 'Usage (%)' 
     } 
    }, 
    xAxis: { 
     title: { 
      text: 'CPU Core ID#' 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return 'CPU Core: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>'; 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    series: [{}] 
};