Google 차트 여러 개의 계기

Question

Google 차트를 사용하고 있으며 하나의 json 통화에 여러 차트를 추가하려고합니다.

차트 스타일은 gauge입니다.

아래의 예는 차트가 그다지 좋지 않지만 단 한 개의 계기 "CPU"에 대해서만 작동하지만 업데이트 된 작동 예제를 만들었습니다.

내가 추가하고자하는 것은 두 개의 게이지이며 json 배열 이름은 ram, bandwidth입니다. 그러면 json은 다음과 같이 보일 것입니다. {"cpu":0,"ram":0,"bw":0}

두 개의 게이지를 더 추가하려면 어떻게해야합니까? 데이터 양식 {"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

, 다음과 같이 게이지의 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});