JQuery FLOT grafico asse Y dinamico

Question

Ho un diagramma di flusso che calcola il valore dell'asse Y massimo in base agli ultimi 100 punti dati e quindi stampa correttamente ... MA A volte, il totale parziale di una trama continua (5 secondi di ritardo con il nuovo punto dati tracciato) supera il limite massimo corrente. C'è un modo per avere la scala dell'asse Y dinamicamente mentre si tracciano nuovi punti sul grafico?

Questa è una domanda valida su come ridimensionare dinamicamente l'asse Y del grafico se l'asse Y corrente viene superato, poiché il grafico viene tracciato nel tempo con nuovi punti aggiunti ogni 5 secondi, stavo chiedendo come scalare l'asse Y per adattarsi ai dati trama NUOVI se raggiunge sopra del valore max asse Y corrente ..

UPDATE:

qui è il codice che utilizzo (JSON tornato dati) così come il timer aggiornamento plot: Il "highY" prende gli ultimi 100 punti dati da un database e imposta il valore massimo sul conteggio più alto + 10%

 <script type="text/javascript"> 
      $(function() { 
       var str1 = [], totalPoints = 300; 
       var str2 = [], totalPoints = 300; 
       var pts1 = ''; 
       var pts2 = ''; 
       if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; } 
       if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; } 
       var maxYaxis = <?PHP echo $highY; ?>; 
       function getStr1() { 
        var ts1 = new Date().getTime(); 
        var json1 = (function() { 
         var json1 = null; 
         var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1; 
         $.ajax({ 
          'async': false, 
          'global': false, 
          'url': myURL, 
          'dataType': "json", 
          'success': function (data) { 
           json1 = data; 
          } 
         }); 
         return json1; 
        })(); 
        var y1 = json1['data']['avgpersec']; 
        var total_1 = json1['data']['running_total']; 
        document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1; 
        if (str1.length > 0) { str1 = str1.slice(1); } 

        while (str1.length < totalPoints) { 
         var prev = str1.length > 0 ? str1[str1.length - 1] : 50; 
         str1.push(y1); 
        } 

        // zip the generated y values with the x values 
        var res = []; 
        for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) } 
        return res; 
       } 

       function getStr2() { 
        var ts2 = new Date().getTime(); 
        var json2 = (function() { 
         var json2 = null; 
         var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2; 
         $.ajax({ 
          'async': false, 
          'global': false, 
          'url': myURL, 
          'dataType': "json", 
          'success': function (data) { 
           json2 = data; 
          } 
         }); 
         return json2; 
        })(); 
        var y2 = json2['data']['avgpersec']; 
        var total_2 = json2['data']['running_total']; 
        document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2; 
        if (str2.length > 0) { str2 = str2.slice(1); } 

        while (str2.length < totalPoints) { 
         var prev = str2.length > 0 ? str2[str2.length - 1] : 50; 
         str2.push(y2); 
        } 

        // zip the generated y values with the x values 
        var res = []; 
        for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) } 
        return res; 
       } 

       // setup control widget 
       var updateInterval = 5000; 
       $("#updateInterval").val(updateInterval).change(function() { 
        var v = $(this).val(); 
        if (v && !isNaN(+v)) { 
         updateInterval = +v; 
        if (updateInterval < 1) 
         updateInterval = 1; 
        if (updateInterval > 2000) 
         updateInterval = 2000; 
         $(this).val("" + updateInterval); 
        } 
       }); 

       // setup plot 
       var options = { 
        series: { shadowSize: 0 }, // drawing is faster without shadows 
        yaxis: { min: 0, max: maxYaxis}, 
        xaxis: { show: false }, 
        colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"] 
       }; 
       var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options); 

       function update() { 
        plot.setData([ getStr1(), getStr2() ]); 
        plot.draw(); 
        setTimeout(update, updateInterval); 
       } 

       update(); 
      }); 
     </script> 

Quello che spero di realizzare è quello di regolare il "$ highy" (asse Y) valore in tempo reale come ho tracciare nuovi punti di dati in modo che il grafico scalerà se il valore del nuovo punto della trama dati supera l'attuale "yaxis {max: #}" impostato nelle opzioni del grafico.

Answer 1

Suppongo che in questo momento stai utilizzando flot.setData e flot.draw?

La soluzione più semplice è chiamare lo $.plot con i nuovi dati ogni volta che lo si riceve. In vari momenti, questo è stato raccomandato dagli autori del plugin flot come un modo ragionevolmente efficiente di affrontare questa situazione. Ho usato questo su grafici che si aggiornano ogni secondo e ho scoperto che non utilizza una quantità eccessiva di CPU sul computer dell'utente, anche con grafici 3-4 che si aggiornano ogni secondo su una pagina.

EDIT in base al codice aggiunto (e la modifica suggerita), mi avrebbe cambiato la funzione di aggiornamento per assomigliare a questo:

function update() { 
    var data = [ getStr1(), getStr2() ]; 

    //modify options to set the y max to the new y max 
    options.yaxis.max = maxYaxis; 
    $.plot($("#placeholder"), data, options); 
    setTimeout(update, updateInterval); 
} 

Inoltre, si dovrebbe aggiungere il codice per getStr e getStr che mantengono la variabile maxYaxis aggiornata.