dc.js Class: compositeChart (original) (raw)
dc. compositeChart
new compositeChart(parent [, chartGroup])
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.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| parent | String|node | 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. |
Mixes In:
Source:
Returns:
Type
Example
// create a composite chart under #chart-container1 element using the default global chart group var compositeChart1 = dc.compositeChart('#chart-container1'); // create a composite chart under #chart-container2 element using chart group A var compositeChart2 = dc.compositeChart('#chart-container2', 'chartGroupA');
Methods
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.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| alignYAxes | Boolean | false |
Source:
Returns:
Type
Chart
childOptions( [childOptions])
Get or set chart-specific options for all child charts. This is equivalent to calling.options on each child chart.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| childOptions | Object |
Source:
Returns:
Type
Object|dc.compositeChart
children()
Returns the child charts which are composed into the composite chart.
Source:
Returns:
Type
Array.<dc.baseMixin>
compose( [subChartArray])
Combine the given charts into one single composite coordinate grid chart.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| subChartArray | Array. |
Source:
Returns:
Type
Example
moveChart.compose([ // when creating sub-chart you need to pass in the parent chart dc.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); }), dc.barChart(moveChart) .group(volumeByMonthGroup) .centerBar(true) ]);
rightY( [yScale])
Get or set the y scale for the right axis. The right y scale is typically automatically generated by the chart implementation.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| yScale | d3.scale |
Source:
See:
Returns:
Type
d3.scale|dc.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 ad3.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.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| rightYAxis | d3.axisRight |
Source:
See:
Returns:
Type
d3.axisRight|dc.compositeChart
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]);
rightYAxisLabel( [rightYAxisLabel] [, padding])
Set or get the right y axis label.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| rightYAxisLabel | String | ||
| padding | Number |
Source:
Returns:
Type
String|dc.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.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| shareColors | Boolean | false |
Source:
Returns:
Type
Boolean|dc.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'stitle function!
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| shareTitle | Boolean | true |
Source:
Returns:
Type
Boolean|dc.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.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| useRightAxisGridLines | Boolean | false |
Source:
Returns:
Type
Boolean|dc.compositeChart