Question

我有Water Usage Sample Google Spreadsheet 月，日，时间，用法和< em> Gallons 列。

我想使用月过滤器，日过滤器，使用过滤器，柱形图<来构建仪表板和饼图。默认情况下（没有选择过滤器），我希望柱形图按月显示加仑总和，并显示饼图以显示总使用细分。

如果在月过滤 r中选择了特定月份，我希望柱形图显示该月内每天的加仑总和以及饼图以显示使用情况那个月的细分。如果在月过滤器和日过滤器中选择了特定月份和日期，那么我希望柱形图显示每个“加仑”按月/日输入，饼图显示该月/日的使用明细。如果在使用过滤器中选择了特定用法，我希望柱形图以与前面描述相同的方式运行，同时仅为该特定用途分解数据。饼图显然只显示100％的使用量。

以下是我一直在努力的fiddle。

google.load('visualization', '1.1', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1oQTmYteohmVxiBReIyh_tRuOLIx6CXwgw0MuNw5jTTw/gviz/tq?sheet=Sheet1&headers=1&range=A1:E2000', opts);

// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {

if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var data = response.getDataTable();

var columnData = google.visualization.data.group(data, [{
    column: 1,
    type: 'date'
}], [{
    column: 4,
    label: 'Gallons',
    aggregation: google.visualization.data.sum,
    type: 'number'
}]);

 var pieData = google.visualization.data.group(data, [{
    column: 3,
    type: 'date'
}], [{
    column: 4,
    label: 'Gallons',
    aggregation: google.visualization.data.sum,
    type: 'number'
}]);

// Set chart options
var options = {
    'title': 'WaterUsage',
        'width': 400,
        'height': 300
};

// Instantiate and draw our chart, passing in some options.
var columnChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
columnChart.draw(columnData, options);

var pieChart = new google.visualization.PieChart(document.getElementById('chart_div2'));
pieChart.draw(pieData, options);

这主要源于此thread。有什么想法吗？

在Google可视化中添加过滤器并绘制结果图表

0 个答案: