汇总谷歌图表中的分组/过滤数据

时间:2014-06-06 12:48:45

标签: javascript google-visualization

我是网络工具和javascript的新手。所以请原谅一些noob问题。

我使用外部数据使用Google Visualization信息中心。我有一个CategoryFilter控件并显示表,柱形图和摘要表。

postthis post的帮助以及用户@jmac@asgallant回答的大量查询后,我能够走到这一步,并以此为例 - { {3}}

代码:

google.visualization.events.addListener(proxyTable, 'ready', function () {
var group = google.visualization.data.group(proxyTable.getDataTable(), [{
// we need a key column to group on, but since we want all rows grouped     into 1, 
// then it needs a constant value
column: 0,
type: 'number',
modifier: function () {
return 1;
}
}], [{
// get the Avg GDP
column: 19,
type: 'number',
aggregation: google.visualization.data.avg
}, 
{
// get the Max Population
column: 9,
type: 'number',
aggregation: google.visualization.data.max
}, 
{
// get the # of -ve growth years
column: 21,
type: 'number',
aggregation: google.visualization.data.count
}]);

document.getElementById('AvgGDP').innerHTML = group.getValue(0, 1);
document.getElementById('Population').innerHTML = group.getValue(0, 2);
document.getElementById('GDPGrowth').innerHTML = group.getValue(0, 3);
});

// var formatter = new google.visualization.NumberFormat({pattern: '#,###'});
// formatter.format(Population, 0); // Apply formatter to second column

问题:

Summary

Q1。如您所见,摘要表是不守规矩的。人口领域数量众多,难以阅读。同样,平均GDP的小数也太多了。我无法格式化字段。如果我使用此代码,则图表根本不会显示!

    var formatter = new google.visualization.NumberFormat({pattern: '#,###'});
    formatter.format(Population, 0); // Apply formatter to second column

如何使用格式化功能?我在这里做错了什么?

Q2。我想显示负增长的数量。如何在第21列中获得计算负值的条件?

Q3。如何使用数学函数计算(第19列的平均值)*(第21列的总和)?

Q4。我无法在Google图表表格中填写摘要。因此使用了引导表。有人可以指导我如何使用汇总值填充表格吗?但这并不重要。

提前多多感谢。

1 个答案:

答案 0 :(得分:2)

格式化工具适用于DataTables,因此在这种情况下,您需要在DataTable formatter.format上调用group,而不是Population

formatter.format(group, 0);

然后在检索数据时,如果您想要格式化的值,请调用getFormattedValue方法而不是getValue方法:

document.getElementById('AvgGDP').innerHTML = group.getFormattedValue(0, 1);

计算负值将需要自定义聚合函数,如下所示:

{
    // get the # of -ve growth years
    column: 21,
    type: 'number',
    aggregation: function (values) {
        var count = 0;
        for (var i = 0; i < values.length; i++) {
            if (values[i] < 0) {
                count++;
            }
        }
        return count;
    }
}

要一起回答最后两个部分,您应该能够基于DataTable group创建一个表,并使用ChartWrapper对象的view参数来计算您的产品:

var summaryTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'summaryDiv',
    dataTable: group,
    options: {
        // summary table options
    }
    view: {
        columns: [1, 2, 3, {
            type: 'number',
            label: 'column label',
            calc: function (dt, row) {
                var val = dt.getValue(row, 1) * dt.getValue(row, 3);
                return {v: val, f: formatter.formatValue(val)};
            }
        }]
    }
});
summary.draw();