jqplot replot не работает для гистограммы

Question

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

<?php 
    $z_data = json_encode($this->testData('123')); 
    ?> 

Javascript код

$(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true; 
    var s2 = $z_data; 
    var plot5 = $.jqplot('big', [s2], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
      } 
     }, 
     highlighter: { show: false } 
    }); 
    $('a[href="#dash4"]').on('shown', function(g) { 
     plot5.replot(); 
    }); 

    setInterval(function() { 
     var s4 = []; 
     var toi = $z_data 
     for (var k=0; k<11; k++){ 
      s4.push([k, toi[k]]); 
     } 


     $('#big').unbind(); 
     plot5.destroy(); 
     plot5.series[0].data = s4; 
     plot5.resetAxesScale(); 
     plot5.replot(true); 
     }, 
     10000 
    ); 

    $.jqplot.config.enablePlugins = false; 

}); 

Где я делаю ошибку? Также база данных обновляется каждые 5 секунд, поэтому изменение должно отражаться на графике, так как я обновляю его каждые 10 секунд.

Answer 1

Вот решение: JsFiddle link

В примере я предположил, фиктивные данные, чтобы доказать концепцию кода.

$(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true; 
    var s2 = [1,2,4,5,7,23,4,40,7,3,8]; 
    var plot5 = $.jqplot('big', [s2], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
      } 
     }, 
     highlighter: { show: false } 
    }); 
    $('a[href="#dash4"]').on('shown', function(g) { 
     plot5.replot(); 
    }); 

    setInterval(function() { 
     var s4 = []; 
     s2.shift(); 
     var toi = s2; 
     toi.push(Math.round(Math.random()*10)); 
     for (var k=0; k<11; k++){ 
      s4.push([k+1, toi[k]]); 
     } 

     plot5.destroy(); 
     plot5.series[0].data = s4; 
     plot5.replot(true); 
     }, 
     10000 
    ); 

}); 

Answer 2

Вы должны определить plot5 как глобальную переменную.