如何:动态移动谷歌量规?

Watch the CPU and memory gauges for a second. They move dynamically.

看一下CPU和内存表。动态移动。

The example code shown below does not move the gauges like that (or at least when I tried it in my own project.)

下面所示的示例代码不会移动这样的标尺(或者至少在我自己的项目中尝试过)。

How do I to get it moving dynamically like that?

如何让它动态运动?

(Also, will these gauges slow down my site connecting to Google? On the other hand, will it bring up my rankings?)

(另外，这些量表会不会减慢我连接谷歌的速度?)另一方面，它会提升我的排名吗?

3 个解决方案

#1

The example code and the actual demo are different. Try this instead:

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

<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

Their demo uses a pseudo random number generator to update the graph. It's a little misleading.

他们的演示使用伪随机数生成器更新图表。有点误导。

I draw the initial chart using their code and then use an ajax call to fetch the updated data as a json string - from php. Then I populate the data table and update the chart with jQuery/javascript. I haven't gotten around to making a full tutorial yet b/c it's not ready for production...

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

The hardest part is getting your data formatted correctly on the server-side and feeding ajax without blowing up the browser. The code appears to be really fast and when you're monitoring a webserver you kinda want the image rendering to be done somewhere else. It works but, at this point, it's still not completely browser agnostic - which is why I chose to use re-write in jQuery.

最难的部分是在服务器端正确地格式化数据并在不破坏浏览器的情况下提供ajax。代码看起来非常快，当你监视一个webserver时，你会希望图像渲染在其他地方完成。它可以工作，但目前它还不是完全与浏览器无关——这就是为什么我选择使用jQuery重写的原因。

As far as I know, your page rankings are unrelated...

据我所知，你的网页排名是不相关的……

#3

All of the solutions are using random generated number to animate the gauge for demo. What if you want to show a real value AND animate it at the same time? Here is the solution:

所有的解决方案都是使用随机生成的数字来为演示做动画。如果你想要显示一个真实的值并同时动画它呢?这是解决方案:

Code it yourself on JSFiddle

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

#1