JQuery FLOTチャートダイナミックY軸

Question

最後の100個のデータポイントに基づいて最大Y軸値を計算し、次に正常にプロットするフロチャートを持っています... BUT 進行中のプロット新たなデータ点がプロットされた5秒遅れ）が現在の最大限界を超えています。 チャートに新しいポイントをプロットするときにY軸スケールを動的に設定する方法はありますか？

これは、チャートが5秒ごとに新しいポイントが追加されてプロットされているので、現在のY軸が超過した場合、グラフのY軸を動的に拡大する方法に関する有効な質問です。 ...それは、現在の最大Y軸の値以上に達した場合にNEWプロットデータに合うようにY軸をスケーリング

UPDATE：ここ

は、私が使用するコード（JSONはデータを返される）などでありますプロット更新タイマー： "highY"は、データベースから最後の100のデータポイントをとり、最大値を最大カウント+ 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> 

は何私が達成するために期待しています、新しいデータプロット・ポイントの値が超えている場合、チャートが拡大するように、私は新しいデータポイントをプロットとして「$ highY」（Y軸）の値をリアルタイムに調整することです現在の "yaxis {max：＃}"がグラフオプションに設定されています。

Answer 1

私は現在、flot.setDataとflot.drawを使用していると仮定していますか？

最も簡単な解決策は、新しいデータを受け取るたびに$.plotに電話することです。さまざまな時に、これはflotプラグインの作者がこの状況を処理するのに合理的に効率的な方法として推奨されています。私はこれを毎秒更新するグラフでこれを使用し、ユーザのコンピュータ上で過度のCPUを使用しないことを発見しました。

追加したコード（とあなたの提案編集）に基づいてEDIT、私はこのように見えるように更新機能を変更します

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); 
} 

また、あなたがgetStrとgetStrにコードを追加しておきますmaxYaxisは最新の変数です。