参考 計器図(Gauge)
/////

/////
/////
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["gauge"]});
google.setOnLoadCallback( function() {
var data = google.visualization.arrayToDataTable([
[ '', ''], [ 'Memory', 80],
[ 'CPU', 55],
['Network', 68] ]);
var options = {
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge( document.getElementById('gct_sample_gauge')); chart.draw(data, options); } );
</script>
<div  id="gct_sample_gauge" style="width: 400px;"></div>
///// 
上と下のちがいは?
///// 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["gauge"]});
google.setOnLoadCallback(
function() {
var data = google.visualization.arrayToDataTable([
[ '', ''], [ 'Memory', 80],
[ 'CPU', 55],
['Network', 68] ]);
var options = {
redFrom: 90, redTo: 100, // 赤の範囲
yellowFrom: 75, yellowTo: 90, // 黄色の範囲
minorTicks: 5 // 小目盛りの単位 (デフォルトは 2)
};
var chart = new google.visualization.Gauge( document.getElementById('gct_sample_gauge')); chart.draw(data, options);
} );
<div id="gct_sample_gauge" style="width:60%; height:200pt" ></div>
///// 

///// 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
var dynamicGauge;
var dynamicGaugeData;
var dynamicGaugeOptions;

// グラフの作成関数
function drawDynamicGauge() {
dynamicGaugeData = google.visualization.arrayToDataTable([ ['Speed'], [70] ]);
dynamicGauge = new google.visualization.Gauge(document.getElementById('gct_dynamic_gauge'));
dynamicGaugeOptions = {
max: 160, greenFrom: 40, greenTo: 60, yellowFrom: 60, yellowTo: 100, redFrom: 100, redTo: 160, minorTicks: 8 };
dynamicGauge.draw(dynamicGaugeData, dynamicGaugeOptions); }
// データを変更する関数
function changeSpeed(dir) {
var diff = dir * 25; var newvalue = dynamicGaugeData.getValue(0, 0) + diff; if (newvalue < 0) newvalue = 0;
// データの値を変更 dynamicGaugeData.setValue(0, 0, newvalue); dynamicGauge.draw(dynamicGaugeData, dynamicGaugeOptions);
}
google.setOnLoadCallback(drawDynamicGauge);
</script>
<div id="gct_dynamic_gauge" style="width: 160px; height: 160px;"></div> <input type="button" value="Down" onclick="changeSpeed(-1)" /> <input type="button" value="Up" onclick="changeSpeed(1)" />
/////