dc.js

Class: NumberDisplay

NumberDisplay

A display of a single numeric value.

Unlike other charts, you do not need to set a dimension. Instead a group object must be provided and a valueAccessor that returns a single value.

If the group is a groupAll then its .value() will be displayed. This is the recommended usage.

However, if it is given an ordinary group, the numberDisplay will show the last bin's value, after sorting with the ordering function. numberDisplay defaults the ordering function to sorting by value, so this will display the largest value if the values are numeric.

new NumberDisplay(parent [, chartGroup])

Create a Number Display 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
// create a number display under #chart-container1 element using the default global chart group
var display1 = new NumberDisplay('#chart-container1');

Classes

NumberDisplay

Methods

ariaLiveRegion( [ariaLiveRegion])

If set, the Number Display widget will have its aria-live attribute set to 'polite' which will notify screen readers when the widget changes its value. Note that setting this method will also disable the default transition between the old and the new values. This is to avoid change notifications spoken out before the new value finishes re-drawing. It is also advisable to check if the widget has appropriately set accessibility description or label.

Parameters:
Name Type Argument Default Description
ariaLiveRegion Boolean <optional>
 false
Source:
Returns:
Type
Boolean | NumberDisplay

formatNumber( [formatter])

Get or set a function to format the value for the display.

Parameters:
Name Type Argument Default Description
formatter function <optional>
 d3.format('.2s')
Source:
See:
Returns:
Type
function | NumberDisplay

html( [html])

Gets or sets an optional object specifying HTML templates to use depending on the number displayed. The text %number will be replaced with the current value.

  • one: HTML template to use if the number is 1
  • zero: HTML template to use if the number is 0
  • some: HTML template to use otherwise
Parameters:
Name Type Argument Default Description
html Object <optional>
 {one: '', some: '', none: ''}
Source:
Returns:
Type
Object | NumberDisplay
Example
numberWidget.html({
     one:'%number record',
     some:'%number records',
     none:'no records'})

value()

Calculate and return the underlying value of the display.

Source:
Returns:
Type
Number