1

Google Charts を使用しており、1 つの json 呼び出しに複数のグラフを追加しようとしています。

グラフのスタイルはgauge.

以下の例は、1 つのゲージ「CPU」でのみ機能します。私はグラフが得意ではありませんが、更新する実際の例を作成しました。

追加したいのはさらに 2 つのゲージであり、json 配列の名前は ram,bandwidth になります。したがって、jsonは次のようになります{"cpu":0,"ram":0,"bw":0}

さらに 2 つのゲージを追加するにはどうすればよいですか?

<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>
4

1 に答える 1

2

データがフォームの場合{"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});
于 2013-08-27T23:51:37.523 に答える