API Docs for: 3.17.2
Show:

ChartBase Class

Defined in: charts/js/ChartBase.js:1
Module: charts-base
Parent Module: charts

The ChartBase class is an abstract class used to create charts.

Constructor

ChartBase

()

Defined in charts/js/ChartBase.js:1

Methods

_addTooltip

() private

Defined in charts/js/ChartBase.js:969

Adds a tooltip to the dom.

_buildSeriesKeys

(
  • dataProvider
)
private

Defined in charts/js/ChartBase.js:1297

Constructs seriesKeys if not explicitly specified.

Parameters:

  • dataProvider Array

    The dataProvider for the chart.

Returns:

Array

_dataProviderChangeHandler

(
  • e
)
private

Defined in charts/js/ChartBase.js:848

Event handler for dataProviderChange.

Parameters:

_getAllKeys

(
  • dp
)

Defined in charts/js/ChartBase.js:1269

Returns all the keys contained in a dataProvider.

Parameters:

  • dp Array

    Collection of objects to be parsed.

Returns:

Object

_getAxisClass

(
  • t
)
private

Defined in charts/js/ChartBase.js:463

Helper method that returns the axis class that a key references.

Parameters:

Returns:

Axis

_getGraph

() private

Defined in charts/js/ChartBase.js:308

Default value function for the Graph attribute.

Returns:

Graph

_getTooltip

() private

Defined in charts/js/ChartBase.js:1048

Default getter for tooltip attribute.

Returns:

Object

_groupMarkersChangeHandler

(
  • e
)
private

Defined in charts/js/ChartBase.js:275

Handles groupMarkers change event.

Parameters:

_itemRendered

(
  • e
)
private

Defined in charts/js/ChartBase.js:292

Handler for itemRendered event.

Parameters:

_markerEventDispatcher

(
  • e
)
private

Defined in charts/js/ChartBase.js:707

Event handler for marker events.

Parameters:

_planarLabelFunction

(
  • categoryAxis
  • valueItems
  • index
  • seriesArray
  • seriesIndex
)
HTMLElement private

Defined in charts/js/ChartBase.js:1101

Formats tooltip text when interactionType is planar.

Parameters:

  • categoryAxis Axis

    Reference to the categoryAxis of the chart.

  • valueItems Array

    Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data:

    axis
    The value axis of the series.
    key
    The key for the series.
    value
    The value for the series item.
    displayName
    The display name of the series. (defaults to key if not provided)

  • index Number

    The index of the item within its series.

  • seriesArray Array

    Array of series instances for each value item.

  • seriesIndex Number

    The index of the series in the seriesCollection.

Returns:

HTMLElement:

_positionTooltip

(
  • e
)
private

Defined in charts/js/ChartBase.js:932

Positions the tooltip

Parameters:

_setAriaElements

(
  • cb
)
private

Defined in charts/js/ChartBase.js:532

Creates an aria live-region, aria-label and aria-describedby for the Chart.

Parameters:

  • cb Node

    Reference to the Chart's contentBox attribute.

_setDataValues

(
  • val
)
private

Defined in charts/js/ChartBase.js:410

Setter method for dataProvider attribute.

Parameters:

  • val Array

    Array to be set as dataProvider.

Returns:

Array

_setOffscreen

() private

Defined in charts/js/ChartBase.js:562

Sets a node offscreen for use as aria-description or aria-live-regin.

Returns:

Node

_setText

(
  • label
  • val
)
private

Defined in charts/js/ChartBase.js:1242

Updates the content of text field. This method writes a value into a text field using appendChild. If the value is a String, it is converted to a TextNode first.

Parameters:

  • label HTMLElement

    label to be updated

  • val String

    value with which to update the label

_showTooltip

(
  • msg
  • x
  • y
)
private

Defined in charts/js/ChartBase.js:909

Shows a tooltip

Parameters:

  • msg String

    Message to dispaly in the tooltip.

  • x Number

    x-coordinate

  • y Number

    y-coordinate

_tooltipChangeHandler

(
  • e
)
private

Defined in charts/js/ChartBase.js:1217

Event handler for the tooltipChange.

Parameters:

_tooltipLabelFunction

(
  • categoryItem
  • valueItem
)
HTMLElement private

Defined in charts/js/ChartBase.js:1167

Formats tooltip text when interactionType is marker.

Parameters:

  • categoryItem Object

    An object containing the following:

    axis
    The axis to which the category is bound.
    displayName
    The display name set to the category (defaults to key if not provided)
    key
    The key of the category.
    value
    The value of the category

  • valueItem Object

    An object containing the following:

    axis
    The axis to which the item's series is bound.
    displayName
    The display name of the series. (defaults to key if not provided)
    key
    The key for the series.
    value
    The value for the series item.

Returns:

HTMLElement:

_updateTooltip

(
  • val
)
private

Defined in charts/js/ChartBase.js:990

Updates the tooltip attribute.

Parameters:

  • val Object

    Object containing properties for the tooltip.

Returns:

Object

_wereSeriesKeysExplicitlySet

() private

Defined in charts/js/ChartBase.js:260

Utility method to determine if seriesKeys was explicitly provided (for example during construction, or set by the user), as opposed to being derived from the dataProvider for example.

Returns:

boolean true if the seriesKeys attribute was explicitly set.

bindUI

() private

Defined in charts/js/ChartBase.js:591

getAxisByKey

(
  • val
)

Defined in charts/js/ChartBase.js:352

Returns an Axis instance by key reference. If the axis was explicitly set through the axes attribute, the key will be the same as the key used in the axes object. For default axes, the key for the category axis is the value of the categoryKey (category). For the value axis, the default key is values.

Parameters:

  • val String

    Key reference used to look up the axis.

Returns:

Axis

getCategoryAxis

()

Defined in charts/js/ChartBase.js:373

Returns the category axis for the chart.

Returns:

Axis

getSeries

(
  • val
)

Defined in charts/js/ChartBase.js:327

Returns a series instance by index or key value.

Parameters:

Returns:

CartesianSeries

hideTooltip

()

Defined in charts/js/ChartBase.js:953

Hides the default tooltip

initializer

() private

Defined in charts/js/ChartBase.js:499

renderUI

() private

Defined in charts/js/ChartBase.js:511

syncUI

() private

Defined in charts/js/ChartBase.js:582

toggleTooltip

(
  • e
)

Defined in charts/js/ChartBase.js:889

Event listener for toggling the tooltip. If a tooltip is visible, hide it. If not, it will create and show a tooltip based on the event object.

Parameters:

Properties

_axes

Array private

Defined in charts/js/ChartBase.js:490

Collection of axes.

_axisClass

Object private

Defined in charts/js/ChartBase.js:476

Key value pairs of axis types.

_dataProvider

Array private

Defined in charts/js/ChartBase.js:401

Storage for the dataProvider attribute.

_direction

String private

Defined in charts/js/ChartBase.js:391

Default direction of the chart.

Default: horizontal

_seriesCollection

Array private

Defined in charts/js/ChartBase.js:443

Storage for seriesCollection attribute.

_setSeriesCollection

Unknown private

Defined in charts/js/ChartBase.js:452

Setter method for seriesCollection attribute.

Sub-properties:

  • val Array

    Array of either CartesianSeries instances or objects containing series attribute key value pairs.

Attributes

ariaDescription

String

Defined in charts/js/ChartBase.js:87

Sets the aria description for the chart.

Fires event ariaDescriptionChange

Fires when the value for the configuration attribute ariaDescription is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

ariaLabel

String

Defined in charts/js/ChartBase.js:67

Sets the aria-label for the chart.

Fires event ariaLabelChange

Fires when the value for the configuration attribute ariaLabel is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

axesCollection

Array

Defined in charts/js/ChartBase.js:229

Reference to all the axes in the chart.

Fires event axesCollectionChange

Fires when the value for the configuration attribute axesCollection is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

categoryKey

String

Defined in charts/js/ChartBase.js:185

The key value used for the chart's category axis.

Default: category

Fires event categoryKeyChange

Fires when the value for the configuration attribute categoryKey is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

categoryType

String

Defined in charts/js/ChartBase.js:196

Indicates the type of axis to use for the category axis.

category
Specifies a CategoryAxis.
time
Specifies a `TimeAxis

Default: category

Fires event categoryTypeChange

Fires when the value for the configuration attribute categoryType is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

dataProvider

Array

Defined in charts/js/ChartBase.js:11

Data used to generate the chart.

Fires event dataProviderChange

Fires when the value for the configuration attribute dataProvider is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

graph

Graph

Defined in charts/js/ChartBase.js:237

Reference to graph instance.

Fires event graphChange

Fires when the value for the configuration attribute graph is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

groupMarkers

Boolean

Defined in charts/js/ChartBase.js:247

Indicates whether or not markers for a series will be grouped and rendered in a single complex shape instance.

Fires event groupMarkersChange

Fires when the value for the configuration attribute groupMarkers is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

interactionType

String

Defined in charts/js/ChartBase.js:212

Indicates the the type of interactions that will fire events.

marker
Events will be broadcasted when the mouse interacts with individual markers.
planar
Events will be broadcasted when the mouse intersects the plane of any markers on the chart.
none
No events will be broadcasted.

Default: marker

Fires event interactionTypeChange

Fires when the value for the configuration attribute interactionType is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

seriesKeys

Array

Defined in charts/js/ChartBase.js:41

A collection of keys that map to the series axes. If no keys are set, they will be generated automatically depending on the data structure passed into the chart.

Fires event seriesKeysChange

Fires when the value for the configuration attribute seriesKeys is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

tooltip

Object

Defined in charts/js/ChartBase.js:106

Reference to the default tooltip available for the chart.

Contains the following properties:

node
Reference to the actual dom node
showEvent
Event that should trigger the tooltip
hideEvent
Event that should trigger the removal of a tooltip (can be an event or an array of events)
styles
A hash of style properties that will be applied to the tooltip node
show
Indicates whether or not to show the tooltip
markerEventHandler
Displays and hides tooltip based on marker events
planarEventHandler
Displays and hides tooltip based on planar events
markerLabelFunction
Reference to the function used to format a marker event triggered tooltip's text. The method contains the following arguments:
categoryItem
An object containing the following:
axis
The axis to which the category is bound.
displayName
The display name set to the category (defaults to key if not provided).
key
The key of the category.
value
The value of the category.
valueItem
An object containing the following:
axis
The axis to which the item's series is bound.
displayName
The display name of the series. (defaults to key if not provided)
key
The key for the series.
value
The value for the series item.
itemIndex
The index of the item within the series.
series
The CartesianSeries instance of the item.
seriesIndex
The index of the series in the seriesCollection.
The method returns an HTMLElement which is written into the DOM using appendChild. If you override this method and choose to return an html string, you will also need to override the tooltip's setTextFunction method to accept an html string.
planarLabelFunction
Reference to the function used to format a planar event triggered tooltip's text
categoryAxis
CategoryAxis Reference to the categoryAxis of the chart.
valueItems
Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data:
axis
The value axis of the series.
key
The key for the series.
value
The value for the series item.
displayName
The display name of the series. (defaults to key if not provided)
index
The index of the item within its series.
seriesArray
Array of series instances for each value item.
seriesIndex
The index of the series in the seriesCollection.
The method returns an HTMLElement which is written into the DOM using appendChild. If you override this method and choose to return an html string, you will also need to override the tooltip's setTextFunction method to accept an html string.
setTextFunction
Method that writes content returned from planarLabelFunction or markerLabelFunction into the the tooltip node. Has the following signature:
label
The HTMLElement that the content is to be added.
val
The content to be rendered into tooltip. This can be a String or HTMLElement. If an HTML string is used, it will be rendered as a string.

Fires event tooltipChange

Fires when the value for the configuration attribute tooltip is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

Events

markerEvent:click

Defined in charts/js/ChartBase.js:812

Broadcasts when interactionType is set to marker and a series marker has received a click event.

Event Payload:

  • e EventFacade

    Event facade with the following additional properties:

    categoryItem
    Hash containing information about the category Axis.
    valueItem
    Hash containing information about the value Axis.
    node
    The dom node of the marker.
    x
    The x-coordinate of the mouse in relation to the Chart.
    y
    The y-coordinate of the mouse in relation to the Chart.
    pageX
    The x location of the event on the page (including scroll)
    pageY
    The y location of the event on the page (including scroll)
    series
    Reference to the series of the marker.
    index
    Index of the marker in the series.
    seriesIndex
    The order of the marker's series.
    originEvent
    Underlying dom event.

markerEvent:mousedown

Defined in charts/js/ChartBase.js:776

Broadcasts when interactionType is set to marker and a series marker has received a mousedown event.

Event Payload:

  • e EventFacade

    Event facade with the following additional properties:

    categoryItem
    Hash containing information about the category Axis.
    valueItem
    Hash containing information about the value Axis.
    node
    The dom node of the marker.
    x
    The x-coordinate of the mouse in relation to the Chart.
    y
    The y-coordinate of the mouse in relation to the Chart.
    series
    Reference to the series of the marker.
    index
    Index of the marker in the series.
    seriesIndex
    The order of the marker's series.

markerEvent:mouseout

Defined in charts/js/ChartBase.js:758

Broadcasts when interactionType is set to marker and a series marker has received a mouseout event.

Event Payload:

  • e EventFacade

    Event facade with the following additional properties:

    categoryItem
    Hash containing information about the category Axis.
    valueItem
    Hash containing information about the value Axis.
    node
    The dom node of the marker.
    x
    The x-coordinate of the mouse in relation to the Chart.
    y
    The y-coordinate of the mouse in relation to the Chart.
    series
    Reference to the series of the marker.
    index
    Index of the marker in the series.
    seriesIndex
    The order of the marker's series.

markerEvent:mouseover

Defined in charts/js/ChartBase.js:739

Broadcasts when interactionType is set to marker and a series marker has received a mouseover event.

Event Payload:

  • e EventFacade

    Event facade with the following additional properties:

    categoryItem
    Hash containing information about the category Axis.
    valueItem
    Hash containing information about the value Axis.
    node
    The dom node of the marker.
    x
    The x-coordinate of the mouse in relation to the Chart.
    y
    The y-coordinate of the mouse in relation to the Chart.
    series
    Reference to the series of the marker.
    index
    Index of the marker in the series.
    seriesIndex
    The order of the marker's series.

markerEvent:mouseup

Defined in charts/js/ChartBase.js:794

Broadcasts when interactionType is set to marker and a series marker has received a mouseup event.

Event Payload:

  • e EventFacade

    Event facade with the following additional properties:

    categoryItem
    Hash containing information about the category Axis.
    valueItem
    Hash containing information about the value Axis.
    node
    The dom node of the marker.
    x
    The x-coordinate of the mouse in relation to the Chart.
    y
    The y-coordinate of the mouse in relation to the Chart.
    series
    Reference to the series of the marker.
    index
    Index of the marker in the series.
    seriesIndex
    The order of the marker's series.