CODEWITHSUNDEEP
chartsgoogle-visualization
doovers
doovers

Reputation: 8675

Google Visualization: Create Data View from Filtered Table

Is there an 'built in' way to create a data view from a dashboard table using only the visible rows? I want to know before I code an unnecessarily long winded alternative!

Edit:

I missed this in the Reference docs but it doesn't completely solve the problem since you still have to do some jiggery pokery to get the status of the active filters on the dash and pass them to the getFilteredRows() method.

You can use the getFilteredRows() method which "Returns the row indexes for rows that match all of the given filters. The indexes are returned in ascending order. The output of this method can be used as input to DataView.setRows()"

https://developers.google.com/chart/interactive/docs/reference#DataView

Upvotes: 3

Views: 2885

Answers (2)

doovers
doovers

Reputation: 8675

For the benefit of anyone who might find this useful, here is the how I solved my problem:

First, create an array of control states from dashboard

control_states = [ctrl1.getState(),ctrl2.getState(),ctrl3.getState()];

Next, create array of all selections for each control

var filteredrows = [ ];
var cnt = 0;
for (var i = 0; i < control_states.length; i++) {
  var picker_state = control_states[i]
  for (var j = 0; j < picker_state.selectedValues.length; j++) {
    filteredrows[cnt] = [ ];
    filteredrows[cnt]["column"] = i;
    filteredrows[cnt]["value"] = picker_state.selectedValues[j];
    cnt += 1;
  };
};

Create new dataview and pass filteredrows array to setRows method:

var filterdata = new google.visualization.DataView(data)
filterdata.setRows(
  filterdata.getFilteredRows(filteredrows)
);

Upvotes: 1

asgallant
asgallant

Reputation: 26340

The ChartWrapper object you need to wrap the Table in when using a Dashboard has a "view" parameter you can use to define the DataView you want to use for that chart:

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'myTableDiv',
    options: {
        // table options
    },
    view: {
        columns: [/* columns used for the view */]
    }
});

Upvotes: 2

Related Questions