如何：动态移动Google Gauge？

Watch the CPU and memory gauges一秒钟。他们动态地移动。如何：动态移动Google Gauge？

下面显示的示例代码一样，不动的仪表（或者至少当我在自己的项目中试了一下。）

我如何得到它动态地移动这样呢？

（此外，将这些仪表放慢我的网站连接到谷歌？在另一方面，将把它带到了我的排名吗？）

来源

2010-08-14 Greg McNulty

这是如何关系到AppEngine上？ – 2010-08-15 12:48:11

@Adam Crossland：对不起没有确定.....什么是正确的谷歌代码标签？ – 2010-08-23 03:49:13

示例代码和实际演示是不同的。试试这个：

<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>

来源

2010-08-18 06:49:08

他们的演示使用伪随机数发生器来更新图形。这有点误导。

我使用他们的代码绘制初始图表，然后使用ajax调用从php获取更新后的数据作为json字符串。然后填充数据表并使用jQuery/javascript更新图表。我还没有到处做完整的教程，但它没有准备好生产...

最难的部分是让您的数据格式正确的服务器端和饲喂阿贾克斯而不会炸掉浏览器。代码看起来非常快，当你监视web服务器时，你需要在其他地方完成图像渲染。它的工作原理，但在这一点上，它仍然不是完全的浏览器不可知论 - 这就是为什么我选择在jQuery中使用重写。

据我所知，你的网页排名无关......

来源

2011-01-25 15:19:26 WWWIZARDS

重要信息，谢谢。 – 2011-01-27 00:59:09

所有的解决方案都采用随机生成的数字动画演示为压力表。如果你想显示一个真实的价值并在同一时间对它进行动画，会怎么样？这里是解决方案：

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 
    }

来源

2016-11-18 20:52:08 Tarik

如何：动态移动Google Gauge？

回答

相关问题