dc.js

Class: numberDisplay

dc. numberDisplay

new numberDisplay(parent [, chartGroup])

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.

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:
Returns:
Type
dc.numberDisplay
Example
// create a number display under #chart-container1 element using the default global chart group
var display1 = dc.numberDisplay('#chart-container1');

Methods

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 | dc.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 | dc.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