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
      • ~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('number')

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('number').xAxisScale('logarithmic')

exports~D3Selection : Array.<Array>

Kind: inner typedef of exports
Properties

Name	Type	Description
length	number	Size of the selection
parentNode	DOMElement	Parent of the selection

exports~LineChartFlatData : object

Kind: inner typedef of exports
Properties

Name	Type	Description
topicName	string	Topic name (required)
topic	number	Topic identifier (required)
dates	Array.<object>	All date entries with values for that topic in ISO8601 format (required)

Example

[
    {
        topicName: 'San Francisco',
        name: 123,
        date: '2017-01-16T16:00:00-08:00',
        value: 1
    }
]

exports~LineChartDataSorted : Array.<object>

The Data Sorted is calculated internally in the chart in order to pass it to our tooltips

Kind: inner typedef of exports
Properties

Name	Type	Description
date	string
topics	Array.<object>	List of topics with values that date (required)

Example

[
    {
        date: "2015-06-27T07:00:00.000Z",
        topics: [
            {
                "name": 1,
                "value": 1,
                "topicName": "San Francisco"
            },
            {
                "name": 2,
                "value": 20,
                "topicName": "Los Angeles"
            },
            {
                "name": 3,
                "value": 10,
                "topicName": "Oakland"
            }
        ]
    },
    {...}
]

exports~LineChartData : object

The data shape for the line chart. Up to version 2.10.1 this required a "dataByTopic" array. That shape was removed in 3.0.0 -- pass the flat dataset described here instead.

Kind: inner typedef of exports
Properties

Name	Type	Description
data	Array.<LineChartFlatData>	Data values to chart (required)

Example

{
    data: [
        {
            topicName: 'San Francisco',
            name: 1,
            date: '2017-01-16T16:00:00-08:00',
            value: 1
        },
        {
            topicName: 'San Francisco',
            name: 1,
            date: '2017-01-17T16:00:00-08:00',
            value: 2
        },
        {
            topicName: 'Oakland',
            name: 2,
            date: '2017-01-16T16:00:00-08:00',
            value: 3
        },
        {
            topicName: 'Oakland',
            name: 2,
            date: '2017-01-17T16:00:00-08:00',
            value: 7
        }
    ]
}