Google Charts à plusieurs jauges

Question

J'utilise des graphiques Google et j'essaie d'ajouter plusieurs graphiques à un appel JSON.

Le style de graphique est gauge.

L'exemple ci-dessous ne fonctionne que pour une seule jauge "CPU" Je ne suis pas très bon avec les graphiques mais j'ai créé un exemple de travail qui se met à jour. Ce que je veux ajouter est deux jauges supplémentaires et les noms de tableau json seraient ram, bande passante. Donc le json ressemblerait à ceci {"cpu":0,"ram":0,"bw":0}

Comment pourrais-je ajouter deux jauges de plus?

<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

Si vos données sont sous la forme {"cpu":0,"ram":0,"bw":0}, vous pouvez l'ajouter à la DataTable pour les jauges comme celui-ci:

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});