JQuery FLOT चार्ट गतिशील वाई-अक्ष

Question

मेरे पास एक फ़्लोट चार्ट है जो पिछले 100 डेटा बिंदुओं के आधार पर अधिकतम वाई-अक्ष मान की गणना करता है और फिर सफलतापूर्वक प्लॉट करता है ... लेकिन कभी-कभी, चल रहे साजिश की कुल संख्या (प्लॉट किए गए नए डेटा पॉइंट के साथ 5 सेकंड देरी) वर्तमान अधिकतम सीमा से अधिक है। चार्ट पर नए बिंदुओं की साजिश करते समय वाई-अक्ष स्केल गतिशील रूप से करने का कोई तरीका है?

यह वर्तमान प्रश्न है कि वर्तमान वाई-अक्ष पार हो जाने पर चार्ट के वाई एक्सिस को गतिशील रूप से स्केल करने के तरीके के बारे में एक वैध सवाल है, क्योंकि चार्ट को 5 सेकंड में नए अंक जोड़े जाने के साथ समय के साथ प्लॉट किया गया है, मैं पूछ रहा था कि कैसे पैमाने पर अगर यह वर्तमान अधिकतम वाई अक्ष मूल्य से ऊपर पहुंचता है Y- अक्ष नई साजिश डेटा फिट करने के लिए ..

अद्यतन:

यहाँ कोड मैं का उपयोग करें (JSON दिए गए डेटा) के साथ ही है साजिश अद्यतन टाइमर: "हाईवाई" डेटाबेस से पिछले 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> 

जो मैं पूरा करने की उम्मीद कर रहा हूं वह "$ उच्चतम" (वाई-अक्ष) मूल्य वास्तविक समय को समायोजित करना है क्योंकि मैं नए डेटा पॉइंट्स प्लॉट करता हूं ताकि चार्ट डेटा स्केल पॉइंट के मूल्य से अधिक हो जाए वर्तमान "yaxis {max: #}" चार्ट विकल्पों में सेट है।

Answer 1

मुझे लगता है कि अभी आप flot.setData और flot.draw का उपयोग कर रहे हैं?

सबसे आसान समाधान केवल $.plot पर कॉल करने के लिए हर बार नए डेटा के साथ कॉल करने के लिए है। कई बार, फ्लोट प्लगइन के लेखकों ने इस स्थिति से निपटने का एक उचित रूप से प्रभावी तरीका के रूप में सिफारिश की है। मैंने ग्राफ पर इसका उपयोग किया है जो हर सेकेंड को रीफ्रेश करता है और पाया जाता है कि यह उपयोगकर्ता के कंप्यूटर पर अत्यधिक मात्रा में सीपीयू का उपयोग नहीं करता है, यहां तक ​​कि एक पृष्ठ पर हर दूसरे को 3-4 ग्राफ़ रीफ्रेश करने के साथ भी। इसके अतिरिक्त

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 वैरिएबल अप टू डेट।