Watch the CPU and memory gauges per un secondo. Si muovono dinamicamente.Procedura: spostare dinamicamente Google Gauge?
Il codice di esempio riportato di seguito non si muove i calibri del genere (o almeno quando l'ho provato nel mio progetto.)
Come faccio a ottenere lo spostamento dinamico del genere?
(Inoltre, saranno questi calibri rallentare il mio sito che collega a Google? D'altra parte, sarà far apparire la mia classifica?)
Il codice di esempio e la demo attuale sono diversi. Prova questo:
<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>
La loro demo utilizza un generatore di numeri pseudo casuali per aggiornare il grafico. È un po 'fuorviante.
Io disegno il grafico iniziale usando il loro codice e poi uso una chiamata ajax per recuperare i dati aggiornati come una stringa json - da php. Quindi compilo la tabella dei dati e aggiorno il grafico con jQuery/javascript. Non ho ancora imparato a fare un tutorial completo b/c non è pronto per la produzione ...
La parte più difficile è ottenere i dati formattati correttamente sul lato server e alimentare ajax senza far esplodere il browser. Il codice sembra essere molto veloce e quando si controlla un server Web si desidera che il rendering dell'immagine venga eseguito altrove. Funziona ma, a questo punto, non è ancora completamente indipendente dal browser - ed è per questo che ho deciso di utilizzare la riscrittura in jQuery.
Per quanto ne so, la vostra classifica di pagina sono estranei ...
ottime informazioni, grazie. –
Tutte le soluzioni utilizzano numero generato a caso per animare il calibro per demo. Cosa succede se vuoi mostrare un valore reale E animarlo allo stesso tempo? ecco la soluzione:
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
}
Come è legato alla AppEngine? –
@Adam Crossland: Scusa non ero sicuro ..... qual è il tag corretto per il codice google? –