dc.js

Class: TextFilterWidget

TextFilterWidget

Text Filter Widget

The text filter widget is a simple widget designed to display an input field allowing to filter data that matches the text typed. As opposed to the other charts, this doesn't display any result and doesn't update its display, it's just to input an filter other charts.

new TextFilterWidget(parent [, chartGroup])

Create Text Filter widget

Parameters:
Name Type Argument Description
parent String | node | d3.selection | CompositeChart

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:
Example
var data = [{"firstName":"John","lastName":"Coltrane"}{"firstName":"Miles",lastName:"Davis"}]
var ndx = crossfilter(data);
var dimension = ndx.dimension(function(d) {
    return d.lastName.toLowerCase() + ' ' + d.firstName.toLowerCase();
});

new TextFilterWidget('#search')
    .dimension(dimension);
    // you don't need the group() function

Classes

TextFilterWidget

Methods

filterFunctionFactory( [filterFunctionFactory])

This function will be called with the search text, it needs to return a function that will be used to filter the data. The default function checks presence of the search text.

Parameters:
Name Type Argument Description
filterFunctionFactory function <optional>
Source:
Returns:
Type
TextFilterWidget | function
Example
// This is the default
function (query) {
    query = _normalize(query);
    return function (d) {
        return _normalize(d).indexOf(query) !== -1;
    };
};

normalize( [normalize])

This function will be called on values before calling the filter function.

Parameters:
Name Type Argument Description
normalize function <optional>
Source:
Returns:
Type
TextFilterWidget | function
Example
// This is the default
chart.normalize(function (s) {
  return s.toLowerCase();
});

placeHolder( [placeHolder])

Placeholder text in the search box.

Parameters:
Name Type Argument Default Description
placeHolder function <optional>
 'search'
Source:
Returns:
Type
TextFilterWidget | string
Example
// This is the default
chart.placeHolder('type to filter');