Add StringFilter dashboard controls to Table Visualisation header

[Dan]

I'm using the Java Data Source library to connect to a number of mssql database and a mysql database. Now I've got this working I would like to display this data in a Table visualisation and use the StringFilter controls on it. It would be nice if you could:

a) generate the stringfilters automatically for each column in the Table Visualisation

b) add a row above or below the column header which contained the stringfilter, allowing the dashboard to be integrated into the visualisation. 

I would add this feature request to http://code.google.com/p/google-visualization-api-issues/issues/list but page does not seem to be available at the moment.

Also a quick question how does the table visualisation handle a large number of columns (i.e. scroll bar or paging). I notice that you can do row paging, is it possible to do column paging?

Thanks,

Dan

[Riccardo Govoni]

I would consider the following:

a) if you have access to the DataTable that powers the Table visualization, you can iterate through its columns and create a StringFilter instance for each column. That is, you can automate the creation of StringFilter instances and dashboard assembly. Something like:

var dataTable = ...

var stringFilters = [];

for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {

  stringFilters.push(new google.visualization.ControlWrapper({

    controlType: 'StringFilter',

    ...

    options: { filterColumnIndex: i , ... }

   });

}

var dashboard = new google.visualization.Dashboard();

dashboard.bind(stringFilters, table);

dashboard.draw(dataTable);

b) The StringFilter only requires you to specify its container element. You are free to visually arrange such containers as you prefer (including placing them above the table headers). Placing them inside the visualization (below the table headers) might prove a little trickier, since the table visualization does not allow this kind of customization for the output it produces.

Also, the table uses horizontal scrollbars if you have set an explicit width and the number of columns exceeds that. You have some control over it via options like scrollLeftStartPosition.

[Dan]

Thanks Riccardo, that worked well. Still not sure about positioning, as ideally I would like the stringfilters to lineup with the columns in the table visualisation. Without the knowing the width of the columns in the visualisation you cannot make them lineup. Thats why some sort of integration of the visualisation and dashboard would be nice.

If you also want to autogenerate string filters for every column in the table this is what I used:

var qcData = response.getDataTable(); 

// Create the dashboard. 

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

var stringFilters = []; 

for (var i = 0; i < qcData.getNumberOfColumns(); i++) {

   stringFilters.push(new google.visualization.ControlWrapper({ 

       controlType: 'StringFilter',

       'containerId': 'filter_div'+i, 

       'options': {

           'filterColumnIndex': i,

           'ui': {'label': ""}

       }

       })) 

       var divTag = document.createElement("div");

       divTag.id = "filter_div"+i;

       document.body.appendChild(divTag);

 }

[Riccardo Govoni]

Yes, I understand that. As a workaround, you can try artificially changing the width of the stringfilters to match the one of their corresponding column via CSS. You'd have to listen for the table 'ready' event. When it fires, use javascript to extract the width of each column and then assign the same width to the corresponding stringfilter.

/R.