2010-08-14 22 views
6

Watch the CPU and memory gauges। वे गतिशील रूप से आगे बढ़ते हैं।कैसे करें: गतिशील रूप से Google गेज को स्थानांतरित करें? एक सेकंड के लिए

नीचे दिखाया गया उदाहरण कोड गेज स्थानांतरित नहीं होता है जैसे कि (या कम से कम जब मैं यह मेरी अपनी परियोजना में करने की कोशिश की।)

मैं इसे इस तरह गतिशील रूप से बढ़ रहा है कैसे प्राप्त करने के लिए करते हैं?

(इसके अलावा, इन गेज नीचे मेरी साइट Google से कनेक्ट? दूसरी ओर धीमी हो जाएगी, यह मेरी रैंकिंग लाएगा?)

+1

यह कैसे AppEngine से संबंधित है: यहाँ समाधान है? –

+0

@ एडम क्रॉसलैंड: क्षमा करें यकीन नहीं था ..... Google कोड के लिए सही टैग क्या है? –

उत्तर

6

उदाहरण कोड और वास्तविक डेमो अलग हैं। इसके बजाय इसे आजमाएं:

<html> 
    <head> 
    <script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
     google.load('visualization', '1', {packages:['gauge']}); 
     google.setOnLoadCallback(drawChart); 
    </script> 
    </head> 

    <body> 
    <div id='chart_div'></div> 
    <script type="text/javascript"> 
    function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new Date).getTime(),b]};this.tick("start")}var loadTimer=new Timer;window.jstiming={Timer:Timer,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete window.jstiming.pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;var a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in a){if(b.indexOf("_")==0)continue;var f=a[b][1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&&i.push(b+"."+(a[b][0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new Image).src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")}; 
</script> 

<script type="text/javascript"> 

var csi_timer = new window.jstiming.Timer(); 
csi_timer.name = 'docs_gauge'; 

google.setOnLoadCallback(drawChart); 

function drawChart() { 

    csi_timer.tick('load'); 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Value'); 
    data.addRows(3); 
    data.setValue(0, 0, 'Memory'); 
    data.setValue(0, 1, 80); 
    data.setValue(1, 0, 'CPU'); 
    data.setValue(1, 1, 55); 
    data.setValue(2, 0, 'Network'); 
    data.setValue(2, 1, 68); 

    csi_timer.tick('data'); 

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

    csi_timer.tick('new'); 

    var options = {width: 400, height: 120, redFrom: 90, redTo: 100, 
     yellowFrom:75, yellowTo: 90, minorTicks: 5}; 
    chart.draw(data, options); 

    csi_timer.tick('draw'); 
    window.jstiming.report(csi_timer); 

    setInterval(function() { 
    data.setValue(0, 1, 40 + Math.round(60 * Math.random())); 
    chart.draw(data, options); 
    }, 13000); 
    setInterval(function() { 
    data.setValue(1, 1, 40 + Math.round(60 * Math.random())); 
    chart.draw(data, options); 
    }, 5000); 
    setInterval(function() { 
    data.setValue(2, 1, 60 + Math.round(20 * Math.random())); 
    chart.draw(data, options); 
    }, 26000); 
} 
</script> 

    </body> 
</html> 
2

उनका डेमो ग्राफ को अपडेट करने के लिए एक छद्म यादृच्छिक संख्या जेनरेटर का उपयोग करता है। यह थोड़ा भ्रामक है।

मैं अपने कोड का उपयोग करके प्रारंभिक चार्ट खींचता हूं और फिर अद्यतन डेटा को एक जेसन स्ट्रिंग के रूप में लाने के लिए AJAX कॉल का उपयोग करता हूं - php से। फिर मैं डेटा तालिका पॉप्युलेट करता हूं और चार्ट को jQuery/जावास्क्रिप्ट के साथ अद्यतन करता हूं। मुझे अभी तक पूर्ण ट्यूटोरियल बनाने के लिए नहीं मिला है, यह बी/सी उत्पादन के लिए तैयार नहीं है ...

सबसे कठिन हिस्सा सर्वर-साइड पर सही ढंग से अपना डेटा स्वरूपित कर रहा है और ब्राउजर को उड़ाए बिना AJAX खिला रहा है। कोड वास्तव में तेज़ प्रतीत होता है और जब आप किसी वेबसर्वर की निगरानी कर रहे होते हैं तो आप चाहते हैं कि छवि प्रतिपादन कहीं और किया जाए। यह काम करता है, लेकिन इस बिंदु पर, यह अभी भी पूरी तरह से ब्राउज़र अज्ञेयवादी नहीं है - यही कारण है कि मैंने jQuery में पुनः लिखने का चयन किया।

जहाँ तक मुझे पता है, अपने पृष्ठ रैंकिंग से संबंधित नहीं हैं ...

+0

महान जानकारी, धन्यवाद। –

0

समाधान के सभी यादृच्छिक जनरेट की गई संख्या का उपयोग कर रहे डेमो के लिए गेज चेतन करने के लिए। क्या होगा यदि आप एक वास्तविक मूल्य दिखाना चाहते हैं और इसे एक ही समय में एनिमेट करना चाहते हैं?

Code it yourself on JSFiddle

function isEven(n) { 
    return n % 2 == 0;// true|false 
    } 
    google.charts.load('current', {'packages':['gauge']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Label', 'Value'], 
     ['Memory', 80], 
     ['CPU', 55], 
     ['Network', 68] 
    ]); 

    var options = { 
     width: 400, height: 120, 
     redFrom: 90, redTo: 100, 
     yellowFrom:75, yellowTo: 90, 
     minorTicks: 5 
    }; 

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

    chart.draw(data, options); 
// Animate Gauges: (ArrayNum(start:0), ColumnInThatArray(start:0), NewValue) 
// OR in anoher words(rowIndex, columnIndex, NewValue) 

    setInterval(function() { 
     var chartValue = data.getValue(0, 1); 
     if (isEven(chartValue)){ 
     data.setValue(0, 1, (chartValue + 5)); 
     } else { 
     data.setValue(0, 1, (chartValue - 5)); 
     } 
     chart.draw(data, options); 
    }, 450);// milisecond 
    setInterval(function() { 
     var chartValue = data.getValue(1, 1); 
     if (isEven(chartValue)){ 
     data.setValue(1, 1, (chartValue + 1)); 
     } else { 
     data.setValue(1, 1, (chartValue - 1)); 
     } 
     chart.draw(data, options); 
    }, 600);// milisecond 
    setInterval(function() { 
     var chartValue = data.getValue(2, 1); 
     if (isEven(chartValue)){ 
     data.setValue(2, 1, (chartValue + 3)); 
     } else { 
     data.setValue(2, 1, (chartValue - 3)); 
     } 
     chart.draw(data, options); 
    }, 1000);// milisecond 
    } 
संबंधित मुद्दे

 संबंधित मुद्दे