dc.js

Class: DataCount

DataCount

The data count widget is a simple widget designed to display the number of records selected by the current filters out of the total number of records in the data set. Once created the data count widget will automatically update the text content of child elements with the following classes:

  • .total-count - total number of records
  • .filter-count - number of records matched by the current filters

Note: this widget works best for the specific case of showing the number of records out of a total. If you want a more general-purpose numeric display, please use the NumberDisplay widget instead.

Examples:

new DataCount(parent [, chartGroup])

Create a Data Count widget.

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

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 ndx = crossfilter(data);
var all = ndx.groupAll();

new DataCount('.dc-data-count')
    .crossfilter(ndx)
    .groupAll(all);

Classes

DataCount

Methods

formatNumber( [formatter])

Gets or sets an optional function to format the filter count and total count.

Parameters:
Name Type Argument Default Description
formatter function <optional>
 d3.format('.2g')
Source:
See:
Returns:
Type
function | DataCount
Example
counter.formatNumber(d3.format('.2g'))

html( [options])

Gets or sets an optional object specifying HTML templates to use depending how many items are selected. The text %total-count will replaced with the total number of records, and the text %filter-count will be replaced with the number of selected records.

  • all: HTML template to use if all items are selected
  • some: HTML template to use if not all items are selected
Parameters:
Name Type Argument Description
options Object <optional>
Source:
Returns:
Type
Object | DataCount
Example
counter.html({
     some: '%filter-count out of %total-count records selected',
     all: 'All records selected. Click on charts to apply filters'
})