Geek Answers Handbook

How to dynamically move Google Gauge?

Look at the processor and memory gauges for a second. They move dynamically.

The sample code shown below does not move such sensors (or at least when I tried this in my own project.)

How can I make dynamically move like this?

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

+6
javascript html xml
source share
3 answers

Sample code and actual demo are different. Try 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=gt,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>
+6
source share

Their demo uses a pseudo random number generator to update the chart. This is a bit misleading.

I draw the initial diagram using my code and then use the ajax call to retrieve the updated data as a json string - from php. Then I populate the data table and update the chart with jQuery / javascript. I am not going to do the full lesson, but it is not ready for production ...

The hardest part is to properly format your data on the server side and feed ajax without blowing up the browser. The code looks very fast, and when you follow the web server, you want the images to be rendered somewhere else. It works, but at the moment it is still not completely agronizing the browser, so I decided to use rewriting in jQuery.

As far as I know, your page rankings are not related ...

+2
source share

All solutions use a randomly generated number to animate the sensor for demonstration. What if you want to show real value and revive it at the same time? Here is the solution:

Build 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 }
0
source share

More articles:


All Articles