Google Charts: Creating Summary Charts After Category Filters Have Been Applied (+ Jsfiddle Issue)

I'm trying to figure out how to take an initial data table, apply multiple category filters to it, and illustrate a combination of simple and summary statistics of the resulting da

Solution 1:

To make this work, you have to aggregate the filtered data and use the aggregated data to draw your PieCharts. The Dashboards do not support this sort of relationship, so you have to cheat. Bind the BarChart to your Dashboard, but do not bind the PieCharts. Then set up a "ready" event handler for the BarChart that gets the filtered data, aggregates it, and draws the PieCharts with the aggregated data. Here's an example:

// use a "ready" event handler on the BarChart to aggregate the data for the PieCharts
google.visualization.events.addListener(barChart, 'ready', function () {
    // get the filtered data used to draw the BarChartvar dt = barChart.getDataTable();

    // group data by dark/lightvar darkLightGroup = google.visualization.data.group(dt, [{
        type: 'string',
        label: dt.getColumnLabel(2),
        column: 2,
        modifier: function (val) {
            returnval.split(' ')[0];
        }
    }], [{
        type: 'number',
        label: dt.getColumnLabel(2),
        column: 3,
        aggregation: google.visualization.data.sum
    }]);
    pieChartA.setDataTable(darkLightGroup);
    pieChartA.draw();

    // group data by colorvar colorGroup = google.visualization.data.group(dt, [{
        type: 'string',
        label: dt.getColumnLabel(2),
        column: 2,
        modifier: function (val) {
            returnval.split(' ')[1];
        }
    }], [{
        type: 'number',
        label: dt.getColumnLabel(2),
        column: 3,
        aggregation: google.visualization.data.sum
    }]);
    pieChartB.setDataTable(colorGroup);
    pieChartB.draw();
});

see it working here: http://jsfiddle.net/asgallant/7nLZ8/4/