Greg McNulty Greg McNulty - 1 year ago 78
ASP.NET (C#) Question

How to: Dynamically move Google Gauge?

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

Answer Source

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

    <script type='text/javascript' src=''></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});

    <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);if(window.jstiming),d){var c="";if({c+="&srt=";delete}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=["","&s=gviz&action=",,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")};

<script type="text/javascript">

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


function drawChart() {


  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  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);


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


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


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download