Audience

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. It is recommended that you are familiar with the Visualizations API, DataTables, and the FilterDataTableControl before reading this document.

Introduction

The FilterColumnControl is a sub-component of the FilterDataTableControl. It is responsible for rendering a filter criteria for a column in a DataTable. The FilterDataTableControl can be customized by specifying custom FilterColumnControls. These can be generically associated with a data type or specifically with a particular column in the target DataTable.

Although they are not meant to be used outside of a parent control, FilterColumnControls follow the Visualization API, and can be loaded and operated on independently (see example below).

By: Hector Rovira for the Institute for Systems Biology (ISB)
This work was made possible by funding from "The Systems Approach to Immunity and Inflammation Contract" (HHSN272200700038C) from the National Institute of Allergy and Infectious Diseases (NIAID)

Example

    <div id="dataTableContainer">
    </div>
    <div id="stringFccContainer">
    </div>
    <div id="numberFccContainer">
    </div>
    <div id="booleanFccContainer">
    </div>

    <script type="text/javascript">
        google.load("prototype", "1.6.0.2");
        google.load("scriptaculous", "1.8.1");
        google.load("visualization", "1", {packages:["table", "linechart"]});
    </script>

    <script type="text/javascript">
        systemsbiology.load("visualization", "1.0", {packages:["filterDataTableControl"]});
    </script>
    <script type="text/javascript">
        var data = new google.visualization.DataTable();
        data.addColumn("string", "Name");
        data.addColumn("number", "Height");
        data.addColumn("number", "Age");
        data.addColumn("boolean", "Girl?");
        data.addRows(4);
        data.setCell(0, 0, "Hector");
        data.setCell(0, 1, 67);
        data.setCell(0, 2, 33);
        data.setCell(0, 3, false);
        data.setCell(1, 0, "Isola");
        data.setCell(1, 1, 30);
        data.setCell(1, 2, 3);
        data.setCell(1, 3, true);
        data.setCell(2, 0, "Mindy");
        data.setCell(2, 1, 64);
        data.setCell(2, 2, 33);
        data.setCell(2, 3, true);
        data.setCell(3, 0, "Jacek");
        data.setCell(3, 1, 25);
        data.setCell(3, 2, 1);
        data.setCell(3, 3, false);

        var tableA = new google.visualization.Table($("dataTableContainer"));
        tableA.draw(data);

        var stringFcc = new org.systemsbiology.visualization.SelectDistinctValuesStringFilterColumnControl($("stringFccContainer"));
        stringFcc.draw(data, {assignedColumnIndex:0});

        var numberFcc = new org.systemsbiology.visualization.SimpleOperatorNumberFilterColumnControl($("numberFccContainer"));
        numberFcc.draw(data, {assignedColumnIndex:2});

        var booleanFcc = new org.systemsbiology.visualization.SimpleChoiceBooleanFilterColumnControl($("booleanFccContainer"));
        booleanFcc.draw(data, {assignedColumnIndex:3});
        
        $("testFilters").onclick = function() {
            var passingRows = new Array();
            var appendOnPass = function(fcc, rowIndex, columnIndex) {
                if (fcc.isActive()) {
                    var value = data.getValue(rowIndex, columnIndex);
                    if (fcc.passes(value)) {
                        passingRows[passingRows.length] = rowIndex+1;
                    }
                }
            }

            for (var i = 0; i < data.getNumberOfRows(); i++) {
                appendOnPass(stringFcc, i, 0);
                appendOnPass(numberFcc, i, 2);
                appendOnPass(booleanFcc, i, 3);
            }
            alert("test filters passed: " + passingRows.uniq().sort().toString());
        }

        $("resetFilters").onclick = function() {
            stringFcc.resetFilter();
            numberFcc.resetFilter();
            booleanFcc.resetFilter();
        }
    </script>    

Data Table

Name Filter

Age Filter

Girl? Filter

Test Filters Reset Filters

Methods

Method	Return Type	Description
draw(data, options)	none	Draws the FilterColumnControl, drawing filter criteria inputs
isActive()	boolean	Indicates whether there is an active filter criteria; filter should not be evaluated if not active
passes(value)	boolean	Tests the value against the selection criteria and indicates if it passes or not
resetFilter()	none	Clears the FilterColumnControl filter criteria

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.

Custom Filter Column Controls

Note: Planning to release soon. Not yet implemented.

There will be two ways to include a custom FilterColumnControl in the FilterDataTableControl

• Register your custom implementation for all columns of a particular data type

  filterColumnControlsByDataType = {
         stringType: { impl: myCustomStringImpl, options: myStringOptions },
           dateType: { impl: myCustomDateImpl, options: myDateOptions },
       datetimeType: { impl: myCustomDateTimeImpl, options: myDateTimeOptions },
      timeofdayType: { impl: myCustomTimeofdayImpl, options: myTimeofdayOptions }
  }

• Register your custom implementation for a particular column

  filterColumnControlsByColumnIndex = {
      column_0: { impl: myCustomStringImpl, options: myStringOptions },
      column_1: { impl: myCustomDateImpl, options: myDateOptions },
      column_3: { impl: myCustomDateTimeImpl, options: myDateTimeOptions },
      column_5: { impl: myCustomTimeofdayImpl, options: myTimeofdayOptions }
  }