谷歌圖表多個量表

Question

我正在使用谷歌圖表，我試圖添加多個圖表到一個json調用。圖表樣式爲gauge。

下面的例子只適用於一個量表「CPU」我對圖表並不是很好，但我確實創建了一個更新的工作示例。

我想添加的是另外兩個量表，json數組名稱將是ram，帶寬。 因此，JSON看起來像這樣{"cpu":0,"ram":0,"bw":0}

我會怎麼去增加兩個儀表？

<div id='chart_div'></div> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 

var chart; 
var charts; 
var data; 

    google.load('visualization', '1', {packages:['gauge']}); 
    google.setOnLoadCallback(initChart); 

function displayData(point) { 

    data.setValue(0, 0, 'CPU'); 
    data.setValue(0, 1, point); 
    chart.draw(data, options); 

} 

function loadData() { 

    // variable for the data point 
    var c; 

    $.getJSON('http://example.com/json.php', function(data) { 

    // get the data point 
    c = data.cpu; 
      displayData(c); 


    }); 

} 

function initChart() { 

    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Value'); 
    data.addRows(1); 

     chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
     options = {width: 120, height: 120, greenFrom: 0, greenTo: 50, redFrom: 75, redTo: 100, 
      yellowFrom:50, yellowTo: 75, minorTicks: 5}; 

    loadData(); 

    setInterval('loadData()', 1000); 

} 

</script> 

Answer 1

如果你的數據在表格{"cpu":0,"ram":0,"bw":0}，那麼你可以將它添加到DataTable像這樣的厚度：

function initChart() { 
    var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
    var options = { 
     width: 120, 
     height: 120, 
     greenFrom: 0, 
     greenTo: 50, 
     redFrom: 75, 
     redTo: 100, 
     yellowFrom:50, 
     yellowTo: 75, 
     minorTicks: 5 
    }; 

    function drawGauge() { 
     $.getJSON('http://example.com/json.php', function(json) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Label'); 
      data.addColumn('number', 'Value'); 
      for (x in json) { 
       data.addRow([x, json[x]]); 
      } 
      chart.draw(data, options); 
     });   
    } 

    setInterval(drawGauge, 1000); 
} 
google.load('visualization', '1', {packages:['gauge'], callback: initChart});