धूमकेतु

Question

के साथ वास्तविक समय में Google चार्ट अपडेट करें मैं रीयलटाइम में अपडेट होने वाले बार चार्ट बनाने के लिए Google चार्ट का उपयोग करना चाहता हूं। जब उपयोगकर्ता पृष्ठ लोड करता है, तो मैं वर्तमान परिणाम दिखाना चाहता हूं। लेकिन जैसे ही मेरे डेटाबेस में डेटा बदलता है, मैं इन परिवर्तनों को क्लाइंट में धक्का देना चाहता हूं और ग्राफ को अपडेट करना चाहता हूं।

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn('number', 'Expenses'); 
    data.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 

मैं मैं डेटा हर कुछ सेकंड खींच और चार्ट पुनः बनाने का एक अजाक्स अनुरोध इस्तेमाल कर सकते हैं लगता है:

यहाँ गूगल चार्ट पेज से एक बार चार्ट उदाहरण है। लेकिन शायद Google चार्ट में कुछ अंतर्निहित विधि है जो मुझे याद आ रही है। मैंने Comet के बारे में बहुत कुछ पढ़ा, लेकिन मैंने कभी भी उस अवधारणा को लागू नहीं किया।

क्या कोई और उस समस्या में भाग लेता है?

Answer 1

एक टाइमर पर AJAX को लागू करने के लिए सबसे आसान उपाय है:

// using jQuery for simplicity, but you can implement in other libraries or vanilla javascript if you want 
function drawChart() { 
    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 

    function updateChart() { 
     $.ajax({ 
      url: 'path/to/data/source/', 
      data: {/* any parameters you need to pass to the server to get your data back */}, 
      dataType: /* text, json, XML, whatever your server returns */, 
      success: function (response) { 
       // use response to create/update DataTable 
       chart.draw(data, options); 
       // update the chart again in 2 seconds 
       setTimeout(updateChart, 2000); 
      }, 
      error: function (response) { 
       // handle errors 
      } 
     }); 
    } 
    updateChart(); 
} 

एक धूमकेतु सेवा का उपयोग करना, थोड़ा और अधिक जटिल लागू करने के लिए है, क्योंकि यह जावास्क्रिप्ट में और अपने सर्वर पर Socket.Io की तरह कुछ की स्थापना की आवश्यकता है।

धूमकेतु सेवा का उपयोग चार्ट में सबसे ताजा डेटा की गारंटी देगा, जबकि AJAX लागू करने के लिए आसान है। धूमकेतु को आपके सर्वर से सक्रिय कनेक्शन बनाए रखने की आवश्यकता है जबकि AJAX कई स्वतंत्र अनुरोध करता है।