jqplot replot对条形图不起作用

Question

I am taking graph plot points from database and replotting graph after every 10 seconds so that any change in database is reflected on graph. But in my case this is not working and graph changes only when I reload the page. Following is my code

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

javascript code

$(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;

});

Where I am making mistake? Also database gets updated every 5 seconds so the change should be reflected on graph since I updating it every 10 seconds.

Answer 1

Here is the solution: JsFiddle link

In the example i have assumed dummy data to prove the code concept.

$(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定义为全局变量。