grouped-bar

Grouped-bar

Grouped Bar Chart reusable API module that allows us rendering a multi grouped bar and configurable chart.

Requires: module:d3-array,
Example

let groupedBar = GroupedBar();

groupedBar
    .width(containerWidth);

d3Selection.select('.css-selector')
    .datum(dataset.data)
    .call(groupedBar);

• Grouped-bar
  • exports(_selection, _data) ⏏
    • static
      • .animationDuration(_x) ⇒ duration | module
      • .betweenBarsPadding([_x]) ⇒ Number | module
      • .betweenGroupsPadding([_x]) ⇒ Number | module
      • .colorMap([_x]) ⇒ object | module
      • .colorSchema(_x) ⇒ colorSchema | module
      • .exportChart(filename, title) ⇒ Promise
      • .groupLabel(_x) ⇒ groupLabel | module
      • .grid([_x]) ⇒ String | module
      • .height([_x]) ⇒ height | module
      • .isHorizontal([_x]) ⇒ isHorizontal | module
      • .isAnimated([_x]) ⇒ isAnimated | module
      • .isLoading(flag) ⇒ boolean | module
      • .margin(_x) ⇒ margin | module
      • .nameLabel(_x) ⇒ nameLabel | module
      • .numberFormat(_x) ⇒ Array.<string> | module
      • .on() ⇒ module
      • .tooltipThreshold([_x]) ⇒ Number | module
      • .valueLabel(_x) ⇒ Number | module
      • .valueLocale([_x]) ⇒ LocaleObject | module
      • .width([_x]) ⇒ Number | module
      • .xTicks([_x]) ⇒ Number | module
      • .yAxisLabel(_x) ⇒ String | module
      • .yAxisLabelOffset([_x]) ⇒ Number | module
      • .yTicks([_x]) ⇒ Number | module
      • .yTickTextOffset([_x]) ⇒ Object | module
    • inner
      • ~GroupedBarChartData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection and data provided

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	GroupedBarChartData	The data to attach and generate the chart

exports.animationDuration(_x) ⇒ duration | module

Gets or Sets the duration of the animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	Number	1200	Desired animation duration for the graph

exports.betweenBarsPadding([_x]) ⇒ Number | module

Gets or Sets the padding between bars.

Kind: static method of exports
Returns: Number | module - Current padding or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	0.1	Padding value to get/set

exports.betweenGroupsPadding([_x]) ⇒ Number | module

Gets or Sets the padding between groups of bars.

Kind: static method of exports
Returns: Number | module - Current group padding or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	0.1	Padding value to get/set

exports.colorMap([_x]) ⇒ object | module

Gets or Sets the colorMap of the chart

Kind: static method of exports
Returns: object | module - Current colorMap or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	object		Color map

Example

groupedBar.colorMap({groupName: 'colorHex', groupName2: 'colorString'})

exports.colorSchema(_x) ⇒ colorSchema | module

Gets or Sets the colorSchema of the chart

Kind: static method of exports
Returns: colorSchema | module - Current colorSchema or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<String>	Desired colorSchema for the graph

exports.exportChart(filename, title) ⇒ Promise

Chart exported to png and a download action is fired

Kind: static method of exports
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

Param	Type	Description
filename	String	File title for the resulting picture
title	String	Title to add at the top of the exported picture

exports.groupLabel(_x) ⇒ groupLabel | module

Deprecated

Gets or Sets the groupLabel of the chart

Kind: static method of exports
Returns: groupLabel | module - Current groupLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired groupLabel for the graph

exports.grid([_x]) ⇒ String | module

Gets or Sets the grid mode.

Kind: static method of exports
Returns: String | module - Current mode of the grid or Area Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	String		Desired mode for the grid ('vertical'

exports.height([_x]) ⇒ height | module

Gets or Sets the height of the chart

Kind: static method of exports
Returns: height | module - Current height or Area Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	500	Desired width for the graph

exports.isHorizontal([_x]) ⇒ isHorizontal | module

Gets or Sets the horizontal direction of the chart

Kind: static method of exports
Returns: isHorizontal | module - If it is horizontal or Bar Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	false	Desired horizontal direction for the graph

exports.isAnimated([_x]) ⇒ isAnimated | module

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'

Kind: static method of exports
Returns: isAnimated | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Default	Description
[_x]	Boolean	false	Desired animation flag

exports.isLoading(flag) ⇒ boolean | module

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls * @public

Param	Type	Description
flag	boolean	Desired value for the loading state

exports.margin(_x) ⇒ margin | module

Gets or Sets the margin of the chart

Kind: static method of exports
Returns: margin | module - Current margin or Area Chart module to chain calls
Access: public

Param	Type	Description
_x	Object	Margin object to get/set

exports.nameLabel(_x) ⇒ nameLabel | module

Deprecated

Gets or Sets the nameLabel of the chart

Kind: static method of exports
Returns: nameLabel | module - Current nameLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired dateLabel for the graph

exports.numberFormat(_x) ⇒ Array.<string> | module

Gets or Sets the numberFormat of the chart

Kind: static method of exports
Returns: Array.<string> | module - Current numberFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<string>	= ',f' Desired numberFormat for the chart. See examples here

exports.on() ⇒ module

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut, and customClick

Kind: static method of exports
Returns: module - Bar Chart
Access: public

exports.tooltipThreshold([_x]) ⇒ Number | module

Gets or Sets the minimum width of the graph in order to show the tooltip NOTE: This could also depend on the aspect ratio

Kind: static method of exports
Returns: Number | module - Current tooltipThreshold or Area Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	480	Minimum width of chart to show the tooltip

exports.valueLabel(_x) ⇒ Number | module

Deprecated

Gets or Sets the valueLabel of the chart

Kind: static method of exports
Returns: Number | module - Current valueLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	Desired valueLabel for the graph

exports.valueLocale([_x]) ⇒ LocaleObject | module

Gets or Sets the locale which our formatting functions use. Check the d3-format docs for the required values.

Kind: static method of exports
Returns: LocaleObject | module - Current locale object or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	LocaleObject		_x Desired locale object format.

Example

groupedBarChart
 .locale({thousands: '.', grouping: [3], currency: ["$", ""], decimal: "."})

exports.width([_x]) ⇒ Number | module

Gets or Sets the width of the chart

Kind: static method of exports
Returns: Number | module - Current width or Area Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	960	Desired width for the graph

exports.xTicks([_x]) ⇒ Number | module

Gets or Sets the number of ticks of the x axis on the chart

Kind: static method of exports
Returns: Number | module - Current xTicks or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	5	Desired xTicks

exports.yAxisLabel(_x) ⇒ String | module

Gets or Sets the y-axis label of the chart

Kind: static method of exports
Returns: String | module - Current yAxisLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	String	Desired label string

Example

groupedBar.yAxisLabel('Ticket Sales')

exports.yAxisLabelOffset([_x]) ⇒ Number | module

Gets or Sets the offset of the yAxisLabel of the chart. The method accepts both positive and negative values.

Kind: static method of exports
Returns: Number | module - Current yAxisLabelOffset or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	-60	Desired offset for the label

Example

groupedBar.yAxisLabelOffset(-55)

exports.yTicks([_x]) ⇒ Number | module

Gets or Sets the number of ticks of the y axis on the chart

Kind: static method of exports
Returns: Number | module - Current yTicks or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number	5	Desired vertical ticks

exports.yTickTextOffset([_x]) ⇒ Object | module

Gets or Sets the x and y offset of ticks of the y axis on the chart

Kind: static method of exports
Returns: Object | module - Current offset or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Object	{ y: -8, x: -20 }	Desired offset

exports~GroupedBarChartData : Array.<Object>

Kind: inner typedef of exports
Properties

Name	Type	Description
name	String	Name of the entry
group	String	group of the entry
value	Number	Value of the entry

Example

[
    {
        name: "2011-01",
        group: "Direct",
        value: 0
    }
]