bullet

Bullet

Reusable Bullet Chart API class that renders a simple and configurable Bullet Chart.

Requires: module:d3-axis,
Example

let bulletChart = bullet();

bulletChart
    .width(containerWidth);

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

• Bullet
  • exports(_selection, _data) ⏏
    • static
      • .colorSchema(_x) ⇒ Array.<String> | module
      • .customTitle(_x) ⇒ String | module
      • .customSubtitle(_x) ⇒ String | module
      • .exportChart(filename, title) ⇒ Promise
      • .height(_x) ⇒ Number | module
      • .isReverse(_x) ⇒ Boolean | module
      • .margin(_x) ⇒ margin | module
      • .numberFormat(_x) ⇒ string | module
      • .paddingBetweenAxisAndChart(_x) ⇒ Number | module
      • .startMaxRangeOpacity(_x) ⇒ Number | module
      • .ticks(_x) ⇒ Number | module
      • .width(_x) ⇒ Number | module
    • inner
      • ~BulletChartData : Object

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

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

exports.colorSchema(_x) ⇒ Array.<String> | module

Gets or Sets the colorSchema of the chart. The first color from the array will be applied to range bars (the wider bars). The second color from the array will be applied to measure bars (the narrow bars) and the third color will be applied to the marker lines.

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

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

exports.customTitle(_x) ⇒ String | module

Gets or Sets the title for measure identifier range.

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

Param	Type	Description
_x	String	Desired customTitle for chart

Example

bulletChart.customTitle('CPU Usage')

exports.customSubtitle(_x) ⇒ String | module

Gets or Sets the subtitle for measure identifier range.

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

Param	Type	Description
_x	String	Desired customSubtitle for chart

Example

bulletChart.customSubtitle('GHz')

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.height(_x) ⇒ Number | module

Gets or Sets the height of the chart

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

Param	Type	Description
_x	Number	Desired height for the chart

exports.isReverse(_x) ⇒ Boolean | module

Gets or Sets the isReverse status of the chart. If true, the elements will be rendered in reverse order.

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

Param	Type	Default	Description
_x	Boolean	false	Desired height for the chart

exports.margin(_x) ⇒ margin | module

Gets or Sets the margin of the chart

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

Param	Type	Description
_x	Object	Margin object to get/set

exports.numberFormat(_x) ⇒ string | module

Gets or Sets the number format of the bar chart

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

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

exports.paddingBetweenAxisAndChart(_x) ⇒ Number | module

Space between axis and chart

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

Param	Type	Default	Description
_x	Number	5	Space between y axis and chart

exports.startMaxRangeOpacity(_x) ⇒ Number | module

Gets or Sets the starting point of the capacity range.

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

Param	Type	Default	Description
_x	Number	0.5	Desired startMaxRangeOpacity for chart

Example

bulletChart.startMaxRangeOpacity(0.8)

exports.ticks(_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 ticks or Chart module to chain calls
Access: public

Param	Type	Description
_x	Number	= 5 Desired horizontal ticks

exports.width(_x) ⇒ Number | module

Gets or Sets the width of the chart

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

Param	Type	Description
_x	Number	Desired width for the chart

exports~BulletChartData : Object

Kind: inner typedef of exports
Properties

Name	Type	Description
ranges	Array.<Number>	Range that encodes the qualitative measure
measures	Array.<Number>	Range that encodes the performance measure
markers	Array.<Number>	Marker lines that encode the comparative measure
[title]	String	String that sets identification for the measure
[subtitle]	String	String that provides more details on measure identification

Example

{
     ranges: [130, 160, 250],
     measures: [150, 180],
     markers: [175],
     title: 'Title for Bullet',
     subtitle: 'Subtitle'
}