Using getFilteredRows in a ChartWrapper with other Control Filters

[mkanalyst_Dale]

I'm putting together a dashboard and trying to do something that
should be straight-forward. There will be Control Filters to operate
at the dashboard level, but I also need to specify some additional
filters (static, not through a control) to just a single chart. The
method for getFilteredRows seems to be the answer but it is not
working.

I've mocked up the example that Google has in the Code Playground to
try to get this to work. In this case, I'm trying to have the Pie
chart only show those that are 20 years or older.

(link to Google Code Playground:
http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard)

Code I'm trying:
------------------------------------------------------------------------------------------------------
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);

// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});

// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});

// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts
Eaten)
// from the 'data' DataTable.
'view': {
'columns': [0,3],
'rows': [
{
'calc': function(data) {
return data.getFilteredRows({column: 2, minValue: 20});
},
'type': 'number'
}]
}
});

// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});

// Create a dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the
category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
------------------------------------------------------------------------------------------------------


The only thing I've changed from the original example is adding to the
'view' section of the Pie Chart.

any thoughts?

[asgallant]

Calculated columns don't work that way.  I'm not 100% certain of this, but I think you want to use an intermediary numberRangeFilter to control the pie chart.  Something like this, perhaps:

var intermediary = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'hidden_div',
    options: {
        filterColumnLabel: 'Age',
        minValue: 20
    }
});

// create the other controls + dashboard

// bind slider to table and intermediary control
dashboard.bind([slider], [table, intermediary]);
// bind intermediary to pie
dashboard.bind([intermediary], [pie]);
// bind categoryPicker to pie and table
dashboard.bind([categoryPicker], [pie, table]);

// hide the intermediary control once the chart is drawn
google.visualization.events.addListener(dashboard, 'ready', function () {
    document.getElementById('hidden_div').style.display = 'none';
}); 

You might be able to bind the categoryPicker control directly to the intermediary control, I'm not sure.

[mkanalyst_Dale]

Nice work around... I'll give that a try.

> >http://code.google.com/apis/ajax/playground/?type=visualization#full_...)
>
> > Code I'm trying:
> > --------------------------------------------------------------------------- ---------------------------