谷歌图表多个仪表(Google Charts multiple gauges)

我使用谷歌图表和我想添加多个图表到一个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});

文章来源: Google Charts multiple gauges