Home/ Questions/Q 1004491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:08:34+00:00

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

  • 0

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

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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