line

Line

Line Chart reusable API module that allows us rendering a multi line and configurable chart.

Requires: module:d3-array,
Example

let lineChart = line();

lineChart
    .width(500);

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

Line
- exports(_selection, _data) ⏏
  - static
    - .axisTimeCombinations
    - .animationDuration(_x) ⇒ duration | module
    - .xAxisLabel(_x) ⇒ string | module
    - .yAxisLabel(_x) ⇒ String | module
    - .colorSchema(_x) ⇒ Array.<string> | module
    - .colorMap([_x]) ⇒ object | module
    - ~~.dateLabel(_x) ⇒ number | module~~
    - .xAxisCustomFormat(_x) ⇒ string | module
    - .xAxisFormat(_x) ⇒ String | Module
    - .xTicks(_x) ⇒ Number | module
    - .grid(_x) ⇒ String | module
    - .hasMinimumValueScale(_x) ⇒ hasMinimumValueScale | module
    - .height(_x) ⇒ Number | module
    - .isAnimated(_x) ⇒ isAnimated | module
    - .lines(_x) ⇒ Array.<Object> | module
    - .lineCurve(_x) ⇒ curve | module
    - .lineGradient(_x) ⇒ Number | module
    - .isLoading(flag) ⇒ boolean | module
    - .locale(_x) ⇒ string | module
    - .margin(_x) ⇒ object | module
    - .numberFormat(_x) ⇒ string | module
    - .shouldShowAllDataPoints(_x) ⇒ shouldShowAllDataPoints | module
    - .tooltipThreshold(_x) ⇒ Number | module
    - ~~.topicLabel(_x) ⇒ topicLabel | module~~
    - ~~.valueLabel(_x) ⇒ valueLabel | module~~
    - .yAxisLabelPadding(_x=) ⇒ yAxisLabelPadding | module
    - .yTicks(_x) ⇒ number | module
    - .width(_x) ⇒ number | Module
    - .exportChart(filename, title) ⇒ Promise
    - .on() ⇒ module
    - .xAxisValueType([_x]) ⇒ string | module
    - .xAxisScale([_x]) ⇒ string | module
  - inner
    - ~D3Selection : Array.<Array>
    - ~LineChartFlatData : object
    - ~LineChartDataByTopic : object
    - ~LineChartDataSorted : Array.<object>
    - ~LineChartData : 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	`LineChartData`	The data to attach and generate the chart

exports.axisTimeCombinations

Exposes the constants to be used to force the x axis to respect a certain granularity current options: MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR

Kind: static property of exports
Example

line.xAxisFormat(line.axisTimeCombinations.HOUR_DAY)

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.xAxisLabel(_x) ⇒ `string` | `module`

Gets or Sets the label of the X axis of the chart

Kind: static method of exports
Returns: string | module - Current label of the X axis or Line Chart module to chain calls
Access: public

Param	Type	Description
_x	`string`	Desired label for the X axis

exports.yAxisLabel(_x) ⇒ `String` | `module`

Gets or Sets the label of the Y axis of the chart

Kind: static method of exports
Returns: String | module - Current label of the Y axis or Line Chart module to chain calls
Access: public

Param	Type	Description
_x	`string`	Desired label for the Y axis

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

Gets or Sets the colorSchema of the chart

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

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

exports.dateLabel(_x) ⇒ `number` | `module`

Deprecated

Gets or Sets the dateLabel of the chart

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

Param	Type	Description
_x	`number`	Desired dateLabel for the graph

exports.xAxisCustomFormat(_x) ⇒ `string` | `module`

Exposes the ability to force the chart to show a certain x format It requires a xAxisFormat of 'custom' in order to work. NOTE: localization not supported

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

Param	Type	Description
_x	`string`	Desired format for x axis, one of the d3.js date formats here

exports.xAxisFormat(_x) ⇒ `String` | `Module`

Exposes the ability to force the chart to show a certain x axis grouping

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

Param	Type	Description
_x	`string`	Desired format, a combination of axisTimeCombinations (MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR) Set it to 'custom' to make use of specific formats with xAxisCustomFormat

Example

line.xAxisCustomFormat(line.axisTimeCombinations.HOUR_DAY)

exports.xTicks(_x) ⇒ `Number` | `module`

Exposes the ability to force the chart to show a certain x ticks. It requires a xAxisFormat of 'custom' in order to work. NOTE: This value needs to be a multiple of 2, 5 or 10. They won't always work as expected, as D3 decides at the end how many and where the ticks will appear.

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

Param	Type	Description
_x	`number`	Desired number of x axis ticks (multiple of 2, 5 or 10)

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 Line Chart module to chain calls
Access: public

Param	Type	Description
_x	`string`	Desired mode for the grid ('vertical'

exports.hasMinimumValueScale(_x) ⇒ `hasMinimumValueScale` | `module`

Gets or Sets the hasMinimumValueScale property of the chart, making yAxix bottom value to adjust to the minimum dataset value. By default this is 'false'

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

Param	Type	Description
_x	`Boolean`	Desired minimum value flag

exports.height(_x) ⇒ `Number` | `module`

Gets or Sets the height of the chart

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

Param	Type	Description
_x	`number`	Desired width for the graph

exports.isAnimated(_x) ⇒ `isAnimated` | `module`

Gets or Sets the isAnimated property of the chart, making it to animate when render.

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

Param	Type	Description
_x	`boolean`	= false Desired animation flag

exports.lines(_x) ⇒ `Array.<Object>` | `module`

Add custom horizontal lines to the Chart - this way you are able to plot arbitrary horizontal lines onto the chart with a specific color and a text annotation over the line.

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

Param	Type	Description
_x	`Array.<object>`	Array of Objects describing the lines

Example

line.lines([{
  y: 2,
  name: 'Maximum threshold',
  color: '#ff0000'
}])

exports.lineCurve(_x) ⇒ `curve` | `module`

Gets or Sets the curve of the line chart

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

Param	Type	Description
_x	`curve`	Desired curve for the lines, default 'linear'. Other options are: basis, natural, monotoneX, monotoneY, step, stepAfter, stepBefore, cardinal, and catmullRom. Visit https://github.com/d3/d3-shape#curves for more information.

exports.lineGradient(_x) ⇒ `Number` | `module`

Gets or Sets the gradient colors of the line chart when there is only one line

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

Param	Type	Description
_x	`Array.<string>`	Desired color gradient for the line (array of two hexadecimal numbers)

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
Access: public

Param	Type	Description
flag	`boolean`	Desired value for the loading state

exports.locale(_x) ⇒ `string` | `module`

Pass language tag for the tooltip to localize the date. Uses Intl.DateTimeFormat, for compatability and support, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

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

Param	Type	Description
_x	`string`	A language tag (BCP 47) like 'en-US' or 'fr-FR'

exports.margin(_x) ⇒ `object` | `module`

Gets or Sets the margin object of the chart (top, bottom, left and right)

Kind: static method of exports
Returns: object | module - Current margin or Line 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 line 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.shouldShowAllDataPoints(_x) ⇒ `shouldShowAllDataPoints` | `module`

Gets or Sets the topicLabel of the chart

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

Param	Type	Default	Description
_x	`boolean`	`false`	Whether all data points should be drawn

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 tooltip threshold or Line Chart module to chain calls
Access: public

Param	Type	Description
_x	`number`	Desired tooltip threshold for the graph

exports.topicLabel(_x) ⇒ `topicLabel` | `module`

Deprecated

Gets or Sets the topicLabel of the chart

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

Param	Type	Description
_x	`number`	Desired topicLabel for the graph

exports.valueLabel(_x) ⇒ `valueLabel` | `module`

Deprecated

Gets or Sets the valueLabel of the chart

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

Param	Type	Description
_x	`number`	Desired valueLabel for the graph

exports.yAxisLabelPadding(_x=) ⇒ `yAxisLabelPadding` | `module`

Gets or Sets the yAxisLabelPadding of the chart.

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

Param	Type	Description
_x=	`number`	36 Desired yAxisLabelPadding for the graph

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	Description
_x	`number`	= 5 Desired yTicks

exports.width(_x) ⇒ `number` | `Module`

Gets or Sets the width of the chart

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

Param	Type	Description
_x	`number`	Desired width 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.on() ⇒ `module`

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

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

exports.xAxisValueType([_x]) ⇒ `string` | `module`

Gets or Sets the xAxisValueType. Choose between 'date' and 'number'. When set to number the values of the x-axis must not be dates anymore, but can be arbitrary numbers.

Kind: static method of exports
Returns: string | module - Current value type of the x-axis or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`string`	`"'date'"`	Desired value type of the x-axis

Example

line.xAxisValueType('numeric')

exports.xAxisScale([_x]) ⇒ `string` | `module`

Gets or Sets the xAxisScale. Choose between 'linear' and 'logarithmic'. The setting will only work if xAxisValueType is set to 'number' as well, otherwise it won't influence the visualization.

Kind: static method of exports
Returns: string | module - Current value type of the x-axis or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`string`	`"'linear'"`	Desired value type of the x-axis

Example

line.xAxisValueType('numeric').xAxisScale('logarithmic')