गतिशील AJAX डेटा के साथ JQPlot ऑटो रीफ्रेश चार्ट

Question

मैं समय अंतराल में अनुक्रमिक रूप से jqPlot द्वारा खींचे गए चार्ट को अद्यतन करना चाहता हूं।

मेरा उपयोग केस ऐसा है कि AJAX कॉल केवल एक ही मान देता है। उदा .: लिए

1st AJAX call: 20 
2nd AJAX call: 30 
3rd AJAX call: 40 
4th AJAX call: 32 

तो मैं साजिश बनाना चाहते तरह ग्राफ:

First: only 20 
Second: 20,30 
Third: 20,30,40 
Fourth: 20,30,40,32 

हम पहले से ही jqPlot में डेटा साजिश रची निकालने और फिर इस नए डेटा सेट संलग्न करें और ग्राफ पुनः बनाने कर सकते हैं ??

क्या कोई भी मदद कर सकता है ??

Answer 1

आपको डेटा को एक सरणी में स्टोर करने की आवश्यकता होगी, फिर प्रत्येक AJAX कॉल के भीतर सरणी में नया डेटा दबाएं।

यहाँ एक बटन का उपयोग कर एक 3 सेकंड के अंतराल पर AJAX अद्यतन शुरू करने के लिए एक सरल डेमो है:

/* store empty array or array of original data to plot on page load */ 

var storedData = [3, 7]; 

/* initialize plot*/ 

var plot1; 
renderGraph(); 

$('button').click(function(){ 
    doUpdate(); 
    $(this).hide(); 
}); 

function renderGraph() { 
    if (plot1) { 
     plot1.destroy(); 
    } 
    plot1 = $.jqplot('chart1', [storedData]); 
} 
/* sample data for demo*/ 
var newData = [9, 1, 4, 6, 8, 2, 5]; 


function doUpdate() { 
    if (newData.length) { 
     /* used to pull new number from sample data for demo*/ 
     var val = newData.shift(); 

     $.post('/echo/html/', { 
      html: val 
     }, function(response) { 
      var newVal = new Number(response); /* update storedData array*/ 
      storedData.push(newVal); 
      renderGraph();    
      setTimeout(doUpdate, 3000) 
     }) 

    } else { 
     alert("All Done") 
    } 
} 

डेमो: http://jsfiddle.net/ZqCXP/

Answer 2

मुझे जवाब @charlietfl को जोड़ते हैं। जब आप replot() का उपयोग करते हैं तो jqplot को नष्ट करने के बजाय इसे दो बार फिर से निकालना पड़ता है। तो साजिश को फिर से निकालने के लिए नष्ट() का उपयोग करें।

$.jqplot('chart1', [storedData]).replot(); 

http://jsfiddle.net/zjjvm/ यह replot()

plot1.destroy(); 
plot1 = $.jqplot('chart1', [storedData]) 

http://jsfiddle.net/p9SbP/ यह 25sec लेता है का उपयोग कर नष्ट का उपयोग कर एक ही आकर्षित करने के लिए साइन चल आकर्षित करने के लिए 46sec लेता है()