dc.js

Class: textFilterWidget

dc. textFilterWidget

new textFilterWidget(parent [, chartGroup])

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.

Parameters:
Name Type Argument Description
parent String | node | d3.selection | dc.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:
Returns:
Type
dc.textFilterWidget
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();
});

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

Members

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.

Source:
Example
// This is the default
function (query) {
    query = _normalize(query);
    return function (d) {
        return _normalize(d).indexOf(query) !== -1;
    };
};

normalize

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

Source:
Example
// This is the default
chart.normalize(function (s) {
  return s.toLowerCase();
});

placeHolder

Placeholder text in the search box.

Source:
Example
// This is the default
chart.placeHolder('type to filter');