jqPlot: come aggiornare un grafico

Question

Non riesco a capire da solo o trovare un esempio corretto su come eseguire gli aggiornamenti in tempo reale in jqPlot in un modo simile, come mostrato in questo highcharts example.

Answer 1

Sulla base di this, ho preparato il seguente esempio:

$(document).ready(function() { 
    var plot1 = $.jqplot('chart1', [new Array(1)], { 
     title: 'Live Random Data', 
     series: [ 
      { 
      yaxis: 'y2axis', 
      label: '', 
      showMarker: false, 
      fill: false, 
      neighborThreshold: 3, 
      lineWidth: 2.2, 
      color: '#0571B6', 
      fillAndStroke: true} 
     ], 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       tickOptions: { 
        formatString: '%H:%M:%S' 
       }, 
       numberTicks: 10 
      }, 
      y2axis: { 
       min: 100, 
       max: 150, 
       tickOptions: { 
        formatString: '%.2f' 
       }, 
       numberTicks: 15 
      } 
     }, 
     cursor: { 
      zoom: false, 
      showTooltip: false, 
      show: false 
     }, 
     highlighter: { 
      useAxesFormatters: false, 
      showMarker: false, 
      show: false 
     }, 
     grid: { 
      gridLineColor: '#333333', 
      background: 'transparent', 
      borderWidth: 3 
     } 
    }); 

    var myData = []; 
    var x = (new Date()).getTime() - 101000; 
    var y; 
    var i; 
    for (i = 0; i < 100; i++) { 
     x += 1000; 
     y = Math.floor(Math.random() * 100); 
     myData.push([x, y]); 
    } 

    plot1.series[0].data = myData; 
    plot1.resetAxesScale(); 
    plot1.axes.xaxis.numberTicks = 10; 
    plot1.axes.y2axis.numberTicks = 15; 
    plot1.replot(); 

    function updateSeries() { 
     myData.splice(0, 1); 
     x = (new Date()).getTime(); 
     y = Math.floor(Math.random() * 100); 
     myData.push([x, y]); 

     plot1.series[0].data = myData; 
     plot1.resetAxesScale(); 
     plot1.axes.xaxis.numberTicks = 10; 
     plot1.axes.y2axis.numberTicks = 15; 
     plot1.replot(); 
    } 

    window.setInterval(updateSeries, 1000); 
}); 

See this jsfiddle to test it out.

Answer 2

Ho aggiunto un esempio su JSFiddle jsfiddle.net/meccanismocomplesso/QAr4r/ che riproduce l'esempio si è collegato.

Ho cercato di mantenere l'argomento il più generale possibile. Se hai bisogno di ulteriori spiegazioni, leggi leggi this article.

var plot1 = $.jqplot('myChart', [data], options); 
... 
plot1.series[0].data = data; // update the graph 

Answer 3

var plot1; 

function updatePlot(data){ 
plot1 = $.jqplot('myChart', [data], options); 
} 


function reDrawPlot(data){` 
updatePlot(data); 
plot1.replot(); 
} 

.... 
initialize plot 
plot1 = $.jqplot('myChart', [data], options); 
.... 


call function reDrawPlot with the new data as a parameter