谷歌图表多个仪表 [英] Google Charts multiple gauges

问题描述

图表样式是 gauge

我使用Google图表，并试图将多个图表添加到一个json调用中。 / code>。

下面的例子只适用于一个量表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）; 
 
 
 
函数loadData（）{
 
 //数据点的变量
 var c; 
 
 $ .getJSON（'http://example.com/json.php'，函数（数据）{
 
 //获取数据点
c = data.cpu; 
 displayData（c）; 
 
 
}）; 
 
 
 $ b函数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> 
  

解决方案

如果您的数据的格式为 {cpu：0，ram：0，bw：0} ，那么您可以将它添加到Gauge的DataTable中，如下所示：

 函数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 
}; 
 
函数drawGauge（）{
 $ .getJSON（'http://example.com/json.php'，函数（json）{
 var data = new google。可视化.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}）; 
  

I'm using Google Charts and I'm trying to add multiple charts to one json call.

The chart style is gauge.

The example below works for only one gauge "CPU" I'm not that great with the charts but I did create a working example that updates.

What I want to add is two more gauges and the json array names would be ram,bandwidth. So the json would look something like this {"cpu":0,"ram":0,"bw":0}

How would I go about adding two more gauges?

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

解决方案

If your data is in the form {"cpu":0,"ram":0,"bw":0}, then you can add it to the DataTable for the Gauges like this:

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

这篇关于谷歌图表多个仪表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！