Classes
- Logger
Provides basis logging and deprecation utilities
- Config
General configuration
- ChartRegistry
The ChartRegistry maintains sets of all instantiated dc.js charts under named groups and the default group. There is a single global ChartRegistry object named
chartRegistry
A chart group often corresponds to a crossfilter instance. It specifies the set of charts which should be updated when a filter changes on one of the charts or when the global functions filterAll, refocusAll, renderAll, redrawAll, or chart functions baseMixin.renderGroup, baseMixin.redrawGroup are called.
- BarChart
Concrete bar chart/histogram implementation.
Examples:
- BoxPlot
A box plot is a chart that depicts numerical data via their quartile ranges.
Examples:
- BubbleChart
A concrete implementation of a general purpose bubble chart that allows data visualization using the following dimensions:
- x axis position
- y axis position
- bubble radius
- color
Examples:
- BubbleOverlay
The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the typical x and y positioning while retaining the capability to visualize data using bubble radius and coloring.
Examples:
- CboxMenu
The CboxMenu is a simple widget designed to filter a dimension by selecting option(s) from a set of HTML
<input />
elements. The menu can be made into a set of radio buttons (single select) or checkboxes (multiple).- CompositeChart
Composite charts are a special kind of chart that render multiple charts on the same Coordinate Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to achieve some quite flexible charting effects.
- 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:
- DataGrid
Data grid is a simple widget designed to list the filtered records, providing a simple way to define how the items are displayed.
Note: Formerly the data grid chart (and data table) used the group attribute as a keying function for nesting the data together in sections. This was confusing so it has been renamed to
section
, althoughgroup
still works.Examples:
- DataTable
The data table is a simple widget designed to list crossfilter focused data set (rows being filtered) in a good old tabular fashion.
An interesting feature of the data table is that you can pass a crossfilter group to the
dimension
, if you want to show aggregated data instead of raw data rows. This requires no special code as long as you specify the order asd3.descending
, since the data table will usedimension.top()
to fetch the data in that case, and the method is equally supported on the crossfilter group as the crossfilter dimension.If you want to display aggregated data in ascending order, you will need to wrap the group in a fake dimension to support the
.bottom()
method. See the example linked below for more details.Note: Formerly the data table (and data grid chart) used the group attribute as a keying function for nesting the data together in sections. This was confusing so it has been renamed to
section
, althoughgroup
still works. Examples:- GeoChoroplethChart
The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map from GeoJson data. This chart implementation was inspired by the great d3 choropleth example.
Examples:
- HeatMap
A heat map is matrix that represents the values of two dimensions of data using colors.
- HtmlLegend
htmlLegend is a attachable widget that can be added to other dc charts to render horizontal/vertical legend labels.
- Legend
Legend is a attachable widget that can be added to other dc charts to render horizontal legend labels.
Examples:
- LineChart
Concrete line/area chart implementation.
Examples:
- 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 theordering
function to sorting by value, so this will display the largest value if the values are numeric.- PieChart
The pie chart implementation is usually used to visualize a small categorical distribution. The pie chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.
Examples:
- RowChart
Concrete row chart implementation.
Examples:
- ScatterPlot
A scatter plot chart
Examples:
- SelectMenu
The select menu is a simple widget designed to filter a dimension by selecting an option from an HTML
<select/>
menu. The menu can be optionally turned into a multiselect.- SeriesChart
A series chart is a chart that shows multiple series of data overlaid on one chart, where the series is specified in the data. It is a specialization of Composite Chart and inherits all composite features other than recomposing the chart.
Examples:
- SunburstChart
The sunburst chart implementation is usually used to visualize a small tree distribution. The sunburst chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.
The keys used in the sunburst chart should be arrays, representing paths in the tree.
When filtering, the sunburst chart creates instances of HierarchyFilter.
- 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.
Mixins
- BaseMixin
BaseMixin
is an abstract functional object representing a basicdc
chart object for all chart and widget implementations. Methods from the BaseMixin are inherited and available on all chart implementations in thedc
library.- ColorMixin ⇒
ColorMixin
The Color Mixin is an abstract chart functional class providing universal coloring support as a mix-in for any concrete chart implementation.
- BubbleMixin ⇒
BubbleMixin
This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
- CapMixin ⇒
CapMixin
Cap is a mixin that groups small data elements below a cap into an others grouping for both the Row and Pie Charts.
The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest will be replaced with an others element, with value equal to the sum of the replaced values. The keys of the elements below the cap limit are recorded in order to filter by those keys when the others* element is clicked.
- MarginMixin ⇒
MarginMixin
Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid Charts.
- CoordinateGridMixin
Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based concrete chart types, e.g. bar chart, line chart, and bubble chart.
- StackMixin
Stack Mixin is an mixin that provides cross-chart support of stackability using d3.stack.
Objects
- filters :
object
The dc.js filters are functions which are passed into crossfilter to chose which records will be accumulated to produce values for the charts. In the crossfilter model, any filters applied on one dimension will affect all the other dimensions but not that one. dc always applies a filter function to the dimension; the function combines multiple filters and if any of them accept a record, it is filtered in.
These filter constructors are used as appropriate by the various charts to implement brushing. We mention below which chart uses which filter. In some cases, many instances of a filter will be added.
Each of the dc.js filters is an object with the following properties:
isFiltered
- a function that returns true if a value is within the filterfilterType
- a string identifying the filter, here the name of the constructor
Currently these filter objects are also arrays, but this is not a requirement. Custom filters can be used as long as they have the properties above.
- utils :
object
- printers :
object
- units :
object
Functions
- registerChart(chart, [group]) ⇒
undefined
Add given chart instance to the given group, creating the group if necessary. If no group is provided, the default group
constants.DEFAULT_CHART_GROUP
will be used.- deregisterChart(chart, [group]) ⇒
undefined
Remove given chart instance from the given group, creating the group if necessary. If no group is provided, the default group
constants.DEFAULT_CHART_GROUP
will be used.- hasChart(chart) ⇒
Boolean
Determine if a given chart instance resides in any group in the registry.
- deregisterAllCharts(group) ⇒
undefined
Clear given group if one is provided, otherwise clears all groups.
- filterAll([group]) ⇒
undefined
Clear all filters on all charts within the given chart group. If the chart group is not given then only charts that belong to the default chart group will be reset.
- refocusAll([group]) ⇒
undefined
Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is not given then only charts that belong to the default chart group will be reset.
- renderAll([group]) ⇒
undefined
Re-render all charts belong to the given chart group. If the chart group is not given then only charts that belong to the default chart group will be re-rendered.
- redrawAll([group]) ⇒
undefined
Redraw all charts belong to the given chart group. If the chart group is not given then only charts that belong to the default chart group will be re-drawn. Redraw is different from re-render since when redrawing dc tries to update the graphic incrementally, using transitions, instead of starting from scratch.
- transition(selection, [duration], [delay], [name]) ⇒
d3.transition
|d3.selection
Start a transition on a selection if transitions are globally enabled (disableTransitions is false) and the duration is greater than zero; otherwise return the selection. Since most operations are the same on a d3 selection and a d3 transition, this allows a common code path for both cases.
- pluck(n, [f]) ⇒
function
Returns a function that given a string property name, can be used to pluck the property off an object. A function can be passed as the second argument to also alter the data being returned.
This can be a useful shorthand method to create accessor functions.
Logger
Provides basis logging and deprecation utilities
Kind: global class
logger.enableDebugLog
Enable debug level logging. Set to false
by default.
Kind: instance property of Logger
Logger
logger.warn([msg]) ⇒ Put a warning message to console
Kind: instance method of Logger
Param | Type |
---|---|
[msg] | String |
Example
logger.warn('Invalid use of .tension on CurveLinear');
Logger
logger.warnOnce([msg]) ⇒ Put a warning message to console. It will warn only on unique messages.
Kind: instance method of Logger
Param | Type |
---|---|
[msg] | String |
Example
logger.warnOnce('Invalid use of .tension on CurveLinear');
Logger
logger.debug([msg]) ⇒ Put a debug message to console. It is controlled by logger.enableDebugLog
Kind: instance method of Logger
Param | Type |
---|---|
[msg] | String |
Example
logger.debug('Total number of slices: ' + numSlices);
Config
General configuration
Kind: global class
- Config
- .dateFormat :
function
- .disableTransitions :
Boolean
- .defaultColors([colors]) ⇒
Array
|config
- .dateFormat :
function
config.dateFormat : The default date format for dc.js
Kind: instance property of Config
Default: d3.timeFormat('%m/%d/%Y')
Boolean
config.disableTransitions : If this boolean is set truthy, all transitions will be disabled, and changes to the charts will happen immediately.
Kind: instance property of Config
Default: false
Array
| config
config.defaultColors([colors]) ⇒ Set the default color scheme for ordinal charts. Changing it will impact all ordinal charts.
By default it is set to a copy of
d3.schemeCategory20c
for backward compatibility. This color scheme has been
removed from D3v5.
In DC 3.1 release it will change to a more appropriate default.
Kind: instance method of Config
Param | Type |
---|---|
[colors] | Array |
Example
config.defaultColors(d3.schemeSet1)
ChartRegistry
The ChartRegistry maintains sets of all instantiated dc.js charts under named groups
and the default group. There is a single global ChartRegistry object named chartRegistry
A chart group often corresponds to a crossfilter instance. It specifies the set of charts which should be updated when a filter changes on one of the charts or when the global functions filterAll, refocusAll, renderAll, redrawAll, or chart functions baseMixin.renderGroup, baseMixin.redrawGroup are called.
Kind: global class
- ChartRegistry
- .has(chart) ⇒
Boolean
- .register(chart, [group]) ⇒
undefined
- .deregister(chart, [group]) ⇒
undefined
- .clear(group) ⇒
undefined
- .list([group]) ⇒
Array.<Object>
- .has(chart) ⇒
Boolean
chartRegistry.has(chart) ⇒ Determine if a given chart instance resides in any group in the registry.
Kind: instance method of ChartRegistry
Param | Type | Description |
---|---|---|
chart | Object |
dc.js chart instance |
undefined
chartRegistry.register(chart, [group]) ⇒ Add given chart instance to the given group, creating the group if necessary.
If no group is provided, the default group constants.DEFAULT_CHART_GROUP
will be used.
Kind: instance method of ChartRegistry
Param | Type | Description |
---|---|---|
chart | Object |
dc.js chart instance |
[group] | String |
Group name |
undefined
chartRegistry.deregister(chart, [group]) ⇒ Remove given chart instance from the given group, creating the group if necessary.
If no group is provided, the default group constants.DEFAULT_CHART_GROUP
will be used.
Kind: instance method of ChartRegistry
Param | Type | Description |
---|---|---|
chart | Object |
dc.js chart instance |
[group] | String |
Group name |
undefined
chartRegistry.clear(group) ⇒ Clear given group if one is provided, otherwise clears all groups.
Kind: instance method of ChartRegistry
Param | Type | Description |
---|---|---|
group | String |
Group name |
Array.<Object>
chartRegistry.list([group]) ⇒ Get an array of each chart instance in the given group. If no group is provided, the charts in the default group are returned.
Kind: instance method of ChartRegistry
Param | Type | Description |
---|---|---|
[group] | String |
Group name |
BarChart
Concrete bar chart/histogram implementation.
Examples:
Kind: global class
Mixes: StackMixin
- BarChart
- new BarChart(parent, [chartGroup])
- .outerPadding([padding]) ⇒
Number
|BarChart
- .centerBar([centerBar]) ⇒
Boolean
|BarChart
- .barPadding([barPadding]) ⇒
Number
|BarChart
- .gap([gap]) ⇒
Number
|BarChart
- .alwaysUseRounding([alwaysUseRounding]) ⇒
Boolean
|BarChart
new BarChart(parent, [chartGroup])
Create a Bar Chart
Param | Type | 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. If the bar chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead. |
[chartGroup] | String |
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. |
Example
// create a bar chart under #chart-container1 element using the default global chart group
var chart1 = new BarChart('#chart-container1');
// create a bar chart under #chart-container2 element using chart group A
var chart2 = new BarChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new BarChart(compositeChart);
Number
| BarChart
barChart.outerPadding([padding]) ⇒ Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
Will pad the width by padding * barWidth
on each side of the chart.
Kind: instance method of BarChart
Param | Type | Default |
---|---|---|
[padding] | Number |
0.5 |
Boolean
| BarChart
barChart.centerBar([centerBar]) ⇒ Whether the bar chart will render each bar centered around the data position on the x-axis.
Kind: instance method of BarChart
Param | Type | Default |
---|---|---|
[centerBar] | Boolean |
false |
Number
| BarChart
barChart.barPadding([barPadding]) ⇒ Get or set the spacing between bars as a fraction of bar size. Valid values are between 0-1. Setting this value will also remove any previously set gap. See the d3 docs for a visual description of how the padding is applied.
Kind: instance method of BarChart
Param | Type | Default |
---|---|---|
[barPadding] | Number |
0 |
Number
| BarChart
barChart.gap([gap]) ⇒ Manually set fixed gap (in px) between bars instead of relying on the default auto-generated gap. By default the bar chart implementation will calculate and set the gap automatically based on the number of data points and the length of the x axis.
Kind: instance method of BarChart
Param | Type | Default |
---|---|---|
[gap] | Number |
2 |
Boolean
| BarChart
barChart.alwaysUseRounding([alwaysUseRounding]) ⇒ Set or get whether rounding is enabled when bars are centered. If false, using rounding with centered bars will result in a warning and rounding will be ignored. This flag has no effect if bars are not centered. When using standard d3.js rounding methods, the brush often doesn't align correctly with centered bars since the bars are offset. The rounding function must add an offset to compensate, such as in the following example.
Kind: instance method of BarChart
Param | Type | Default |
---|---|---|
[alwaysUseRounding] | Boolean |
false |
Example
chart.round(function(n) { return Math.floor(n) + 0.5; });
BoxPlot
A box plot is a chart that depicts numerical data via their quartile ranges.
Examples:
Kind: global class
Mixes: CoordinateGridMixin
- BoxPlot
- new BoxPlot(parent, [chartGroup])
- .boxPadding([padding]) ⇒
Number
|BoxPlot
- .outerPadding([padding]) ⇒
Number
|BoxPlot
- .boxWidth([boxWidth]) ⇒
Number
|function
|BoxPlot
- .tickFormat([tickFormat]) ⇒
Number
|function
|BoxPlot
- .yRangePadding([yRangePadding]) ⇒
Number
|function
|BoxPlot
- .renderDataPoints([show]) ⇒
Boolean
|BoxPlot
- .dataOpacity([opacity]) ⇒
Number
|BoxPlot
- .dataWidthPortion([percentage]) ⇒
Number
|BoxPlot
- .showOutliers([show]) ⇒
Boolean
|BoxPlot
- .boldOutlier([show]) ⇒
Boolean
|BoxPlot
new BoxPlot(parent, [chartGroup])
Create a Box Plot.
Param | Type | 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 |
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. |
Example
// create a box plot under #chart-container1 element using the default global chart group
var boxPlot1 = new BoxPlot('#chart-container1');
// create a box plot under #chart-container2 element using chart group A
var boxPlot2 = new BoxPlot('#chart-container2', 'chartGroupA');
Number
| BoxPlot
boxPlot.boxPadding([padding]) ⇒ Get or set the spacing between boxes as a fraction of box size. Valid values are within 0-1. See the d3 docs for a visual description of how the padding is applied.
Kind: instance method of BoxPlot
See: d3.scaleBand
Param | Type | Default |
---|---|---|
[padding] | Number |
0.8 |
Number
| BoxPlot
boxPlot.outerPadding([padding]) ⇒ Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts
or on charts with a custom .boxWidth. Will pad the width by
padding * barWidth
on each side of the chart.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[padding] | Number |
0.5 |
Number
| function
| BoxPlot
boxPlot.boxWidth([boxWidth]) ⇒ Get or set the numerical width of the boxplot box. The width may also be a function taking as parameters the chart width excluding the right and left margins, as well as the number of x units.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[boxWidth] | Number | function |
0.5 |
Example
// Using numerical parameter
chart.boxWidth(10);
// Using function
chart.boxWidth((innerChartWidth, xUnits) { ... });
Number
| function
| BoxPlot
boxPlot.tickFormat([tickFormat]) ⇒ Get or set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to integer formatting.
Kind: instance method of BoxPlot
Param | Type |
---|---|
[tickFormat] | function |
Example
// format ticks to 2 decimal places
chart.tickFormat(d3.format('.2f'));
Number
| function
| BoxPlot
boxPlot.yRangePadding([yRangePadding]) ⇒ Get or set the amount of padding to add, in pixel coordinates, to the top and bottom of the chart to accommodate box/whisker labels.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[yRangePadding] | function |
8 |
Example
// allow more space for a bigger whisker font
chart.yRangePadding(12);
Boolean
| BoxPlot
boxPlot.renderDataPoints([show]) ⇒ Get or set whether individual data points will be rendered.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[show] | Boolean |
false |
Example
// Enable rendering of individual data points
chart.renderDataPoints(true);
Number
| BoxPlot
boxPlot.dataOpacity([opacity]) ⇒ Get or set the opacity when rendering data.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[opacity] | Number |
0.3 |
Example
// If individual data points are rendered increase the opacity.
chart.dataOpacity(0.7);
Number
| BoxPlot
boxPlot.dataWidthPortion([percentage]) ⇒ Get or set the portion of the width of the box to show data points.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[percentage] | Number |
0.8 |
Example
// If individual data points are rendered increase the data box.
chart.dataWidthPortion(0.9);
Boolean
| BoxPlot
boxPlot.showOutliers([show]) ⇒ Get or set whether outliers will be rendered.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[show] | Boolean |
true |
Example
// Disable rendering of outliers
chart.showOutliers(false);
Boolean
| BoxPlot
boxPlot.boldOutlier([show]) ⇒ Get or set whether outliers will be drawn bold.
Kind: instance method of BoxPlot
Param | Type | Default |
---|---|---|
[show] | Boolean |
false |
Example
// If outliers are rendered display as bold
chart.boldOutlier(true);
BubbleChart
A concrete implementation of a general purpose bubble chart that allows data visualization using the following dimensions:
- x axis position
- y axis position
- bubble radius
- color
Examples:
Kind: global class
Mixes: BubbleMixin
, CoordinateGridMixin
new BubbleChart(parent, [chartGroup])
Create a Bubble Chart.
Param | Type | 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 |
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. |
Example
// create a bubble chart under #chart-container1 element using the default global chart group
var bubbleChart1 = new BubbleChart('#chart-container1');
// create a bubble chart under #chart-container2 element using chart group A
var bubbleChart2 = new BubbleChart('#chart-container2', 'chartGroupA');
Boolean
| BubbleChart
bubbleChart.sortBubbleSize([sortBubbleSize]) ⇒ Turn on or off the bubble sorting feature, or return the value of the flag. If enabled, bubbles will be sorted by their radius, with smaller bubbles in front.
Kind: instance method of BubbleChart
Param | Type | Default |
---|---|---|
[sortBubbleSize] | Boolean |
false |
BubbleOverlay
The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the typical x and y positioning while retaining the capability to visualize data using bubble radius and coloring.
Examples:
Kind: global class
Mixes: BubbleMixin
, BaseMixin
new BubbleOverlay(parent, [chartGroup])
Create a Bubble Overlay.
Param | Type | 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 |
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. |
Example
// create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
var bubbleChart1 = BubbleOverlayChart('#chart-container1').svg(d3.select('#chart-container1 svg'));
// create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
var bubbleChart2 = new CompositeChart('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
BubbleOverlay
bubbleOverlay._g ⇒ mandatory
Set the underlying svg image element. Unlike other dc charts this chart will not generate a svg element; therefore the bubble overlay chart will not work if this function is not invoked. If the underlying image is a bitmap, then an empty svg will need to be created on top of the image.
Kind: instance property of BubbleOverlay
Param | Type |
---|---|
[imageElement] | SVGElement | d3.selection |
Example
// set up underlying svg element
chart.svg(d3.select('#chart svg'));
BubbleOverlay
bubbleOverlay.point(name, x, y) ⇒ mandatory
Set up a data point on the overlay. The name of a data point should match a specific 'key' among data groups generated using keyAccessor. If a match is found (point name <-> data group key) then a bubble will be generated at the position specified by the function. x and y value specified here are relative to the underlying svg.
Kind: instance method of BubbleOverlay
Param | Type |
---|---|
name | String |
x | Number |
y | Number |
CboxMenu
The CboxMenu is a simple widget designed to filter a dimension by
selecting option(s) from a set of HTML <input />
elements. The menu can be
made into a set of radio buttons (single select) or checkboxes (multiple).
Kind: global class
Mixes: BaseMixin
- CboxMenu
- new CboxMenu(parent, [chartGroup])
- .order([order]) ⇒
function
|CboxMenu
- .promptText([promptText]) ⇒
String
|CboxMenu
- .filterDisplayed([filterDisplayed]) ⇒
function
|CboxMenu
- .multiple([multiple]) ⇒
Boolean
|CboxMenu
- .promptValue([promptValue]) ⇒
*
|CboxMenu
new CboxMenu(parent, [chartGroup])
Create a Cbox Menu.
Param | Type | 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 |
The name of the chart group this widget should be placed in. Interaction with the widget will only trigger events and redraws within its group. |
Example
// create a cboxMenu under #cbox-container using the default global chart group
var cbox = new CboxMenu('#cbox-container')
.dimension(states)
.group(stateGroup);
// the option text can be set via the title() function
// by default the option text is '`key`: `value`'
cbox.title(function (d){
return 'STATE: ' + d.key;
})
function
| CboxMenu
cboxMenu.order([order]) ⇒ Get or set the function that controls the ordering of option tags in the cbox menu. By default options are ordered by the group key in ascending order.
Kind: instance method of CboxMenu
Param | Type |
---|---|
[order] | function |
Example
// order by the group's value
chart.order(function (a,b) {
return a.value > b.value ? 1 : b.value > a.value ? -1 : 0;
});
String
| CboxMenu
cboxMenu.promptText([promptText]) ⇒ Get or set the text displayed in the options used to prompt selection.
Kind: instance method of CboxMenu
Param | Type | Default |
---|---|---|
[promptText] | String |
'Select all' |
Example
chart.promptText('All states');
function
| CboxMenu
cboxMenu.filterDisplayed([filterDisplayed]) ⇒ Get or set the function that filters options prior to display. By default options with a value of < 1 are not displayed.
Kind: instance method of CboxMenu
Param | Type |
---|---|
[filterDisplayed] | function |
Example
// display all options override the `filterDisplayed` function:
chart.filterDisplayed(function () {
return true;
});
Boolean
| CboxMenu
cboxMenu.multiple([multiple]) ⇒ Controls the type of input element. Setting it to true converts
the HTML input
tags from radio buttons to checkboxes.
Kind: instance method of CboxMenu
Param | Type | Default |
---|---|---|
[multiple] | boolean |
false |
Example
chart.multiple(true);
*
| CboxMenu
cboxMenu.promptValue([promptValue]) ⇒ Controls the default value to be used for
dimension.filter
when only the prompt value is selected. If null
(the default), no filtering will occur when
just the prompt is selected.
Kind: instance method of CboxMenu
Param | Type | Default |
---|---|---|
[promptValue] | * |
|
CompositeChart
Composite charts are a special kind of chart that render multiple charts on the same Coordinate Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to achieve some quite flexible charting effects.
Kind: global class
Mixes: CoordinateGridMixin
- CompositeChart
- new CompositeChart(parent, [chartGroup])
- .useRightAxisGridLines([useRightAxisGridLines]) ⇒
Boolean
|CompositeChart
- .childOptions([childOptions]) ⇒
Object
|CompositeChart
- .rightYAxisLabel([rightYAxisLabel], [padding]) ⇒
String
|CompositeChart
- .compose([subChartArray]) ⇒
CompositeChart
- .children() ⇒
Array.<BaseMixin>
- .shareColors([shareColors]) ⇒
Boolean
|CompositeChart
- .shareTitle([shareTitle]) ⇒
Boolean
|CompositeChart
- .rightY([yScale]) ⇒
d3.scale
|CompositeChart
- .alignYAxes([alignYAxes]) ⇒
Chart
- .rightYAxis([rightYAxis]) ⇒
d3.axisRight
|CompositeChart
new CompositeChart(parent, [chartGroup])
Create a Composite Chart.
Param | Type | 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 |
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. |
Example
// create a composite chart under #chart-container1 element using the default global chart group
var compositeChart1 = new CompositeChart('#chart-container1');
// create a composite chart under #chart-container2 element using chart group A
var compositeChart2 = new CompositeChart('#chart-container2', 'chartGroupA');
Boolean
| CompositeChart
compositeChart.useRightAxisGridLines([useRightAxisGridLines]) ⇒ Get or set whether to draw gridlines from the right y axis. Drawing from the left y axis is the default behavior. This option is only respected when subcharts with both left and right y-axes are present.
Kind: instance method of CompositeChart
Param | Type | Default |
---|---|---|
[useRightAxisGridLines] | Boolean |
false |
Object
| CompositeChart
compositeChart.childOptions([childOptions]) ⇒ Get or set chart-specific options for all child charts. This is equivalent to calling .options on each child chart.
Kind: instance method of CompositeChart
Param | Type |
---|---|
[childOptions] | Object |
String
| CompositeChart
compositeChart.rightYAxisLabel([rightYAxisLabel], [padding]) ⇒ Set or get the right y axis label.
Kind: instance method of CompositeChart
Param | Type |
---|---|
[rightYAxisLabel] | String |
[padding] | Number |
CompositeChart
compositeChart.compose([subChartArray]) ⇒ Combine the given charts into one single composite coordinate grid chart.
Kind: instance method of CompositeChart
Param | Type |
---|---|
[subChartArray] | Array.<Chart> |
Example
moveChart.compose([
// when creating sub-chart you need to pass in the parent chart
new LineChart(moveChart)
.group(indexAvgByMonthGroup) // if group is missing then parent's group will be used
.valueAccessor(function (d){return d.value.avg;})
// most of the normal functions will continue to work in a composed chart
.renderArea(true)
.stack(monthlyMoveGroup, function (d){return d.value;})
.title(function (d){
var value = d.value.avg?d.value.avg:d.value;
if(isNaN(value)) value = 0;
return dateFormat(d.key) + '\n' + numberFormat(value);
}),
new BarChart(moveChart)
.group(volumeByMonthGroup)
.centerBar(true)
]);
Array.<BaseMixin>
compositeChart.children() ⇒ Returns the child charts which are composed into the composite chart.
Kind: instance method of CompositeChart
Boolean
| CompositeChart
compositeChart.shareColors([shareColors]) ⇒ Get or set color sharing for the chart. If set, the .colors() value from this chart will be shared with composed children. Additionally if the child chart implements Stackable and has not set a custom .colorAccessor, then it will generate a color specific to its order in the composition.
Kind: instance method of CompositeChart
Param | Type | Default |
---|---|---|
[shareColors] | Boolean |
false |
Boolean
| CompositeChart
compositeChart.shareTitle([shareTitle]) ⇒ Get or set title sharing for the chart. If set, the .title() value from this chart will be shared with composed children.
Note: currently you must call this before compose
or the child will still get the parent's
title
function!
Kind: instance method of CompositeChart
Param | Type | Default |
---|---|---|
[shareTitle] | Boolean |
true |
d3.scale
| CompositeChart
compositeChart.rightY([yScale]) ⇒ Get or set the y scale for the right axis. The right y scale is typically automatically generated by the chart implementation.
Kind: instance method of CompositeChart
See: d3.scale
Param | Type |
---|---|
[yScale] | d3.scale |
Chart
compositeChart.alignYAxes([alignYAxes]) ⇒ Get or set alignment between left and right y axes. A line connecting '0' on both y axis will be parallel to x axis. This only has effect when elasticY is true.
Kind: instance method of CompositeChart
Param | Type | Default |
---|---|---|
[alignYAxes] | Boolean |
false |
d3.axisRight
| CompositeChart
compositeChart.rightYAxis([rightYAxis]) ⇒ Set or get the right y axis used by the composite chart. This function is most useful when y axis customization is required. The y axis in dc.js is an instance of a d3.axisRight therefore it supports any valid d3 axis manipulation.
Caution: The right y axis is usually generated internally by dc; resetting it may cause
unexpected results. Note also that when used as a getter, this function is not chainable: it
returns the axis, not the chart,
so attempting to call chart functions after calling .yAxis()
will fail.
Kind: instance method of CompositeChart
See: https://github.com/d3/d3-axis/blob/master/README.md#axisRight
Param | Type |
---|---|
[rightYAxis] | d3.axisRight |
Example
// customize y axis tick format
chart.rightYAxis().tickFormat(function (v) {return v + '%';});
// customize y axis tick values
chart.rightYAxis().tickValues([0, 100, 200, 300]);
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:
Kind: global class
Mixes: BaseMixin
- DataCount
- new DataCount(parent, [chartGroup])
- .html([options]) ⇒
Object
|DataCount
- .formatNumber([formatter]) ⇒
function
|DataCount
new DataCount(parent, [chartGroup])
Create a Data Count widget.
Param | Type | 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 |
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. |
Example
var ndx = crossfilter(data);
var all = ndx.groupAll();
new DataCount('.dc-data-count')
.crossfilter(ndx)
.groupAll(all);
Object
| DataCount
dataCount.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
Kind: instance method of DataCount
Param | Type |
---|---|
[options] | Object |
Example
counter.html({
some: '%filter-count out of %total-count records selected',
all: 'All records selected. Click on charts to apply filters'
})
function
| DataCount
dataCount.formatNumber([formatter]) ⇒ Gets or sets an optional function to format the filter count and total count.
Kind: instance method of DataCount
See: d3.format
Param | Type | Default |
---|---|---|
[formatter] | function |
d3.format('.2g') |
Example
counter.formatNumber(d3.format('.2g'))
DataGrid
Data grid is a simple widget designed to list the filtered records, providing a simple way to define how the items are displayed.
Note: Formerly the data grid chart (and data table) used the group attribute as a
keying function for nesting the data
together in sections. This was confusing so it has been renamed to section
, although group
still works.
Examples:
Kind: global class
Mixes: BaseMixin
- DataGrid
- new DataGrid(parent, [chartGroup])
- .section(section) ⇒
function
|DataGrid
- .group(section) ⇒
function
|DataGrid
- .beginSlice([beginSlice]) ⇒
Number
|DataGrid
- .endSlice([endSlice]) ⇒
Number
|DataGrid
- .size([size]) ⇒
Number
|DataGrid
- .html([html]) ⇒
function
|DataGrid
- .htmlSection([htmlSection]) ⇒
function
|DataGrid
- .htmlGroup([htmlSection]) ⇒
function
|DataGrid
- .sortBy([sortByFunction]) ⇒
function
|DataGrid
- .order([order]) ⇒
function
|DataGrid
new DataGrid(parent, [chartGroup])
Create a Data Grid.
Param | Type | 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 |
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. |
function
| DataGrid
dataGrid.section(section) ⇒ Get or set the section function for the data grid. The section function takes a data row and returns the key to specify to d3.nest to split rows into sections.
Do not pass in a crossfilter section as this will not work.
Kind: instance method of DataGrid
Param | Type | Description |
---|---|---|
section | function |
Function taking a row of data and returning the nest key. |
Example
// section rows by the value of their field
chart
.section(function(d) { return d.field; })
function
| DataGrid
dataGrid.group(section) ⇒ Backward-compatible synonym for section.
Kind: instance method of DataGrid
Param | Type | Description |
---|---|---|
section | function |
Function taking a row of data and returning the nest key. |
Number
| DataGrid
dataGrid.beginSlice([beginSlice]) ⇒ Get or set the index of the beginning slice which determines which entries get displayed by the widget. Useful when implementing pagination.
Kind: instance method of DataGrid
Param | Type | Default |
---|---|---|
[beginSlice] | Number |
0 |
Number
| DataGrid
dataGrid.endSlice([endSlice]) ⇒ Get or set the index of the end slice which determines which entries get displayed by the widget. Useful when implementing pagination.
Kind: instance method of DataGrid
Param | Type |
---|---|
[endSlice] | Number |
Number
| DataGrid
dataGrid.size([size]) ⇒ Get or set the grid size which determines the number of items displayed by the widget.
Kind: instance method of DataGrid
Param | Type | Default |
---|---|---|
[size] | Number |
999 |
function
| DataGrid
dataGrid.html([html]) ⇒ Get or set the function that formats an item. The data grid widget uses a function to generate dynamic html. Use your favourite templating engine or generate the string directly.
Kind: instance method of DataGrid
Param | Type |
---|---|
[html] | function |
Example
chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'</div>';});
function
| DataGrid
dataGrid.htmlSection([htmlSection]) ⇒ Get or set the function that formats a section label.
Kind: instance method of DataGrid
Param | Type |
---|---|
[htmlSection] | function |
Example
chart.htmlSection (function (d) { return '<h2>'.d.key . 'with ' . d.values.length .' items</h2>'});
function
| DataGrid
dataGrid.htmlGroup([htmlSection]) ⇒ Backward-compatible synonym for htmlSection.
Kind: instance method of DataGrid
Param | Type |
---|---|
[htmlSection] | function |
function
| DataGrid
dataGrid.sortBy([sortByFunction]) ⇒ Get or set sort-by function. This function works as a value accessor at the item level and returns a particular field to be sorted.
Kind: instance method of DataGrid
Param | Type |
---|---|
[sortByFunction] | function |
Example
chart.sortBy(function(d) {
return d.date;
});
function
| DataGrid
dataGrid.order([order]) ⇒ Get or set sort the order function.
Kind: instance method of DataGrid
See
Param | Type | Default |
---|---|---|
[order] | function |
d3.ascending |
Example
chart.order(d3.descending);
DataTable
The data table is a simple widget designed to list crossfilter focused data set (rows being filtered) in a good old tabular fashion.
An interesting feature of the data table is that you can pass a crossfilter group to the
dimension
, if you want to show aggregated data instead of raw data rows. This requires no
special code as long as you specify the order as d3.descending
,
since the data table will use dimension.top()
to fetch the data in that case, and the method is
equally supported on the crossfilter group as the crossfilter dimension.
If you want to display aggregated data in ascending order, you will need to wrap the group
in a fake dimension to support the
.bottom()
method. See the example linked below for more details.
Note: Formerly the data table (and data grid chart) used the group attribute as a
keying function for nesting the data
together in sections. This was confusing so it has been renamed to section
, although group
still works.
Examples:
Kind: global class
Mixes: BaseMixin
- DataTable
- new DataTable(parent, [chartGroup])
- .section(section) ⇒
function
|DataTable
- .group(section) ⇒
function
|DataTable
- .size([size]) ⇒
Number
|DataTable
- .beginSlice([beginSlice]) ⇒
Number
|DataTable
- .endSlice([endSlice]) ⇒
Number
|DataTable
- .columns([columns]) ⇒
Array.<function()>
- .sortBy([sortBy]) ⇒
function
|DataTable
- .order([order]) ⇒
function
|DataTable
- .showSections([showSections]) ⇒
Boolean
|DataTable
- .showGroups([showSections]) ⇒
Boolean
|DataTable
new DataTable(parent, [chartGroup])
Create a Data Table.
Param | Type | 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 |
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. |
function
| DataTable
dataTable.section(section) ⇒ Get or set the section function for the data table. The section function takes a data row and returns the key to specify to d3.nest to split rows into sections. By default there will be only one section with no name.
Set showSections to false to hide the section headers
Kind: instance method of DataTable
Param | Type | Description |
---|---|---|
section | function |
Function taking a row of data and returning the nest key. |
Example
// section rows by the value of their field
chart
.section(function(d) { return d.field; })
function
| DataTable
dataTable.group(section) ⇒ Backward-compatible synonym for section.
Kind: instance method of DataTable
Param | Type | Description |
---|---|---|
section | function |
Function taking a row of data and returning the nest key. |
Number
| DataTable
dataTable.size([size]) ⇒ Get or set the table size which determines the number of rows displayed by the widget.
Kind: instance method of DataTable
Param | Type | Default |
---|---|---|
[size] | Number |
25 |
Number
| DataTable
dataTable.beginSlice([beginSlice]) ⇒ Get or set the index of the beginning slice which determines which entries get displayed by the widget. Useful when implementing pagination.
Note: the sortBy function will determine how the rows are ordered for pagination purposes.
See the table pagination example
to see how to implement the pagination user interface using beginSlice
and endSlice
.
Kind: instance method of DataTable
Param | Type | Default |
---|---|---|
[beginSlice] | Number |
0 |
Number
| DataTable
dataTable.endSlice([endSlice]) ⇒ Get or set the index of the end slice which determines which entries get displayed by the
widget. Useful when implementing pagination. See beginSlice
for more information.
Kind: instance method of DataTable
Param | Type |
---|---|
[endSlice] | Number | undefined |
Array.<function()>
dataTable.columns([columns]) ⇒ Get or set column functions. The data table widget supports several methods of specifying the columns to display.
The original method uses an array of functions to generate dynamic columns. Column functions
are simple javascript functions with only one input argument d
which represents a row in
the data set. The return value of these functions will be used to generate the content for
each cell. However, this method requires the HTML for the table to have a fixed set of column
headers.
chart.columns([
function(d) { return d.date; },
function(d) { return d.open; },
function(d) { return d.close; },
function(d) { return numberFormat(d.close - d.open); },
function(d) { return d.volume; }
]);
In the second method, you can list the columns to read from the data without specifying it as
a function, except where necessary (ie, computed columns). Note the data element name is
capitalized when displayed in the table header. You can also mix in functions as necessary,
using the third {label, format}
form, as shown below.
chart.columns([
"date", // d["date"], ie, a field accessor; capitalized automatically
"open", // ...
"close", // ...
{
label: "Change",
format: function (d) {
return numberFormat(d.close - d.open);
}
},
"volume" // d["volume"], ie, a field accessor; capitalized automatically
]);
In the third example, we specify all fields using the {label, format}
method:
chart.columns([
{
label: "Date",
format: function (d) { return d.date; }
},
{
label: "Open",
format: function (d) { return numberFormat(d.open); }
},
{
label: "Close",
format: function (d) { return numberFormat(d.close); }
},
{
label: "Change",
format: function (d) { return numberFormat(d.close - d.open); }
},
{
label: "Volume",
format: function (d) { return d.volume; }
}
]);
You may wish to override the dataTable functions _doColumnHeaderCapitalize
and
_doColumnHeaderFnToString
, which are used internally to translate the column information or
function into a displayed header. The first one is used on the "string" column specifier; the
second is used to transform a stringified function into something displayable. For the Stock
example, the function for Change becomes the table header d.close - d.open.
Finally, you can even specify a completely different form of column definition. To do this,
override _chart._doColumnHeaderFormat
and _chart._doColumnValueFormat
Be aware that
fields without numberFormat specification will be displayed just as they are stored in the
data, unformatted.
Kind: instance method of DataTable
Returns: Array.<function()>
- |DataTable}
Param | Type | Default |
---|---|---|
[columns] | Array.<function()> |
[] |
function
| DataTable
dataTable.sortBy([sortBy]) ⇒ Get or set sort-by function. This function works as a value accessor at row level and returns a particular field to be sorted by.
Kind: instance method of DataTable
Param | Type | Default |
---|---|---|
[sortBy] | function |
identity function |
Example
chart.sortBy(function(d) {
return d.date;
});
function
| DataTable
dataTable.order([order]) ⇒ Get or set sort order. If the order is d3.ascending
, the data table will use
dimension().bottom()
to fetch the data; otherwise it will use dimension().top()
Kind: instance method of DataTable
See
Param | Type | Default |
---|---|---|
[order] | function |
d3.ascending |
Example
chart.order(d3.descending);
Boolean
| DataTable
dataTable.showSections([showSections]) ⇒ Get or set if section header rows will be shown.
Kind: instance method of DataTable
Param | Type | Default |
---|---|---|
[showSections] | Boolean |
true |
Example
chart
.section([value], [name])
.showSections(true|false);
Boolean
| DataTable
dataTable.showGroups([showSections]) ⇒ Backward-compatible synonym for showSections.
Kind: instance method of DataTable
Param | Type | Default |
---|---|---|
[showSections] | Boolean |
true |
GeoChoroplethChart
The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map from GeoJson data. This chart implementation was inspired by the great d3 choropleth example.
Examples:
Kind: global class
Mixes: ColorMixin
, BaseMixin
- GeoChoroplethChart
- new GeoChoroplethChart(parent, [chartGroup])
- .overlayGeoJson(json, name, keyAccessor) ⇒
GeoChoroplethChart
- .projection([projection]) ⇒
d3.projection
|GeoChoroplethChart
- .geoJsons() ⇒
Array.<{name:String, data: Object, accessor: function()}>
- .geoPath() ⇒
d3.geoPath
- .removeGeoJson(name) ⇒
GeoChoroplethChart
new GeoChoroplethChart(parent, [chartGroup])
Create a Geo Choropleth Chart.
Param | Type | 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 |
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. |
Example
// create a choropleth chart under '#us-chart' element using the default global chart group
var chart1 = new GeoChoroplethChart('#us-chart');
// create a choropleth chart under '#us-chart2' element using chart group A
var chart2 = new CompositeChart('#us-chart2', 'chartGroupA');
GeoChoroplethChart
geoChoroplethChart.overlayGeoJson(json, name, keyAccessor) ⇒ mandatory
Use this function to insert a new GeoJson map layer. This function can be invoked multiple times if you have multiple GeoJson data layers to render on top of each other. If you overlay multiple layers with the same name the new overlay will override the existing one.
Kind: instance method of GeoChoroplethChart
See
Param | Type | Description |
---|---|---|
json | _geoJson |
a geojson feed |
name | String |
name of the layer |
keyAccessor | function |
accessor function used to extract 'key' from the GeoJson data. The key extracted by this function should match the keys returned by the crossfilter groups. |
Example
// insert a layer for rendering US states
chart.overlayGeoJson(statesJson.features, 'state', function(d) {
return d.properties.name;
});
d3.projection
| GeoChoroplethChart
geoChoroplethChart.projection([projection]) ⇒ Gets or sets a custom geo projection function. See the available d3 geo projection functions.
Starting version 3.0 it has been deprecated to rely on the default projection being
d3.geoAlbersUsa(). Please
set it explicitly. Considering that null
is also a valid value for projection, if you need
projection to be null
please set it explicitly to null
.
Kind: instance method of GeoChoroplethChart
See
Param | Type | Default |
---|---|---|
[projection] | d3.projection |
d3.geoAlbersUsa() |
Array.<{name:String, data: Object, accessor: function()}>
geoChoroplethChart.geoJsons() ⇒ Returns all GeoJson layers currently registered with this chart. The returned array is a reference to this chart's internal data structure, so any modification to this array will also modify this chart's internal registration.
Kind: instance method of GeoChoroplethChart
d3.geoPath
geoChoroplethChart.geoPath() ⇒ Returns the d3.geoPath object used to render the projection and features. Can be useful for figuring out the bounding box of the feature set and thus a way to calculate scale and translation for the projection.
Kind: instance method of GeoChoroplethChart
See: d3.geoPath
GeoChoroplethChart
geoChoroplethChart.removeGeoJson(name) ⇒ Remove a GeoJson layer from this chart by name
Kind: instance method of GeoChoroplethChart
Param | Type |
---|---|
name | String |
HeatMap
A heat map is matrix that represents the values of two dimensions of data using colors.
Kind: global class
Mixes: ColorMixin
, MarginMixin
, BaseMixin
- HeatMap
- new HeatMap(parent, [chartGroup])
- .colsLabel([labelFunction]) ⇒
function
|HeatMap
- .rowsLabel([labelFunction]) ⇒
function
|HeatMap
- .rows([rows]) ⇒
Array.<(String|Number)>
|HeatMap
- .rowOrdering([rowOrdering]) ⇒
function
|HeatMap
- .cols([cols]) ⇒
Array.<(String|Number)>
|HeatMap
- .colOrdering([colOrdering]) ⇒
function
|HeatMap
- .boxOnClick([handler]) ⇒
function
|HeatMap
- .xAxisOnClick([handler]) ⇒
function
|HeatMap
- .yAxisOnClick([handler]) ⇒
function
|HeatMap
- .xBorderRadius([xBorderRadius]) ⇒
Number
|HeatMap
- .yBorderRadius([yBorderRadius]) ⇒
Number
|HeatMap
new HeatMap(parent, [chartGroup])
Create a Heat Map
Param | Type | 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 |
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. |
Example
// create a heat map under #chart-container1 element using the default global chart group
var heatMap1 = new HeatMap('#chart-container1');
// create a heat map under #chart-container2 element using chart group A
var heatMap2 = new HeatMap('#chart-container2', 'chartGroupA');
function
| HeatMap
heatMap.colsLabel([labelFunction]) ⇒ Set or get the column label function. The chart class uses this function to render column labels on the X axis. It is passed the column name.
Kind: instance method of HeatMap
Param | Type | Default |
---|---|---|
[labelFunction] | function |
function(d) { return d; } |
Example
// the default label function just returns the name
chart.colsLabel(function(d) { return d; });
function
| HeatMap
heatMap.rowsLabel([labelFunction]) ⇒ Set or get the row label function. The chart class uses this function to render row labels on the Y axis. It is passed the row name.
Kind: instance method of HeatMap
Param | Type | Default |
---|---|---|
[labelFunction] | function |
function(d) { return d; } |
Example
// the default label function just returns the name
chart.rowsLabel(function(d) { return d; });
Array.<(String|Number)>
| HeatMap
heatMap.rows([rows]) ⇒ Gets or sets the values used to create the rows of the heatmap, as an array. By default, all the values will be fetched from the data using the value accessor.
Kind: instance method of HeatMap
Param | Type |
---|---|
[rows] | Array.<(String|Number)> |
function
| HeatMap
heatMap.rowOrdering([rowOrdering]) ⇒ Get or set a comparator to order the rows. Default is d3.ascending.
Kind: instance method of HeatMap
Param | Type |
---|---|
[rowOrdering] | function |
Array.<(String|Number)>
| HeatMap
heatMap.cols([cols]) ⇒ Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all the values will be fetched from the data using the key accessor.
Kind: instance method of HeatMap
Param | Type |
---|---|
[cols] | Array.<(String|Number)> |
function
| HeatMap
heatMap.colOrdering([colOrdering]) ⇒ Get or set a comparator to order the columns. Default is d3.ascending.
Kind: instance method of HeatMap
Param | Type |
---|---|
[colOrdering] | function |
function
| HeatMap
heatMap.boxOnClick([handler]) ⇒ Gets or sets the handler that fires when an individual cell is clicked in the heatmap. By default, filtering of the cell will be toggled.
Kind: instance method of HeatMap
Param | Type |
---|---|
[handler] | function |
Example
// default box on click handler
chart.boxOnClick(function (d) {
var filter = d.key;
events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
});
function
| HeatMap
heatMap.xAxisOnClick([handler]) ⇒ Gets or sets the handler that fires when a column tick is clicked in the x axis. By default, if any cells in the column are unselected, the whole column will be selected, otherwise the whole column will be unselected.
Kind: instance method of HeatMap
Param | Type |
---|---|
[handler] | function |
function
| HeatMap
heatMap.yAxisOnClick([handler]) ⇒ Gets or sets the handler that fires when a row tick is clicked in the y axis. By default, if any cells in the row are unselected, the whole row will be selected, otherwise the whole row will be unselected.
Kind: instance method of HeatMap
Param | Type |
---|---|
[handler] | function |
Number
| HeatMap
heatMap.xBorderRadius([xBorderRadius]) ⇒ Gets or sets the X border radius. Set to 0 to get full rectangles.
Kind: instance method of HeatMap
Param | Type | Default |
---|---|---|
[xBorderRadius] | Number |
6.75 |
Number
| HeatMap
heatMap.yBorderRadius([yBorderRadius]) ⇒ Gets or sets the Y border radius. Set to 0 to get full rectangles.
Kind: instance method of HeatMap
Param | Type | Default |
---|---|---|
[yBorderRadius] | Number |
6.75 |
HtmlLegend
htmlLegend is a attachable widget that can be added to other dc charts to render horizontal/vertical legend labels.
Kind: global class
- HtmlLegend
- .container([container]) ⇒
String
|HtmlLegend
- .legendItemClass([legendItemClass]) ⇒
String
|HtmlLegend
- .highlightSelected([highlightSelected]) ⇒
String
|HtmlLegend
- .horizontal([horizontal]) ⇒
String
|HtmlLegend
- .legendText([legendText]) ⇒
function
|HtmlLegend
- .maxItems([maxItems]) ⇒
HtmlLegend
- .keyboardAccessible([keyboardAccessible]) ⇒
Boolean
|HtmlLegend
- .container([container]) ⇒
String
| HtmlLegend
htmlLegend.container([container]) ⇒ Set the container selector for the legend widget. Required.
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[container] | String |
String
| HtmlLegend
htmlLegend.legendItemClass([legendItemClass]) ⇒ This can be optionally used to override class for legenditem and just use this class style. This is helpful for overriding the style of a particular chart rather than overriding the style for all charts.
Setting this will disable the highlighting of selected items also.
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[legendItemClass] | String |
String
| HtmlLegend
htmlLegend.highlightSelected([highlightSelected]) ⇒ This can be optionally used to enable highlighting legends for the selections/filters for the chart.
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[highlightSelected] | String |
String
| HtmlLegend
htmlLegend.horizontal([horizontal]) ⇒ Display the legend horizontally instead of vertically
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[horizontal] | String |
function
| HtmlLegend
htmlLegend.legendText([legendText]) ⇒ Set or get the legend text function. The legend widget uses this function to render the legend text for each item. If no function is specified the legend widget will display the names associated with each group.
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[legendText] | function |
Example
// default legendText
legend.legendText(pluck('name'))
// create numbered legend items
chart.legend(new HtmlLegend().legendText(function(d, i) { return i + '. ' + d.name; }))
// create legend displaying group counts
chart.legend(new HtmlLegend().legendText(function(d) { return d.name + ': ' d.data; }))
HtmlLegend
htmlLegend.maxItems([maxItems]) ⇒ Maximum number of legend items to display
Kind: instance method of HtmlLegend
Param | Type |
---|---|
[maxItems] | Number |
Boolean
| HtmlLegend
htmlLegend.keyboardAccessible([keyboardAccessible]) ⇒ If set, individual legend items will be focusable from keyboard and on pressing Enter or Space will behave as if clicked on.
If svgDescription
on the parent chart has not been explicitly set, will also set the default
SVG description text to the class constructor name, like BarChart or HeatMap, and make the entire
SVG focusable.
Kind: instance method of HtmlLegend
Param | Type | Default |
---|---|---|
[keyboardAccessible] | Boolean |
false |
Legend
Legend is a attachable widget that can be added to other dc charts to render horizontal legend labels.
Examples:
Kind: global class
- Legend
- .x([x]) ⇒
Number
|Legend
- .y([y]) ⇒
Number
|Legend
- .gap([gap]) ⇒
Number
|Legend
- .highlightSelected([highlightSelected]) ⇒
String
|dc.legend
- .itemHeight([itemHeight]) ⇒
Number
|Legend
- .horizontal([horizontal]) ⇒
Boolean
|Legend
- .legendWidth([legendWidth]) ⇒
Number
|Legend
- .itemWidth([itemWidth]) ⇒
Number
|Legend
- .autoItemWidth([autoItemWidth]) ⇒
Boolean
|Legend
- .legendText([legendText]) ⇒
function
|Legend
- .maxItems([maxItems]) ⇒
Legend
- .keyboardAccessible([keyboardAccessible]) ⇒
Boolean
|Legend
- .x([x]) ⇒
Number
| Legend
legend.x([x]) ⇒ Set or get x coordinate for legend widget.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[x] | Number |
0 |
Number
| Legend
legend.y([y]) ⇒ Set or get y coordinate for legend widget.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[y] | Number |
0 |
Number
| Legend
legend.gap([gap]) ⇒ Set or get gap between legend items.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[gap] | Number |
5 |
String
| dc.legend
legend.highlightSelected([highlightSelected]) ⇒ This can be optionally used to enable highlighting legends for the selections/filters for the chart.
Kind: instance method of Legend
Param | Type |
---|---|
[highlightSelected] | String |
Number
| Legend
legend.itemHeight([itemHeight]) ⇒ Set or get legend item height.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[itemHeight] | Number |
12 |
Boolean
| Legend
legend.horizontal([horizontal]) ⇒ Position legend horizontally instead of vertically.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[horizontal] | Boolean |
false |
Number
| Legend
legend.legendWidth([legendWidth]) ⇒ Maximum width for horizontal legend.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[legendWidth] | Number |
500 |
Number
| Legend
legend.itemWidth([itemWidth]) ⇒ Legend item width for horizontal legend.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[itemWidth] | Number |
70 |
Boolean
| Legend
legend.autoItemWidth([autoItemWidth]) ⇒ Turn automatic width for legend items on or off. If true, itemWidth is ignored. This setting takes into account the gap.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[autoItemWidth] | Boolean |
false |
function
| Legend
legend.legendText([legendText]) ⇒ Set or get the legend text function. The legend widget uses this function to render the legend text for each item. If no function is specified the legend widget will display the names associated with each group.
Kind: instance method of Legend
Param | Type |
---|---|
[legendText] | function |
Example
// default legendText
legend.legendText(pluck('name'))
// create numbered legend items
chart.legend(new Legend().legendText(function(d, i) { return i + '. ' + d.name; }))
// create legend displaying group counts
chart.legend(new Legend().legendText(function(d) { return d.name + ': ' d.data; }))
Legend
legend.maxItems([maxItems]) ⇒ Maximum number of legend items to display
Kind: instance method of Legend
Param | Type |
---|---|
[maxItems] | Number |
Boolean
| Legend
legend.keyboardAccessible([keyboardAccessible]) ⇒ If set, individual legend items will be focusable from keyboard and on pressing Enter or Space will behave as if clicked on.
If svgDescription
on the parent chart has not been explicitly set, will also set the default
SVG description text to the class constructor name, like BarChart or HeatMap, and make the entire
SVG focusable.
Kind: instance method of Legend
Param | Type | Default |
---|---|---|
[keyboardAccessible] | Boolean |
false |
LineChart
Concrete line/area chart implementation.
Examples:
Kind: global class
Mixes: StackMixin
, CoordinateGridMixin
- LineChart
- new LineChart(parent, [chartGroup])
- .curve([curve]) ⇒
d3.curve
|LineChart
.interpolate([interpolate]) ⇒d3.curve
|LineChart
.tension([tension]) ⇒Number
|LineChart
- .defined([defined]) ⇒
function
|LineChart
- .dashStyle([dashStyle]) ⇒
Array.<Number>
|LineChart
- .renderArea([renderArea]) ⇒
Boolean
|LineChart
- .xyTipsOn([xyTipsOn]) ⇒
Boolean
|LineChart
- .dotRadius([dotRadius]) ⇒
Number
|LineChart
- .renderDataPoints([options]) ⇒
Object
|LineChart
new LineChart(parent, [chartGroup])
Create a Line Chart.
Param | Type | 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. If the line chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead. |
[chartGroup] | String |
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. |
Example
// create a line chart under #chart-container1 element using the default global chart group
var chart1 = new LineChart('#chart-container1');
// create a line chart under #chart-container2 element using chart group A
var chart2 = new LineChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new LineChart(compositeChart);
d3.curve
| LineChart
lineChart.curve([curve]) ⇒ Gets or sets the curve factory to use for lines and areas drawn, allowing e.g. step functions, splines, and cubic interpolation. Typically you would use one of the interpolator functions provided by d3 curves.
Replaces the use of interpolate and tension in dc.js < 3.0
This is passed to line.curve and area.curve.
Kind: instance method of LineChart
See
Param | Type | Default |
---|---|---|
[curve] | d3.curve |
d3.curveLinear |
Example
// default
chart
.curve(d3.curveLinear);
// Add tension to curves that support it
chart
.curve(d3.curveCardinal.tension(0.5));
// You can use some specialized variation like
// https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline
chart
.curve(d3.curveCatmullRom.alpha(0.5));
lineChart.interpolate([interpolate]) ⇒ d3.curve
| LineChart
d3.curve
| LineChart
Deprecated
Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step functions, splines, and cubic interpolation.
Possible values are: 'linear', 'linear-closed', 'step', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', and 'monotone'.
This function exists for backward compatibility. Use curve
which is generic and provides more options.
Value set through .curve
takes precedence over .interpolate
and .tension
.
Kind: instance method of LineChart
See: curve
Param | Type | Default |
---|---|---|
[interpolate] | d3.curve |
d3.curveLinear |
lineChart.tension([tension]) ⇒ Number
| LineChart
Number
| LineChart
Deprecated
Gets or sets the tension to use for lines drawn, in the range 0 to 1.
Passed to the d3 curve function
if it provides a .tension
function. Example:
curveCardinal.tension.
This function exists for backward compatibility. Use curve
which is generic and provides more options.
Value set through .curve
takes precedence over .interpolate
and .tension
.
Kind: instance method of LineChart
See: curve
Param | Type | Default |
---|---|---|
[tension] | Number |
0 |
function
| LineChart
lineChart.defined([defined]) ⇒ Gets or sets a function that will determine discontinuities in the line which should be skipped: the path will be broken into separate subpaths if some points are undefined. This function is passed to line.defined
Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write custom reduce functions to get this to work, depending on your data. See this GitHub comment for more details and an example.
Kind: instance method of LineChart
See: line.defined
Param | Type |
---|---|
[defined] | function |
Array.<Number>
| LineChart
lineChart.dashStyle([dashStyle]) ⇒ Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty array (solid line).
Kind: instance method of LineChart
See: stroke-dasharray
Param | Type | Default |
---|---|---|
[dashStyle] | Array.<Number> |
[] |
Example
// create a Dash Dot Dot Dot
chart.dashStyle([3,1,1,1]);
Boolean
| LineChart
lineChart.renderArea([renderArea]) ⇒ Get or set render area flag. If the flag is set to true then the chart will render the area beneath each line and the line chart effectively becomes an area chart.
Kind: instance method of LineChart
Param | Type | Default |
---|---|---|
[renderArea] | Boolean |
false |
Boolean
| LineChart
lineChart.xyTipsOn([xyTipsOn]) ⇒ Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis dashed lines back to each respective axis. This is ignored if the chart brush is on
Kind: instance method of LineChart
Param | Type | Default |
---|---|---|
[xyTipsOn] | Boolean |
false |
Number
| LineChart
lineChart.dotRadius([dotRadius]) ⇒ Get or set the radius (in px) for dots displayed on the data points.
Kind: instance method of LineChart
Param | Type | Default |
---|---|---|
[dotRadius] | Number |
5 |
Object
| LineChart
lineChart.renderDataPoints([options]) ⇒ Always show individual dots for each datapoint.
If options
is falsy, it disables data point rendering. If no options
are provided, the
current options
values are instead returned.
Kind: instance method of LineChart
Param | Type | Default |
---|---|---|
[options] | Object |
{fillOpacity: 0.8, strokeOpacity: 0.0, radius: 2} |
Example
chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.0})
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.
Kind: global class
Mixes: BaseMixin
- NumberDisplay
- new NumberDisplay(parent, [chartGroup])
- .html([html]) ⇒
Object
|NumberDisplay
- .value() ⇒
Number
- .formatNumber([formatter]) ⇒
function
|NumberDisplay
- .ariaLiveRegion([ariaLiveRegion]) ⇒
Boolean
|NumberDisplay
new NumberDisplay(parent, [chartGroup])
Create a Number Display widget.
Param | Type | 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 |
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. |
Example
// create a number display under #chart-container1 element using the default global chart group
var display1 = new NumberDisplay('#chart-container1');
Object
| NumberDisplay
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
Kind: instance method of NumberDisplay
Param | Type | Default |
---|---|---|
[html] | Object |
{one: '', some: '', none: ''} |
Example
numberWidget.html({
one:'%number record',
some:'%number records',
none:'no records'})
Number
numberDisplay.value() ⇒ Calculate and return the underlying value of the display.
Kind: instance method of NumberDisplay
function
| NumberDisplay
numberDisplay.formatNumber([formatter]) ⇒ Get or set a function to format the value for the display.
Kind: instance method of NumberDisplay
See: d3.format
Param | Type | Default |
---|---|---|
[formatter] | function |
d3.format('.2s') |
Boolean
| NumberDisplay
numberDisplay.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.
Kind: instance method of NumberDisplay
Param | Type | Default |
---|---|---|
[ariaLiveRegion] | Boolean |
false |
PieChart
The pie chart implementation is usually used to visualize a small categorical distribution. The pie chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.
Examples:
Kind: global class
Mixes: CapMixin
, ColorMixin
, BaseMixin
- PieChart
- new PieChart(parent, [chartGroup])
- .slicesCap([cap]) ⇒
Number
|PieChart
- .externalRadiusPadding([externalRadiusPadding]) ⇒
Number
|PieChart
- .innerRadius([innerRadius]) ⇒
Number
|PieChart
- .radius([radius]) ⇒
Number
|PieChart
- .cx([cx]) ⇒
Number
|PieChart
- .cy([cy]) ⇒
Number
|PieChart
- .minAngleForLabel([minAngleForLabel]) ⇒
Number
|PieChart
- .emptyTitle([title]) ⇒
String
|PieChart
- .externalLabels([externalLabelRadius]) ⇒
Number
|PieChart
- .drawPaths([drawPaths]) ⇒
Boolean
|PieChart
new PieChart(parent, [chartGroup])
Create a Pie Chart
Param | Type | 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 |
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. |
Example
// create a pie chart under #chart-container1 element using the default global chart group
var chart1 = new PieChart('#chart-container1');
// create a pie chart under #chart-container2 element using chart group A
var chart2 = new PieChart('#chart-container2', 'chartGroupA');
Number
| PieChart
pieChart.slicesCap([cap]) ⇒ Get or set the maximum number of slices the pie chart will generate. The top slices are determined by value from high to low. Other slices exceeding the cap will be rolled up into one single Others slice.
Kind: instance method of PieChart
Param | Type |
---|---|
[cap] | Number |
Number
| PieChart
pieChart.externalRadiusPadding([externalRadiusPadding]) ⇒ Get or set the external radius padding of the pie chart. This will force the radius of the pie chart to become smaller or larger depending on the value.
Kind: instance method of PieChart
Param | Type | Default |
---|---|---|
[externalRadiusPadding] | Number |
0 |
Number
| PieChart
pieChart.innerRadius([innerRadius]) ⇒ Get or set the inner radius of the pie chart. If the inner radius is greater than 0px then the pie chart will be rendered as a doughnut chart.
Kind: instance method of PieChart
Param | Type | Default |
---|---|---|
[innerRadius] | Number |
0 |
Number
| PieChart
pieChart.radius([radius]) ⇒ Get or set the outer radius. If the radius is not set, it will be half of the minimum of the chart width and height.
Kind: instance method of PieChart
Param | Type |
---|---|
[radius] | Number |
Number
| PieChart
pieChart.cx([cx]) ⇒ Get or set center x coordinate position. Default is center of svg.
Kind: instance method of PieChart
Param | Type |
---|---|
[cx] | Number |
Number
| PieChart
pieChart.cy([cy]) ⇒ Get or set center y coordinate position. Default is center of svg.
Kind: instance method of PieChart
Param | Type |
---|---|
[cy] | Number |
Number
| PieChart
pieChart.minAngleForLabel([minAngleForLabel]) ⇒ Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.
Kind: instance method of PieChart
Param | Type | Default |
---|---|---|
[minAngleForLabel] | Number |
0.5 |
String
| PieChart
pieChart.emptyTitle([title]) ⇒ Title to use for the only slice when there is no data.
Kind: instance method of PieChart
Param | Type |
---|---|
[title] | String |
Number
| PieChart
pieChart.externalLabels([externalLabelRadius]) ⇒ Position slice labels offset from the outer edge of the chart.
The argument specifies the extra radius to be added for slice labels.
Kind: instance method of PieChart
Param | Type |
---|---|
[externalLabelRadius] | Number |
Boolean
| PieChart
pieChart.drawPaths([drawPaths]) ⇒ Get or set whether to draw lines from pie slices to their labels.
Kind: instance method of PieChart
Param | Type |
---|---|
[drawPaths] | Boolean |
RowChart
Concrete row chart implementation.
Examples:
Kind: global class
Mixes: CapMixin
, MarginMixin
, ColorMixin
, BaseMixin
- RowChart
- new RowChart(parent, [chartGroup])
- .x([scale]) ⇒
d3.scale
|RowChart
- .renderTitleLabel([renderTitleLabel]) ⇒
Boolean
|RowChart
- .xAxis([xAxis]) ⇒
d3.axis
|RowChart
- .fixedBarHeight([fixedBarHeight]) ⇒
Boolean
|Number
|RowChart
- .gap([gap]) ⇒
Number
|RowChart
- .elasticX([elasticX]) ⇒
Boolean
|RowChart
- .labelOffsetX([labelOffsetX]) ⇒
Number
|RowChart
- .labelOffsetY([labelOffsety]) ⇒
Number
|RowChart
- .titleLabelOffsetX([titleLabelOffsetX]) ⇒
Number
|RowChart
new RowChart(parent, [chartGroup])
Create a Row Chart.
Param | Type | 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 |
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. |
Example
// create a row chart under #chart-container1 element using the default global chart group
var chart1 = new RowChart('#chart-container1');
// create a row chart under #chart-container2 element using chart group A
var chart2 = new RowChart('#chart-container2', 'chartGroupA');
d3.scale
| RowChart
rowChart.x([scale]) ⇒ Gets or sets the x scale. The x scale can be any d3 d3.scale.
Kind: instance method of RowChart
See: d3.scale
Param | Type |
---|---|
[scale] | d3.scale |
Boolean
| RowChart
rowChart.renderTitleLabel([renderTitleLabel]) ⇒ Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'.
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[renderTitleLabel] | Boolean |
false |
d3.axis
| RowChart
rowChart.xAxis([xAxis]) ⇒ Get or sets the x axis for the row chart instance. See the d3.axis documention for more information.
Kind: instance method of RowChart
Param | Type |
---|---|
[xAxis] | d3.axis |
Example
// customize x axis tick format
chart.xAxis().tickFormat(function (v) {return v + '%';});
// customize x axis tick values
chart.xAxis().tickValues([0, 100, 200, 300]);
// use a top-oriented axis. Note: position of the axis and grid lines will need to
// be set manually, see https://dc-js.github.io/dc.js/examples/row-top-axis.html
chart.xAxis(d3.axisTop())
Boolean
| Number
| RowChart
rowChart.fixedBarHeight([fixedBarHeight]) ⇒ Get or set the fixed bar height. Default is [false] which will auto-scale bars. For example, if you want to fix the height for a specific number of bars (useful in TopN charts) you could fix height as follows (where count = total number of bars in your TopN and gap is your vertical gap space).
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[fixedBarHeight] | Boolean | Number |
false |
Example
chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
Number
| RowChart
rowChart.gap([gap]) ⇒ Get or set the vertical gap space between rows on a particular row chart instance.
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[gap] | Number |
5 |
Boolean
| RowChart
rowChart.elasticX([elasticX]) ⇒ Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescale to auto-fit the data range when filtered.
Kind: instance method of RowChart
Param | Type |
---|---|
[elasticX] | Boolean |
Number
| RowChart
rowChart.labelOffsetX([labelOffsetX]) ⇒ Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[labelOffsetX] | Number |
10 |
Number
| RowChart
rowChart.labelOffsetY([labelOffsety]) ⇒ Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart.
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[labelOffsety] | Number |
15 |
Number
| RowChart
rowChart.titleLabelOffsetX([titleLabelOffsetX]) ⇒ Get of set the x offset (horizontal space between right edge of row and right edge or text.
Kind: instance method of RowChart
Param | Type | Default |
---|---|---|
[titleLabelOffsetX] | Number |
2 |
ScatterPlot
A scatter plot chart
Examples:
Kind: global class
Mixes: CoordinateGridMixin
- ScatterPlot
- new ScatterPlot(parent, [chartGroup])
- .resetSvg() ⇒
SVGElement
- .useCanvas([useCanvas]) ⇒
Boolean
|d3.selection
- .canvas([canvasElement]) ⇒
CanvasElement
|d3.selection
- .context() ⇒
CanvasContext
- .existenceAccessor([accessor]) ⇒
function
|ScatterPlot
- .symbol([type]) ⇒
function
|ScatterPlot
- .customSymbol([customSymbol]) ⇒
String
|function
|ScatterPlot
- .symbolSize([symbolSize]) ⇒
Number
|ScatterPlot
- .highlightedSize([highlightedSize]) ⇒
Number
|ScatterPlot
- .excludedSize([excludedSize]) ⇒
Number
|ScatterPlot
- .excludedColor([excludedColor]) ⇒
Number
|ScatterPlot
- .excludedOpacity([excludedOpacity]) ⇒
Number
|ScatterPlot
- .emptySize([emptySize]) ⇒
Number
|ScatterPlot
- .emptyColor([emptyColor]) ⇒
String
|ScatterPlot
- .emptyOpacity([emptyOpacity]) ⇒
Number
|ScatterPlot
- .nonemptyOpacity([nonemptyOpacity]) ⇒
Number
|ScatterPlot
new ScatterPlot(parent, [chartGroup])
Create a Scatter Plot.
Param | Type | 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 |
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. |
Example
// create a scatter plot under #chart-container1 element using the default global chart group
var chart1 = new ScatterPlot('#chart-container1');
// create a scatter plot under #chart-container2 element using chart group A
var chart2 = new ScatterPlot('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new ScatterPlot(compositeChart);
SVGElement
scatterPlot.resetSvg() ⇒ Method that replaces original resetSvg and appropriately inserts canvas element along with svg element and sets their CSS properties appropriately so they are overlapped on top of each other. Remove the chart's SVGElements from the dom and recreate the container SVGElement.
Kind: instance method of ScatterPlot
See: SVGElement
Boolean
| d3.selection
scatterPlot.useCanvas([useCanvas]) ⇒ Set or get whether to use canvas backend for plotting scatterPlot. Note that the
canvas backend does not currently support
customSymbol or
symbol methods and is limited to always plotting
with filled circles. Symbols are drawn with
symbolSize radius. By default, the SVG backend
is used when useCanvas
is set to false
.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[useCanvas] | Boolean |
false |
CanvasElement
| d3.selection
scatterPlot.canvas([canvasElement]) ⇒ Set or get canvas element. You should usually only ever use the get method as
dc.js will handle canvas element generation. Provides valid canvas only when
useCanvas is set to true
Kind: instance method of ScatterPlot
Param | Type |
---|---|
[canvasElement] | CanvasElement | d3.selection |
CanvasContext
scatterPlot.context() ⇒ Get canvas 2D context. Provides valid context only when
useCanvas is set to true
Kind: instance method of ScatterPlot
function
| ScatterPlot
scatterPlot.existenceAccessor([accessor]) ⇒ Get or set the existence accessor. If a point exists, it is drawn with symbolSize radius and opacity 1; if it does not exist, it is drawn with emptySize radius and opacity 0. By default, the existence accessor checks if the reduced value is truthy.
Kind: instance method of ScatterPlot
See
Param | Type |
---|---|
[accessor] | function |
Example
// default accessor
chart.existenceAccessor(function (d) { return d.value; });
function
| ScatterPlot
scatterPlot.symbol([type]) ⇒ Get or set the symbol type used for each point. By default the symbol is a circle (d3.symbolCircle). Type can be a constant or an accessor.
Kind: instance method of ScatterPlot
See: symbol.type
Param | Type | Default |
---|---|---|
[type] | function |
d3.symbolCircle |
Example
// Circle type
chart.symbol(d3.symbolCircle);
// Square type
chart.symbol(d3.symbolSquare);
String
| function
| ScatterPlot
scatterPlot.customSymbol([customSymbol]) ⇒ Get or set the symbol generator. By default ScatterPlot
will use
d3.symbol()
to generate symbols. ScatterPlot
will set the
symbol size accessor
on the symbol generator.
Kind: instance method of ScatterPlot
See
Param | Type | Default |
---|---|---|
[customSymbol] | String | function |
d3.symbol() |
Number
| ScatterPlot
scatterPlot.symbolSize([symbolSize]) ⇒ Set or get radius for symbols.
Kind: instance method of ScatterPlot
See: d3.symbol.size
Param | Type | Default |
---|---|---|
[symbolSize] | Number |
3 |
Number
| ScatterPlot
scatterPlot.highlightedSize([highlightedSize]) ⇒ Set or get radius for highlighted symbols.
Kind: instance method of ScatterPlot
See: d3.symbol.size
Param | Type | Default |
---|---|---|
[highlightedSize] | Number |
5 |
Number
| ScatterPlot
scatterPlot.excludedSize([excludedSize]) ⇒ Set or get size for symbols excluded from this chart's filter. If null, no special size is applied for symbols based on their filter status.
Kind: instance method of ScatterPlot
See: d3.symbol.size
Param | Type | Default |
---|---|---|
[excludedSize] | Number |
|
Number
| ScatterPlot
scatterPlot.excludedColor([excludedColor]) ⇒ Set or get color for symbols excluded from this chart's filter. If null, no special color is applied for symbols based on their filter status.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[excludedColor] | Number |
|
Number
| ScatterPlot
scatterPlot.excludedOpacity([excludedOpacity]) ⇒ Set or get opacity for symbols excluded from this chart's filter.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[excludedOpacity] | Number |
1.0 |
Number
| ScatterPlot
scatterPlot.emptySize([emptySize]) ⇒ Set or get radius for symbols when the group is empty.
Kind: instance method of ScatterPlot
See: d3.symbol.size
Param | Type | Default |
---|---|---|
[emptySize] | Number |
0 |
String
| ScatterPlot
scatterPlot.emptyColor([emptyColor]) ⇒ Set or get color for symbols when the group is empty. If null, just use the colorMixin.colors color scale zero value.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[emptyColor] | String |
|
Number
| ScatterPlot
scatterPlot.emptyOpacity([emptyOpacity]) ⇒ Set or get opacity for symbols when the group is empty.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[emptyOpacity] | Number |
0 |
Number
| ScatterPlot
scatterPlot.nonemptyOpacity([nonemptyOpacity]) ⇒ Set or get opacity for symbols when the group is not empty.
Kind: instance method of ScatterPlot
Param | Type | Default |
---|---|---|
[nonemptyOpacity] | Number |
1 |
SelectMenu
The select menu is a simple widget designed to filter a dimension by selecting an option from
an HTML <select/>
menu. The menu can be optionally turned into a multiselect.
Kind: global class
Mixes: BaseMixin
- SelectMenu
- new SelectMenu(parent, [chartGroup])
- .order([order]) ⇒
function
|SelectMenu
- .promptText([promptText]) ⇒
String
|SelectMenu
- .filterDisplayed([filterDisplayed]) ⇒
function
|SelectMenu
- .multiple([multiple]) ⇒
boolean
|SelectMenu
- .promptValue([promptValue]) ⇒
*
|SelectMenu
- .numberVisible([numberVisible]) ⇒
number
|SelectMenu
new SelectMenu(parent, [chartGroup])
Create a Select Menu.
Param | Type | 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 |
The name of the chart group this widget should be placed in. Interaction with the widget will only trigger events and redraws within its group. |
Example
// create a select menu under #select-container using the default global chart group
var select = new SelectMenu('#select-container')
.dimension(states)
.group(stateGroup);
// the option text can be set via the title() function
// by default the option text is '`key`: `value`'
select.title(function (d){
return 'STATE: ' + d.key;
})
function
| SelectMenu
selectMenu.order([order]) ⇒ Get or set the function that controls the ordering of option tags in the select menu. By default options are ordered by the group key in ascending order.
Kind: instance method of SelectMenu
Param | Type |
---|---|
[order] | function |
Example
// order by the group's value
chart.order(function (a,b) {
return a.value > b.value ? 1 : b.value > a.value ? -1 : 0;
});
String
| SelectMenu
selectMenu.promptText([promptText]) ⇒ Get or set the text displayed in the options used to prompt selection.
Kind: instance method of SelectMenu
Param | Type | Default |
---|---|---|
[promptText] | String |
'Select all' |
Example
chart.promptText('All states');
function
| SelectMenu
selectMenu.filterDisplayed([filterDisplayed]) ⇒ Get or set the function that filters option tags prior to display. By default options with a value of < 1 are not displayed.
Kind: instance method of SelectMenu
Param | Type |
---|---|
[filterDisplayed] | function |
Example
// display all options override the `filterDisplayed` function:
chart.filterDisplayed(function () {
return true;
});
boolean
| SelectMenu
selectMenu.multiple([multiple]) ⇒ Controls the type of select menu. Setting it to true converts the underlying HTML tag into a multiple select.
Kind: instance method of SelectMenu
Param | Type | Default |
---|---|---|
[multiple] | boolean |
false |
Example
chart.multiple(true);
*
| SelectMenu
selectMenu.promptValue([promptValue]) ⇒ Controls the default value to be used for
dimension.filter
when only the prompt value is selected. If null
(the default), no filtering will occur when
just the prompt is selected.
Kind: instance method of SelectMenu
Param | Type | Default |
---|---|---|
[promptValue] | * |
|
number
| SelectMenu
selectMenu.numberVisible([numberVisible]) ⇒ Controls the number of items to show in the select menu, when .multiple()
is true. This
controls the size
attribute of
the select
element. If null
(the default), uses the browser's default height.
Kind: instance method of SelectMenu
Param | Type | Default |
---|---|---|
[numberVisible] | number |
|
Example
chart.numberVisible(10);
SeriesChart
A series chart is a chart that shows multiple series of data overlaid on one chart, where the series is specified in the data. It is a specialization of Composite Chart and inherits all composite features other than recomposing the chart.
Examples:
Kind: global class
Mixes: CompositeChart
- SeriesChart
- new SeriesChart(parent, [chartGroup])
- .chart([chartFunction]) ⇒
function
|SeriesChart
- .seriesAccessor([accessor]) ⇒
function
|SeriesChart
- .seriesSort([sortFunction]) ⇒
function
|SeriesChart
- .valueSort([sortFunction]) ⇒
function
|SeriesChart
new SeriesChart(parent, [chartGroup])
Create a Series Chart.
Param | Type | 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 |
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. |
Example
// create a series chart under #chart-container1 element using the default global chart group
var seriesChart1 = new SeriesChart("#chart-container1");
// create a series chart under #chart-container2 element using chart group A
var seriesChart2 = new SeriesChart("#chart-container2", "chartGroupA");
function
| SeriesChart
seriesChart.chart([chartFunction]) ⇒ Get or set the chart function, which generates the child charts.
Kind: instance method of SeriesChart
Param | Type | Default |
---|---|---|
[chartFunction] | function |
(anchor) => new LineChart(anchor) |
Example
// put curve on the line charts used for the series
chart.chart(function(c) { return new LineChart(c).curve(d3.curveBasis); })
// do a scatter series chart
chart.chart(anchor => new ScatterPlot(anchor))
function
| SeriesChart
seriesChart.seriesAccessor([accessor]) ⇒ mandatory
Get or set accessor function for the displayed series. Given a datum, this function should return the series that datum belongs to.
Kind: instance method of SeriesChart
Param | Type |
---|---|
[accessor] | function |
Example
// simple series accessor
chart.seriesAccessor(function(d) { return "Expt: " + d.key[0]; })
function
| SeriesChart
seriesChart.seriesSort([sortFunction]) ⇒ Get or set a function to sort the list of series by, given series values.
Kind: instance method of SeriesChart
See
Param | Type | Default |
---|---|---|
[sortFunction] | function |
d3.ascending |
Example
chart.seriesSort(d3.descending);
function
| SeriesChart
seriesChart.valueSort([sortFunction]) ⇒ Get or set a function to sort each series values by. By default this is the key accessor which, for example, will ensure a lineChart series connects its points in increasing key/x order, rather than haphazardly.
Kind: instance method of SeriesChart
See
Param | Type |
---|---|
[sortFunction] | function |
Example
// Default value sort
_chart.valueSort(function keySort (a, b) {
return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
});
SunburstChart
The sunburst chart implementation is usually used to visualize a small tree distribution. The sunburst chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.
The keys used in the sunburst chart should be arrays, representing paths in the tree.
When filtering, the sunburst chart creates instances of HierarchyFilter.
Kind: global class
Mixes: CapMixin
, ColorMixin
, BaseMixin
- SunburstChart
- new SunburstChart(parent, [chartGroup])
- .innerRadius([innerRadius]) ⇒
Number
|SunburstChart
- .radius([radius]) ⇒
Number
|SunburstChart
- .cx([cx]) ⇒
Number
|SunburstChart
- .cy([cy]) ⇒
Number
|SunburstChart
- .minAngleForLabel([minAngleForLabel]) ⇒
Number
|SunburstChart
- .emptyTitle([title]) ⇒
String
|SunburstChart
- .externalLabels([externalLabelRadius]) ⇒
Number
|SunburstChart
- .defaultRingSizes() ⇒
RingSizes
- .equalRingSizes() ⇒
RingSizes
- .relativeRingSizes([relativeRingSizesFunction]) ⇒
RingSizes
- .ringSizes(ringSizes) ⇒
Object
|SunburstChart
new SunburstChart(parent, [chartGroup])
Create a Sunburst Chart
Param | Type | 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 |
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. |
Example
// create a sunburst chart under #chart-container1 element using the default global chart group
var chart1 = new SunburstChart('#chart-container1');
// create a sunburst chart under #chart-container2 element using chart group A
var chart2 = new SunburstChart('#chart-container2', 'chartGroupA');
Number
| SunburstChart
sunburstChart.innerRadius([innerRadius]) ⇒ Get or set the inner radius of the sunburst chart. If the inner radius is greater than 0px then the sunburst chart will be rendered as a doughnut chart. Default inner radius is 0px.
Kind: instance method of SunburstChart
Param | Type | Default |
---|---|---|
[innerRadius] | Number |
0 |
Number
| SunburstChart
sunburstChart.radius([radius]) ⇒ Get or set the outer radius. If the radius is not set, it will be half of the minimum of the chart width and height.
Kind: instance method of SunburstChart
Param | Type |
---|---|
[radius] | Number |
Number
| SunburstChart
sunburstChart.cx([cx]) ⇒ Get or set center x coordinate position. Default is center of svg.
Kind: instance method of SunburstChart
Param | Type |
---|---|
[cx] | Number |
Number
| SunburstChart
sunburstChart.cy([cy]) ⇒ Get or set center y coordinate position. Default is center of svg.
Kind: instance method of SunburstChart
Param | Type |
---|---|
[cy] | Number |
Number
| SunburstChart
sunburstChart.minAngleForLabel([minAngleForLabel]) ⇒ Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.
Kind: instance method of SunburstChart
Param | Type | Default |
---|---|---|
[minAngleForLabel] | Number |
0.5 |
String
| SunburstChart
sunburstChart.emptyTitle([title]) ⇒ Title to use for the only slice when there is no data.
Kind: instance method of SunburstChart
Param | Type |
---|---|
[title] | String |
Number
| SunburstChart
sunburstChart.externalLabels([externalLabelRadius]) ⇒ Position slice labels offset from the outer edge of the chart.
The argument specifies the extra radius to be added for slice labels.
Kind: instance method of SunburstChart
Param | Type |
---|---|
[externalLabelRadius] | Number |
RingSizes
sunburstChart.defaultRingSizes() ⇒ Constructs the default RingSizes parameter for ringSizes(), which makes the rings narrower as they get farther away from the center.
Can be used as a parameter to ringSizes() to reset the default behavior, or modified for custom ring sizes.
Kind: instance method of SunburstChart
Example
var chart = new dc.SunburstChart(...);
chart.ringSizes(chart.defaultRingSizes())
RingSizes
sunburstChart.equalRingSizes() ⇒ Constructs a RingSizes parameter for ringSizes() that will make the chart rings equally wide.
Kind: instance method of SunburstChart
Example
var chart = new dc.SunburstChart(...);
chart.ringSizes(chart.equalRingSizes())
RingSizes
sunburstChart.relativeRingSizes([relativeRingSizesFunction]) ⇒ Constructs a RingSizes parameter for ringSizes() using the given function to determine each rings width.
- The function must return an array containing portion values for each ring/level of the chart.
- The length of the array must match the number of rings of the chart at runtime, which is provided as the only argument.
- The sum of all portions from the array must be 1 (100%).
Kind: instance method of SunburstChart
Param | Type |
---|---|
[relativeRingSizesFunction] | function |
Example
// specific relative portions (the number of rings (3) is known in this case)
chart.ringSizes(chart.relativeRingSizes(function (ringCount) {
return [.1, .3, .6];
});
Object
| SunburstChart
sunburstChart.ringSizes(ringSizes) ⇒ Get or set the strategy to use for sizing the charts rings.
There are three strategies available
defaultRingSizes
: the rings get narrower farther away from the centerrelativeRingSizes
: set the ring sizes as portions of 1equalRingSizes
: the rings are equally wide
You can modify the returned strategy, or create your own, for custom ring sizing.
RingSizes is a duck-typed interface that must support the following methods:
partitionDy()
: used ford3.partition.size
scaleInnerRadius(d)
: takes datum and returns radius ford3.arc.innerRadius
scaleOuterRadius(d)
: takes datum and returns radius ford3.arc.outerRadius
relativeRingSizesFunction(ringCount)
: takes ring count and returns an array of portions that must add up to 1
Kind: instance method of SunburstChart
Param | Type |
---|---|
ringSizes | RingSizes |
Example
// make rings equally wide
chart.ringSizes(chart.equalRingSizes())
// reset to default behavior
chart.ringSizes(chart.defaultRingSizes()))
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.
Kind: global class
Mixes: BaseMixin
new TextFilterWidget(parent, [chartGroup])
Create Text Filter widget
Param | Type | 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 |
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. |
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
TextFilterWidget
| function
textFilterWidget.normalize([normalize]) ⇒ This function will be called on values before calling the filter function.
Kind: instance method of TextFilterWidget
Param | Type |
---|---|
[normalize] | function |
Example
// This is the default
chart.normalize(function (s) {
return s.toLowerCase();
});
TextFilterWidget
| string
textFilterWidget.placeHolder([placeHolder]) ⇒ Placeholder text in the search box.
Kind: instance method of TextFilterWidget
Param | Type | Default |
---|---|---|
[placeHolder] | function |
'search' |
Example
// This is the default
chart.placeHolder('type to filter');
TextFilterWidget
| function
textFilterWidget.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.
Kind: instance method of TextFilterWidget
Param | Type |
---|---|
[filterFunctionFactory] | function |
Example
// This is the default
function (query) {
query = _normalize(query);
return function (d) {
return _normalize(d).indexOf(query) !== -1;
};
};
BaseMixin
BaseMixin
is an abstract functional object representing a basic dc
chart object
for all chart and widget implementations. Methods from the BaseMixin are inherited
and available on all chart implementations in the dc
library.
Kind: global mixin
- BaseMixin
- .height([height]) ⇒
Number
|BaseMixin
- .width([width]) ⇒
Number
|BaseMixin
- .minWidth([minWidth]) ⇒
Number
|BaseMixin
- .minHeight([minHeight]) ⇒
Number
|BaseMixin
- .useViewBoxResizing([useViewBoxResizing]) ⇒
Boolean
|BaseMixin
- .dimension([dimension]) ⇒
crossfilter.dimension
|BaseMixin
- .data([callback]) ⇒
*
|BaseMixin
- .group([group], [name]) ⇒
crossfilter.group
|BaseMixin
- .ordering([orderFunction]) ⇒
function
|BaseMixin
- .filterAll() ⇒
BaseMixin
- .select(sel) ⇒
d3.selection
- .selectAll(sel) ⇒
d3.selection
- .anchor([parent], [chartGroup]) ⇒
String
|node
|d3.selection
|BaseMixin
- .anchorName() ⇒
String
- .root([rootElement]) ⇒
HTMLElement
|BaseMixin
- .svg([svgElement]) ⇒
SVGElement
|d3.selection
|BaseMixin
- .resetSvg() ⇒
SVGElement
- .svgDescription([description]) ⇒
String
|BaseMixin
- .keyboardAccessible([keyboardAccessible]) ⇒
Boolean
|BarChart
- .filterPrinter([filterPrinterFunction]) ⇒
function
|BaseMixin
- .controlsUseVisibility([controlsUseVisibility]) ⇒
Boolean
|BaseMixin
- .turnOnControls() ⇒
BaseMixin
- .turnOffControls() ⇒
BaseMixin
- .transitionDuration([duration]) ⇒
Number
|BaseMixin
- .transitionDelay([delay]) ⇒
Number
|BaseMixin
- .render() ⇒
BaseMixin
- .redraw() ⇒
BaseMixin
- .commitHandler(commitHandler) ⇒
BaseMixin
- .redrawGroup() ⇒
BaseMixin
- .renderGroup() ⇒
BaseMixin
- .hasFilterHandler([hasFilterHandler]) ⇒
function
|BaseMixin
- .hasFilter([filter]) ⇒
Boolean
- .removeFilterHandler([removeFilterHandler]) ⇒
function
|BaseMixin
- .addFilterHandler([addFilterHandler]) ⇒
function
|BaseMixin
- .resetFilterHandler([resetFilterHandler]) ⇒
BaseMixin
- .replaceFilter([filter]) ⇒
BaseMixin
- .filter([filter]) ⇒
BaseMixin
- .filters() ⇒
Array.<*>
- .onClick(datum) ⇒
undefined
- .filterHandler([filterHandler]) ⇒
function
|BaseMixin
- .keyAccessor([keyAccessor]) ⇒
function
|BaseMixin
- .valueAccessor([valueAccessor]) ⇒
function
|BaseMixin
- .label([labelFunction], [enableLabels]) ⇒
function
|BaseMixin
- .renderLabel([renderLabel]) ⇒
Boolean
|BaseMixin
- .title([titleFunction]) ⇒
function
|BaseMixin
- .renderTitle([renderTitle]) ⇒
Boolean
|BaseMixin
- .chartGroup([chartGroup]) ⇒
String
|BaseMixin
- .expireCache() ⇒
BaseMixin
- .legend([legend]) ⇒
Legend
|BaseMixin
- .chartID() ⇒
String
- .options(opts) ⇒
BaseMixin
- .on(event, listener) ⇒
BaseMixin
.renderlet(renderletFunction) ⇒BaseMixin
- .height([height]) ⇒
Number
| BaseMixin
baseMixin.height([height]) ⇒ Set or get the height attribute of a chart. The height is applied to the SVGElement generated by the chart when rendered (or re-rendered). If a value is given, then it will be used to calculate the new height and the chart returned for method chaining. The value can either be a numeric, a function, or falsy. If no value is specified then the value of the current height attribute will be returned.
By default, without an explicit height being given, the chart will select the width of its anchor element. If that isn't possible it defaults to 200 (provided by the minHeight property). Setting the value falsy will return the chart to the default behavior.
Kind: instance method of BaseMixin
See: minHeight
Param | Type |
---|---|
[height] | Number | function |
Example
// Default height
chart.height(function (element) {
var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
return (height && height > chart.minHeight()) ? height : chart.minHeight();
});
chart.height(250); // Set the chart's height to 250px;
chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
chart.height(null); // reset the height to the default auto calculation
Number
| BaseMixin
baseMixin.width([width]) ⇒ Set or get the width attribute of a chart.
Kind: instance method of BaseMixin
See
Param | Type |
---|---|
[width] | Number | function |
Example
// Default width
chart.width(function (element) {
var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
return (width && width > chart.minWidth()) ? width : chart.minWidth();
});
Number
| BaseMixin
baseMixin.minWidth([minWidth]) ⇒ Set or get the minimum width attribute of a chart. This only has effect when used with the default width function.
Kind: instance method of BaseMixin
See: width
Param | Type | Default |
---|---|---|
[minWidth] | Number |
200 |
Number
| BaseMixin
baseMixin.minHeight([minHeight]) ⇒ Set or get the minimum height attribute of a chart. This only has effect when used with the default height function.
Kind: instance method of BaseMixin
See: height
Param | Type | Default |
---|---|---|
[minHeight] | Number |
200 |
Boolean
| BaseMixin
baseMixin.useViewBoxResizing([useViewBoxResizing]) ⇒ Turn on/off using the SVG
viewBox
attribute.
When enabled, viewBox
will be set on the svg root element instead of width
and height
.
Requires that the chart aspect ratio be defined using chart.width(w) and chart.height(h).
This will maintain the aspect ratio while enabling the chart to resize responsively to the
space given to the chart using CSS. For example, the chart can use width: 100%; height: 100%
or absolute positioning to resize to its parent div.
Since the text will be sized as if the chart is drawn according to the width and height, and will be resized if the chart is any other size, you need to set the chart width and height so that the text looks good. In practice, 600x400 seems to work pretty well for most charts.
You can see examples of this resizing strategy in the Chart Resizing
Examples; just add ?resize=viewbox
to any of the
one-chart examples to enable useViewBoxResizing
.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[useViewBoxResizing] | Boolean |
false |
crossfilter.dimension
| BaseMixin
baseMixin.dimension([dimension]) ⇒ mandatory
Set or get the dimension attribute of a chart. In dc
, a dimension can be any valid
crossfilter dimension
If a value is given, then it will be used as the new dimension. If no value is specified then the current dimension will be returned.
Kind: instance method of BaseMixin
See: crossfilter.dimension
Param | Type |
---|---|
[dimension] | crossfilter.dimension |
Example
var index = crossfilter([]);
var dimension = index.dimension(pluck('key'));
chart.dimension(dimension);
*
| BaseMixin
baseMixin.data([callback]) ⇒ Set the data callback or retrieve the chart's data set. The data callback is passed the chart's group and by default will return group.all. This behavior may be modified to, for instance, return only the top 5 groups.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[callback] | function |
Example
// Default data function
chart.data(function (group) { return group.all(); });
chart.data(function (group) { return group.top(5); });
crossfilter.group
| BaseMixin
baseMixin.group([group], [name]) ⇒ mandatory
Set or get the group attribute of a chart. In dc
a group is a
crossfilter group.
Usually the group should be created from the particular dimension associated with the same chart. If a value is
given, then it will be used as the new group.
If no value specified then the current group will be returned.
If name
is specified then it will be used to generate legend label.
Kind: instance method of BaseMixin
See: crossfilter.group
Param | Type |
---|---|
[group] | crossfilter.group |
[name] | String |
Example
var index = crossfilter([]);
var dimension = index.dimension(pluck('key'));
chart.dimension(dimension);
chart.group(dimension.group().reduceSum());
function
| BaseMixin
baseMixin.ordering([orderFunction]) ⇒ Get or set an accessor to order ordinal dimensions. The chart uses Array.sort to sort elements; this accessor returns the value to order on.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[orderFunction] | function |
Example
// Default ordering accessor
_chart.ordering(pluck('key'));
BaseMixin
baseMixin.filterAll() ⇒ Clear all filters associated with this chart. The same effect can be achieved by calling chart.filter(null).
Kind: instance method of BaseMixin
d3.selection
baseMixin.select(sel) ⇒ Execute d3 single selection in the chart's scope using the given selector and return the d3 selection.
This function is not chainable since it does not return a chart instance; however the d3 selection result can be chained to d3 function calls.
Kind: instance method of BaseMixin
See: d3.select
Param | Type | Description |
---|---|---|
sel | String |
CSS selector string |
Example
// Has the same effect as d3.select('#chart-id').select(selector)
chart.select(selector)
d3.selection
baseMixin.selectAll(sel) ⇒ Execute in scope d3 selectAll using the given selector and return d3 selection result.
This function is not chainable since it does not return a chart instance; however the d3 selection result can be chained to d3 function calls.
Kind: instance method of BaseMixin
See: d3.selectAll
Param | Type | Description |
---|---|---|
sel | String |
CSS selector string |
Example
// Has the same effect as d3.select('#chart-id').selectAll(selector)
chart.selectAll(selector)
String
| node
| d3.selection
| BaseMixin
baseMixin.anchor([parent], [chartGroup]) ⇒ Set the root SVGElement to either be an existing chart's root; or any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. Optionally registers the chart within the chartGroup. This class is called internally on chart initialization, but be called again to relocate the chart. However, it will orphan any previously created SVGElements.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[parent] | anchorChart | anchorSelector | anchorNode |
[chartGroup] | String |
String
baseMixin.anchorName() ⇒ Returns the DOM id for the chart's anchored location.
Kind: instance method of BaseMixin
HTMLElement
| BaseMixin
baseMixin.root([rootElement]) ⇒ Returns the root element where a chart resides. Usually it will be the parent div element where the SVGElement was created. You can also pass in a new root element however this is usually handled by dc internally. Resetting the root element on a chart outside of dc internals may have unexpected consequences.
Kind: instance method of BaseMixin
See: HTMLElement
Param | Type |
---|---|
[rootElement] | HTMLElement |
SVGElement
| d3.selection
| BaseMixin
baseMixin.svg([svgElement]) ⇒ Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement, however this is usually handled by dc internally. Resetting the SVGElement on a chart outside of dc internals may have unexpected consequences.
Kind: instance method of BaseMixin
See: SVGElement
Param | Type |
---|---|
[svgElement] | SVGElement | d3.selection |
SVGElement
baseMixin.resetSvg() ⇒ Remove the chart's SVGElements from the dom and recreate the container SVGElement.
Kind: instance method of BaseMixin
See: SVGElement
String
| BaseMixin
baseMixin.svgDescription([description]) ⇒ Set or get description text for the entire SVG graphic. If set, will create a <desc>
element as the first
child of the SVG with the description text and also make the SVG focusable from keyboard.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[description] | String |
Boolean
| BarChart
baseMixin.keyboardAccessible([keyboardAccessible]) ⇒ If set, interactive chart elements like individual bars in a bar chart or symbols in a scatter plot will be focusable from keyboard and on pressing Enter or Space will behave as if clicked on.
If svgDescription
has not been explicitly set, will also set SVG description text to the class
constructor name, like BarChart or HeatMap, and make the entire SVG focusable.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[keyboardAccessible] | Boolean |
false |
function
| BaseMixin
baseMixin.filterPrinter([filterPrinterFunction]) ⇒ Set or get the filter printer function. The filter printer function is used to generate human friendly text for filter value(s) associated with the chart instance. The text will get shown in the `.filter element; see turnOnControls.
By default dc charts use a default filter printer filters that provides simple printing support for both single value and ranged filters.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[filterPrinterFunction] | function |
printers.filters |
Example
// for a chart with an ordinal brush, print the filters in upper case
chart.filterPrinter(function(filters) {
return filters.map(function(f) { return f.toUpperCase(); }).join(', ');
});
// for a chart with a range brush, print the filter as start and extent
chart.filterPrinter(function(filters) {
return 'start ' + utils.printSingleValue(filters[0][0]) +
' extent ' + utils.printSingleValue(filters[0][1] - filters[0][0]);
});
Boolean
| BaseMixin
baseMixin.controlsUseVisibility([controlsUseVisibility]) ⇒ If set, use the visibility
attribute instead of the display
attribute for showing/hiding
chart reset and filter controls, for less disruption to the layout.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[controlsUseVisibility] | Boolean |
false |
BaseMixin
baseMixin.turnOnControls() ⇒ Turn on optional control elements within the root element. dc currently supports the following html control elements.
- root.selectAll('.reset') - elements are turned on if the chart has an active filter. This type of control element is usually used to store a reset link to allow user to reset filter on a certain chart. This element will be turned off automatically if the filter is cleared.
- root.selectAll('.filter') elements are turned on if the chart has an active filter. The text content of this element is then replaced with the current filter value using the filter printer function. This type of element will be turned off automatically if the filter is cleared.
Kind: instance method of BaseMixin
BaseMixin
baseMixin.turnOffControls() ⇒ Turn off optional control elements within the root element.
Kind: instance method of BaseMixin
See: turnOnControls
Number
| BaseMixin
baseMixin.transitionDuration([duration]) ⇒ Set or get the animation transition duration (in milliseconds) for this chart instance.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[duration] | Number |
750 |
Number
| BaseMixin
baseMixin.transitionDelay([delay]) ⇒ Set or get the animation transition delay (in milliseconds) for this chart instance.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[delay] | Number |
0 |
BaseMixin
baseMixin.render() ⇒ Invoking this method will force the chart to re-render everything from scratch. Generally it should only be used to render the chart for the first time on the page or if you want to make sure everything is redrawn from scratch instead of relying on the default incremental redrawing behaviour.
Kind: instance method of BaseMixin
BaseMixin
baseMixin.redraw() ⇒ Calling redraw will cause the chart to re-render data changes incrementally. If there is no change in the underlying data dimension then calling this method will have no effect on the chart. Most chart interaction in dc will automatically trigger this method through internal events (in particular redrawAll); therefore, you only need to manually invoke this function if data is manipulated outside of dc's control (for example if data is loaded in the background using crossfilter.add).
Kind: instance method of BaseMixin
BaseMixin
baseMixin.commitHandler(commitHandler) ⇒ Gets/sets the commit handler. If the chart has a commit handler, the handler will be called when the chart's filters have changed, in order to send the filter data asynchronously to a server.
Unlike other functions in dc.js, the commit handler is asynchronous. It takes two arguments: a flag indicating whether this is a render (true) or a redraw (false), and a callback to be triggered once the commit is done. The callback has the standard node.js continuation signature with error first and result second.
Kind: instance method of BaseMixin
Param | Type |
---|---|
commitHandler | function |
BaseMixin
baseMixin.redrawGroup() ⇒ Redraws all charts in the same group as this chart, typically in reaction to a filter change. If the chart has a commitHandler, it will be executed and waited for.
Kind: instance method of BaseMixin
BaseMixin
baseMixin.renderGroup() ⇒ Renders all charts in the same group as this chart. If the chart has a commitHandler, it will be executed and waited for
Kind: instance method of BaseMixin
function
| BaseMixin
baseMixin.hasFilterHandler([hasFilterHandler]) ⇒ Set or get the has-filter handler. The has-filter handler is a function that checks to see if the chart's current filters (first argument) include a specific filter (second argument). Using a custom has-filter handler allows you to change the way filters are checked for and replaced.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[hasFilterHandler] | function |
Example
// default has-filter handler
chart.hasFilterHandler(function (filters, filter) {
if (filter === null || typeof(filter) === 'undefined') {
return filters.length > 0;
}
return filters.some(function (f) {
return filter <= f && filter >= f;
});
});
// custom filter handler (no-op)
chart.hasFilterHandler(function(filters, filter) {
return false;
});
Boolean
baseMixin.hasFilter([filter]) ⇒ Check whether any active filter or a specific filter is associated with particular chart instance. This function is not chainable.
Kind: instance method of BaseMixin
See: hasFilterHandler
Param | Type |
---|---|
[filter] | * |
function
| BaseMixin
baseMixin.removeFilterHandler([removeFilterHandler]) ⇒ Set or get the remove filter handler. The remove filter handler is a function that removes a filter from the chart's current filters. Using a custom remove filter handler allows you to change how filters are removed or perform additional work when removing a filter, e.g. when using a filter server other than crossfilter.
The handler should return a new or modified array as the result.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[removeFilterHandler] | function |
Example
// default remove filter handler
chart.removeFilterHandler(function (filters, filter) {
for (var i = 0; i < filters.length; i++) {
if (filters[i] <= filter && filters[i] >= filter) {
filters.splice(i, 1);
break;
}
}
return filters;
});
// custom filter handler (no-op)
chart.removeFilterHandler(function(filters, filter) {
return filters;
});
function
| BaseMixin
baseMixin.addFilterHandler([addFilterHandler]) ⇒ Set or get the add filter handler. The add filter handler is a function that adds a filter to the chart's filter list. Using a custom add filter handler allows you to change the way filters are added or perform additional work when adding a filter, e.g. when using a filter server other than crossfilter.
The handler should return a new or modified array as the result.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[addFilterHandler] | function |
Example
// default add filter handler
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});
// custom filter handler (no-op)
chart.addFilterHandler(function(filters, filter) {
return filters;
});
BaseMixin
baseMixin.resetFilterHandler([resetFilterHandler]) ⇒ Set or get the reset filter handler. The reset filter handler is a function that resets the chart's filter list by returning a new list. Using a custom reset filter handler allows you to change the way filters are reset, or perform additional work when resetting the filters, e.g. when using a filter server other than crossfilter.
The handler should return a new or modified array as the result.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[resetFilterHandler] | function |
Example
// default remove filter handler
function (filters) {
return [];
}
// custom filter handler (no-op)
chart.resetFilterHandler(function(filters) {
return filters;
});
BaseMixin
baseMixin.replaceFilter([filter]) ⇒ Replace the chart filter. This is equivalent to calling chart.filter(null).filter(filter)
but more efficient because the filter is only applied once.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[filter] | * |
BaseMixin
baseMixin.filter([filter]) ⇒ Filter the chart by the given parameter, or return the current filter if no input parameter is given.
The filter parameter can take one of these forms:
- A single value: the value will be toggled (added if it is not present in the current filters, removed if it is present)
- An array containing a single array of values (
[[value,value,value]]
): each value is toggled - When appropriate for the chart, a dc filter object such as
filters.RangedFilter
for the CoordinateGridMixin chartsfilters.TwoDimensionalFilter
for the heat mapfilters.RangedTwoDimensionalFilter
for the scatter plot
null
: the filter will be reset using the resetFilterHandler
Note that this is always a toggle (even when it doesn't make sense for the filter type). If
you wish to replace the current filter, either call chart.filter(null)
first - or it's more
efficient to call chart.replaceFilter(filter)
instead.
Each toggle is executed by checking if the value is already present using the hasFilterHandler; if it is not present, it is added using the addFilterHandler; if it is already present, it is removed using the removeFilterHandler.
Once the filters array has been updated, the filters are applied to the crossfilter dimension, using the filterHandler.
Once you have set the filters, call chart.redrawGroup()
(or redrawAll()
) to redraw the chart's group.
Kind: instance method of BaseMixin
See
Param | Type |
---|---|
[filter] | * |
Example
// filter by a single string
chart.filter('Sunday');
// filter by a single age
chart.filter(18);
// filter by a set of states
chart.filter([['MA', 'TX', 'ND', 'WA']]);
// filter by range -- note the use of filters.RangedFilter, which is different
// from the syntax for filtering a crossfilter dimension directly, dimension.filter([15,20])
chart.filter(filters.RangedFilter(15,20));
Array.<*>
baseMixin.filters() ⇒ Returns all current filters. This method does not perform defensive cloning of the internal filter array before returning, therefore any modification of the returned array will effect the chart's internal filter storage.
Kind: instance method of BaseMixin
undefined
baseMixin.onClick(datum) ⇒ This function is passed to d3 as the onClick handler for each chart. The default behavior is to filter on the clicked datum (passed to the callback) and redraw the chart group.
This function can be replaced in order to change the click behavior (but first look at
Kind: instance method of BaseMixin
Param | Type |
---|---|
datum | * |
Example
var oldHandler = chart.onClick;
chart.onClick = function(datum) {
// use datum.
function
| BaseMixin
baseMixin.filterHandler([filterHandler]) ⇒ Set or get the filter handler. The filter handler is a function that performs the filter action on a specific dimension. Using a custom filter handler allows you to perform additional logic before or after filtering.
Kind: instance method of BaseMixin
See: crossfilter.dimension.filter
Param | Type |
---|---|
[filterHandler] | function |
Example
// the default filter handler handles all possible cases for the charts in dc.js
// you can replace it with something more specialized for your own chart
chart.filterHandler(function (dimension, filters) {
if (filters.length === 0) {
// the empty case (no filtering)
dimension.filter(null);
} else if (filters.length === 1 && !filters[0].isFiltered) {
// single value and not a function-based filter
dimension.filterExact(filters[0]);
} else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
// single range-based filter
dimension.filterRange(filters[0]);
} else {
// an array of values, or an array of filter objects
dimension.filterFunction(function (d) {
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.isFiltered && filter.isFiltered(d)) {
return true;
} else if (filter <= d && filter >= d) {
return true;
}
}
return false;
});
}
return filters;
});
// custom filter handler
chart.filterHandler(function(dimension, filter){
var newFilter = filter + 10;
dimension.filter(newFilter);
return newFilter; // set the actual filter value to the new value
});
function
| BaseMixin
baseMixin.keyAccessor([keyAccessor]) ⇒ Set or get the key accessor function. The key accessor function is used to retrieve the key value from the crossfilter group. Key values are used differently in different charts, for example keys correspond to slices in a pie chart and x axis positions in a grid coordinate chart.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[keyAccessor] | function |
Example
// default key accessor
chart.keyAccessor(function(d) { return d.key; });
// custom key accessor for a multi-value crossfilter reduction
chart.keyAccessor(function(p) { return p.value.absGain; });
function
| BaseMixin
baseMixin.valueAccessor([valueAccessor]) ⇒ Set or get the value accessor function. The value accessor function is used to retrieve the value from the crossfilter group. Group values are used differently in different charts, for example values correspond to slice sizes in a pie chart and y axis positions in a grid coordinate chart.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[valueAccessor] | function |
Example
// default value accessor
chart.valueAccessor(function(d) { return d.value; });
// custom value accessor for a multi-value crossfilter reduction
chart.valueAccessor(function(p) { return p.value.percentageGain; });
function
| BaseMixin
baseMixin.label([labelFunction], [enableLabels]) ⇒ Set or get the label function. The chart class will use this function to render labels for each child element in the chart, e.g. slices in a pie chart or bubbles in a bubble chart. Not every chart supports the label function, for example line chart does not use this function at all. By default, enables labels; pass false for the second parameter if this is not desired.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[labelFunction] | function |
|
[enableLabels] | Boolean |
true |
Example
// default label function just return the key
chart.label(function(d) { return d.key; });
// label function has access to the standard d3 data binding and can get quite complicated
chart.label(function(d) { return d.data.key + '(' + Math.floor(d.data.value / all.value() * 100) + '%)'; });
Boolean
| BaseMixin
baseMixin.renderLabel([renderLabel]) ⇒ Turn on/off label rendering
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[renderLabel] | Boolean |
false |
function
| BaseMixin
baseMixin.title([titleFunction]) ⇒ Set or get the title function. The chart class will use this function to render the SVGElement title (usually interpreted by browser as tooltips) for each child element in the chart, e.g. a slice in a pie chart or a bubble in a bubble chart. Almost every chart supports the title function; however in grid coordinate charts you need to turn off the brush in order to see titles, because otherwise the brush layer will block tooltip triggering.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[titleFunction] | function |
Example
// default title function shows "key: value"
chart.title(function(d) { return d.key + ': ' + d.value; });
// title function has access to the standard d3 data binding and can get quite complicated
chart.title(function(p) {
return p.key.getFullYear()
+ '\n'
+ 'Index Gain: ' + numberFormat(p.value.absGain) + '\n'
+ 'Index Gain in Percentage: ' + numberFormat(p.value.percentageGain) + '%\n'
+ 'Fluctuation / Index Ratio: ' + numberFormat(p.value.fluctuationPercentage) + '%';
});
Boolean
| BaseMixin
baseMixin.renderTitle([renderTitle]) ⇒ Turn on/off title rendering, or return the state of the render title flag if no arguments are given.
Kind: instance method of BaseMixin
Param | Type | Default |
---|---|---|
[renderTitle] | Boolean |
true |
String
| BaseMixin
baseMixin.chartGroup([chartGroup]) ⇒ Get or set the chart group to which this chart belongs. Chart groups are rendered or redrawn together since it is expected they share the same underlying crossfilter data set.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[chartGroup] | String |
BaseMixin
baseMixin.expireCache() ⇒ Expire the internal chart cache. dc charts cache some data internally on a per chart basis to speed up rendering and avoid unnecessary calculation; however it might be useful to clear the cache if you have changed state which will affect rendering. For example, if you invoke crossfilter.add function or reset group or dimension after rendering, it is a good idea to clear the cache to make sure charts are rendered properly.
Kind: instance method of BaseMixin
Legend
| BaseMixin
baseMixin.legend([legend]) ⇒ Attach a Legend widget to this chart. The legend widget will automatically draw legend labels based on the color setting and names associated with each group.
Kind: instance method of BaseMixin
Param | Type |
---|---|
[legend] | Legend |
Example
chart.legend(new Legend().x(400).y(10).itemHeight(13).gap(5))
String
baseMixin.chartID() ⇒ Returns the internal numeric ID of the chart.
Kind: instance method of BaseMixin
BaseMixin
baseMixin.options(opts) ⇒ Set chart options using a configuration object. Each key in the object will cause the method of the same name to be called with the value to set that attribute for the chart.
Kind: instance method of BaseMixin
Param | Type |
---|---|
opts | Object |
Example
chart.options({dimension: myDimension, group: myGroup});
BaseMixin
baseMixin.on(event, listener) ⇒ All dc chart instance supports the following listeners. Supports the following events:
renderlet
- This listener function will be invoked after transitions after redraw and render. Replaces the deprecated renderlet method.pretransition
- Like.on('renderlet', ...)
but the event is fired before transitions start.preRender
- This listener function will be invoked before chart rendering.postRender
- This listener function will be invoked after chart finish rendering including all renderlets' logic.preRedraw
- This listener function will be invoked before chart redrawing.postRedraw
- This listener function will be invoked after chart finish redrawing including all renderlets' logic.filtered
- This listener function will be invoked after a filter is applied, added or removed.zoomed
- This listener function will be invoked after a zoom is triggered.
Kind: instance method of BaseMixin
See: d3.dispatch.on
Param | Type |
---|---|
event | String |
listener | function |
Example
.on('renderlet', function(chart, filter){...})
.on('pretransition', function(chart, filter){...})
.on('preRender', function(chart){...})
.on('postRender', function(chart){...})
.on('preRedraw', function(chart){...})
.on('postRedraw', function(chart){...})
.on('filtered', function(chart, filter){...})
.on('zoomed', function(chart, filter){...})
baseMixin.renderlet(renderletFunction) ⇒ BaseMixin
BaseMixin
Deprecated
A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added to an individual chart. Each time a chart is rerendered or redrawn the renderlets are invoked right after the chart finishes its transitions, giving you a way to modify the SVGElements. Renderlet functions take the chart instance as the only input parameter and you can use the dc API or use raw d3 to achieve pretty much any effect.
Use on with a 'renderlet' prefix. Generates a random key for the renderlet, which makes it hard to remove.
Kind: instance method of BaseMixin
Param | Type |
---|---|
renderletFunction | function |
Example
// do this instead of .renderlet(function(chart) { ... })
chart.on("renderlet", function(chart){
// mix of dc API and d3 manipulation
chart.select('g.y').style('display', 'none');
// its a closure so you can also access other chart variable available in the closure scope
moveChart.filter(chart.filter());
});
ColorMixin
ColorMixin ⇒ The Color Mixin is an abstract chart functional class providing universal coloring support as a mix-in for any concrete chart implementation.
Kind: global mixin
Param | Type |
---|---|
Base | Object |
- ColorMixin ⇒
ColorMixin
- .getColor(d, [i]) ⇒
String
- .calculateColorDomain() ⇒
ColorMixin
- .colors([colorScale]) ⇒
d3.scale
|ColorMixin
- .ordinalColors(r) ⇒
ColorMixin
- .linearColors(r) ⇒
ColorMixin
- .colorAccessor([colorAccessor]) ⇒
function
|ColorMixin
- .colorDomain([domain]) ⇒
Array.<String>
|ColorMixin
- .colorCalculator([colorCalculator]) ⇒
function
|ColorMixin
- .getColor(d, [i]) ⇒
String
colorMixin.getColor(d, [i]) ⇒ Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
Kind: instance method of ColorMixin
Param | Type |
---|---|
d | * |
[i] | Number |
ColorMixin
colorMixin.calculateColorDomain() ⇒ Set the domain by determining the min and max values as retrieved by .colorAccessor over the chart's dataset.
Kind: instance method of ColorMixin
d3.scale
| ColorMixin
colorMixin.colors([colorScale]) ⇒ Retrieve current color scale or set a new color scale. This methods accepts any function that operates like a d3 scale.
Kind: instance method of ColorMixin
See: d3.scale
Param | Type | Default |
---|---|---|
[colorScale] | d3.scale |
d3.scaleOrdinal(d3.schemeCategory20c) |
Example
// alternate categorical scale
chart.colors(d3.scale.category20b());
// ordinal scale
chart.colors(d3.scaleOrdinal().range(['red','green','blue']));
// convenience method, the same as above
chart.ordinalColors(['red','green','blue']);
// set a linear scale
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
ColorMixin
colorMixin.ordinalColors(r) ⇒ Convenience method to set the color scale to
d3.scaleOrdinal with
range r
.
Kind: instance method of ColorMixin
Param | Type |
---|---|
r | Array.<String> |
ColorMixin
colorMixin.linearColors(r) ⇒ Convenience method to set the color scale to an Hcl interpolated linear scale with range r
.
Kind: instance method of ColorMixin
Param | Type |
---|---|
r | Array.<Number> |
function
| ColorMixin
colorMixin.colorAccessor([colorAccessor]) ⇒ Set or the get color accessor function. This function will be used to map a data point in a crossfilter group to a color value on the color scale. The default function uses the key accessor.
Kind: instance method of ColorMixin
Param | Type |
---|---|
[colorAccessor] | function |
Example
// default index based color accessor
.colorAccessor(function (d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function (d){return d.value.absGain;})
Array.<String>
| ColorMixin
colorMixin.colorDomain([domain]) ⇒ Set or get the current domain for the color mapping function. The domain must be supplied as an array.
Note: previously this method accepted a callback function. Instead you may use a custom scale set by .colors.
Kind: instance method of ColorMixin
Param | Type |
---|---|
[domain] | Array.<String> |
function
| ColorMixin
colorMixin.colorCalculator([colorCalculator]) ⇒ Overrides the color selection algorithm, replacing it with a simple function.
Normally colors will be determined by calling the colorAccessor
to get a value, and then passing that
value through the colorScale
.
But sometimes it is difficult to get a color scale to produce the desired effect. The colorCalculator
takes the datum and index and returns a color directly.
Kind: instance method of ColorMixin
Param | Type |
---|---|
[colorCalculator] | * |
BubbleMixin
BubbleMixin ⇒ This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
Kind: global mixin
Mixes: ColorMixin
Param | Type |
---|---|
Base | Object |
- BubbleMixin ⇒
BubbleMixin
- .r([bubbleRadiusScale]) ⇒
d3.scale
|BubbleMixin
- .elasticRadius([elasticRadius]) ⇒
Boolean
|BubbleChart
- .radiusValueAccessor([radiusValueAccessor]) ⇒
function
|BubbleMixin
- .minRadius([radius]) ⇒
Number
|BubbleMixin
- .minRadiusWithLabel([radius]) ⇒
Number
|BubbleMixin
- .maxBubbleRelativeSize([relativeSize]) ⇒
Number
|BubbleMixin
- .excludeElasticZero([excludeZero]) ⇒
Boolean
|BubbleMixin
- .r([bubbleRadiusScale]) ⇒
d3.scale
| BubbleMixin
bubbleMixin.r([bubbleRadiusScale]) ⇒ Get or set the bubble radius scale. By default the bubble chart uses d3.scaleLinear().domain([0, 100]) as its radius scale.
Kind: instance method of BubbleMixin
See: d3.scale
Param | Type | Default |
---|---|---|
[bubbleRadiusScale] | d3.scale |
d3.scaleLinear().domain([0, 100]) |
Boolean
| BubbleChart
bubbleMixin.elasticRadius([elasticRadius]) ⇒ Turn on or off the elastic bubble radius feature, or return the value of the flag. If this feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
Kind: instance method of BubbleMixin
Param | Type | Default |
---|---|---|
[elasticRadius] | Boolean |
false |
function
| BubbleMixin
bubbleMixin.radiusValueAccessor([radiusValueAccessor]) ⇒ Get or set the radius value accessor function. If set, the radius value accessor function will be used to retrieve a data value for each bubble. The data retrieved then will be mapped using the r scale to the actual bubble radius. This allows you to encode a data dimension using bubble size.
Kind: instance method of BubbleMixin
Param | Type |
---|---|
[radiusValueAccessor] | function |
Number
| BubbleMixin
bubbleMixin.minRadius([radius]) ⇒ Get or set the minimum radius. This will be used to initialize the radius scale's range.
Kind: instance method of BubbleMixin
Param | Type | Default |
---|---|---|
[radius] | Number |
10 |
Number
| BubbleMixin
bubbleMixin.minRadiusWithLabel([radius]) ⇒ Get or set the minimum radius for label rendering. If a bubble's radius is less than this value then no label will be rendered.
Kind: instance method of BubbleMixin
Param | Type | Default |
---|---|---|
[radius] | Number |
10 |
Number
| BubbleMixin
bubbleMixin.maxBubbleRelativeSize([relativeSize]) ⇒ Get or set the maximum relative size of a bubble to the length of x axis. This value is useful when the difference in radius between bubbles is too great.
Kind: instance method of BubbleMixin
Param | Type | Default |
---|---|---|
[relativeSize] | Number |
0.3 |
Boolean
| BubbleMixin
bubbleMixin.excludeElasticZero([excludeZero]) ⇒ Should the chart exclude zero when calculating elastic bubble radius?
Kind: instance method of BubbleMixin
Param | Type | Default |
---|---|---|
[excludeZero] | Boolean |
true |
CapMixin
CapMixin ⇒ Cap is a mixin that groups small data elements below a cap into an others grouping for both the Row and Pie Charts.
The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest will be replaced with an others element, with value equal to the sum of the replaced values. The keys of the elements below the cap limit are recorded in order to filter by those keys when the others* element is clicked.
Kind: global mixin
Param | Type |
---|---|
Base | Object |
- CapMixin ⇒
CapMixin
- .cap([count]) ⇒
Number
|CapMixin
- .takeFront([takeFront]) ⇒
Boolean
|CapMixin
- .othersLabel([label]) ⇒
String
|CapMixin
- .othersGrouper([grouperFunction]) ⇒
function
|CapMixin
- .cap([count]) ⇒
Number
| CapMixin
capMixin.cap([count]) ⇒ Get or set the count of elements to that will be included in the cap. If there is an othersGrouper, any further elements will be combined in an extra element with its name determined by othersLabel.
As of dc.js 2.1 and onward, the capped charts use
group.all()
and BaseMixin.ordering() to determine the order of
elements. Then cap
and takeFront determine how many elements
to keep, from which end of the resulting array.
Migration note: Up through dc.js 2.0.*, capping used
group.top(N),
which selects the largest items according to
group.order().
The chart then sorted the items according to baseMixin.ordering().
So the two values essentially had to agree, but if the group.order()
was incorrect (it's
easy to forget about), the wrong rows or slices would be displayed, in the correct order.
If your chart previously relied on group.order()
, use chart.ordering()
instead. As of
2.1.5, the ordering defaults to sorting from greatest to least like group.top(N)
did.
If you want to cap by one ordering but sort by another, you can still do this by
specifying your own .data()
callback. For details, see the example
Cap and Sort Differently.
Kind: instance method of CapMixin
Param | Type | Default |
---|---|---|
[count] | Number |
Infinity |
Boolean
| CapMixin
capMixin.takeFront([takeFront]) ⇒ Get or set the direction of capping. If set, the chart takes the first
cap elements from the sorted array of elements; otherwise
it takes the last cap
elements.
Kind: instance method of CapMixin
Param | Type | Default |
---|---|---|
[takeFront] | Boolean |
true |
String
| CapMixin
capMixin.othersLabel([label]) ⇒ Get or set the label for Others slice when slices cap is specified.
Kind: instance method of CapMixin
Param | Type | Default |
---|---|---|
[label] | String |
"Others" |
function
| CapMixin
capMixin.othersGrouper([grouperFunction]) ⇒ Get or set the grouper function that will perform the insertion of data for the Others slice if the slices cap is specified. If set to a falsy value, no others will be added.
The grouper function takes an array of included ("top") items, and an array of the rest of the items. By default the grouper function computes the sum of the rest.
Kind: instance method of CapMixin
Param | Type |
---|---|
[grouperFunction] | function |
Example
// Do not show others
chart.othersGrouper(null);
// Default others grouper
chart.othersGrouper(function (topItems, restItems) {
var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
restKeys = restItems.map(_chart.keyAccessor());
if (restItemsSum > 0) {
return topItems.concat([{
others: restKeys,
key: _chart.othersLabel(),
value: restItemsSum
}]);
}
return topItems;
});
MarginMixin
MarginMixin ⇒ Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid Charts.
Kind: global mixin
Param | Type |
---|---|
Base | Object |
- MarginMixin ⇒
MarginMixin
- .margins([margins]) ⇒
Object
|MarginMixin
- .effectiveWidth() ⇒
number
- .effectiveHeight() ⇒
number
- .margins([margins]) ⇒
Object
| MarginMixin
marginMixin.margins([margins]) ⇒ Get or set the margins for a particular coordinate grid chart instance. The margins is stored as an associative Javascript array.
Kind: instance method of MarginMixin
Param | Type | Default |
---|---|---|
[margins] | Object |
{top: 10, right: 50, bottom: 30, left: 30} |
Example
var leftMargin = chart.margins().left; // 30 by default
chart.margins().left = 50;
leftMargin = chart.margins().left; // now 50
number
marginMixin.effectiveWidth() ⇒ Effective width of the chart excluding margins (in pixels).
Kind: instance method of MarginMixin
number
marginMixin.effectiveHeight() ⇒ Effective height of the chart excluding margins (in pixels).
Kind: instance method of MarginMixin
CoordinateGridMixin
Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based concrete chart types, e.g. bar chart, line chart, and bubble chart.
Kind: global mixin
Mixes: ColorMixin
, MarginMixin
- CoordinateGridMixin
- .rescale() ⇒
CoordinateGridMixin
- .rangeChart([rangeChart]) ⇒
CoordinateGridMixin
- .zoomScale([extent]) ⇒
Array.<(Number|Date)>
|CoordinateGridMixin
- .zoomOutRestrict([zoomOutRestrict]) ⇒
Boolean
|CoordinateGridMixin
- .g([gElement]) ⇒
SVGElement
|CoordinateGridMixin
- .mouseZoomable([mouseZoomable]) ⇒
Boolean
|CoordinateGridMixin
- .chartBodyG([chartBodyG]) ⇒
SVGElement
- .x([xScale]) ⇒
d3.scale
|CoordinateGridMixin
- .xUnits([xUnits]) ⇒
function
|CoordinateGridMixin
- .xAxis([xAxis]) ⇒
d3.axis
|Coor
- .rescale() ⇒