CartesianChart Class
The CartesianChart class creates a chart with horizontal and vertical axes.
Constructor
CartesianChart
()
Item Index
Methods
Properties
Attributes
- allowContentOverflow
- ariaDescription
- ariaLabel
- axes
- axesCollection
- categoryAxis
- categoryAxisName
- categoryKey
- categoryType
- dataProvider
- direction
- graph
- groupMarkers
- horizontalGridlines
- interactionType
- seriesCollection
- seriesKeys
- showAreaFill
- showLines
- showMarkers
- stacked
- styles
- tooltip
- type
- valueAxisName
- verticalGridlines
Methods
_addToAxesCollection
-
position
-
axis
Adds axis instance to the appropriate array based on position
_getAllKeys
-
dp
Returns all the keys contained in a dataProvider
.
Parameters:
-
dp
ArrayCollection of objects to be parsed.
Returns:
Object
_getAriaMessage
-
key
Returns the appropriate message based on the key press.
Parameters:
-
key
NumberThe keycode that was pressed.
Returns:
String
getAxisByKey
-
val
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
StringKey reference used to look up the axis.
Returns:
Axis
getCategoryAxis
()
Returns the category axis for the chart.
Returns:
Axis
getSeries
-
val
Returns a series instance by index or key value.
Parameters:
-
val
Object
Returns:
CartesianSeries
getSeriesItems
-
series
-
index
Returns an object literal containing a categoryItem and a valueItem for a given series index. Below is the structure of each:
Parameters:
-
series
CartesianSeriesReference to a series.
-
index
NumberIndex of the specified item within a series.
Returns:
Object An object literal containing the following:
- categoryItem
- Object containing the following data related to the category axis of the series.
- axis
- Reference to the category axis of the series.
- key
- Category key for the series.
- value
- Value on the axis corresponding to the series index.
- valueItem
- Object containing the following data related to the category axis of the series.
- axis
- Reference to the value axis of the series.
- key
- Value key for the series.
- value
- Value on the axis corresponding to the series index.
hideTooltip
()
Hides the default tooltip
toggleTooltip
-
e
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:
-
e
ObjectEvent object.
Properties
Attributes
allowContentOverflow
Boolean
Indicates whether axis labels are allowed to overflow beyond the bounds of the chart's content box.
Fires event allowContentOverflowChange
Fires when the value for the configuration attribute allowContentOverflow
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
ariaDescription
String
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
ariaLabel
String
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
axes
Object
Axes to appear in the chart. This can be a key indexed hash of axis instances or object literals used to construct the appropriate axes.
Fires event axesChange
Fires when the value for the configuration attribute axes
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
axesCollection
Array
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
categoryAxis
Axis
Reference to the category axis used by the chart.
Fires event categoryAxisChange
Fires when the value for the configuration attribute categoryAxis
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
categoryAxisName
String
Indicates the key value used to identify a category axis in the axes
hash. If
not specified, the categoryKey attribute value will be used.
Fires event categoryAxisNameChange
Fires when the value for the configuration attribute categoryAxisName
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
categoryKey
String
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
categoryType
String
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
dataProvider
Array
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
direction
String
Direction of chart's category axis when there is no series collection specified. Charts can be horizontal or vertical. When the chart type is column, the chart is horizontal. When the chart type is bar, the chart is vertical.
Fires event directionChange
Fires when the value for the configuration attribute direction
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
graph
Graph
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
groupMarkers
Boolean
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
horizontalGridlines
Gridlines
Reference to the horizontalGridlines for the chart.
Fires event horizontalGridlinesChange
Fires when the value for the configuration attribute horizontalGridlines
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
interactionType
String
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
seriesCollection
Array
Collection of series to appear on the chart. This can be an array of Series instances or object literals used to construct the appropriate series.
Fires event seriesCollectionChange
Fires when the value for the configuration attribute seriesCollection
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
seriesKeys
Array
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
showAreaFill
Boolean
Indicates whether or not an area is filled in a combo chart.
Fires event showAreaFillChange
Fires when the value for the configuration attribute showAreaFill
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
showLines
Boolean
Indicates whether to display lines in a combo chart.
Fires event showLinesChange
Fires when the value for the configuration attribute showLines
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
showMarkers
Boolean
Indicates whether to display markers in a combo chart.
Fires event showMarkersChange
Fires when the value for the configuration attribute showMarkers
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
stacked
Boolean
Indicates whether or not the chart is stacked.
Fires event stackedChange
Fires when the value for the configuration attribute stacked
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
styles
Object
Style properties for the chart. Contains a key indexed hash of the following:
- series
- A key indexed hash containing references to the
styles
attribute for each series in the chart. Specific style attributes vary depending on the series: - axes
- A key indexed hash containing references to the
styles
attribute for each axes in the chart. Specific style attributes can be found in the Axis class. - graph
- A reference to the
styles
attribute in the chart. Specific style attributes can be found in the Graph class.
Fires event stylesChange
Fires when the value for the configuration attribute styles
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
tooltip
Object
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
.
HTMLElement
which is written into the DOM usingappendChild
. If you override this method and choose to return an html string, you will also need to override the tooltip'ssetTextFunction
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
.
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
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
orHTMLElement
. 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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
type
String
Type of chart when there is no series collection specified.
Fires event typeChange
Fires when the value for the configuration attribute type
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
valueAxisName
String
Indicates the key value used to identify a the series axis when an axis not generated.
Fires event valueAxisNameChange
Fires when the value for the configuration attribute valueAxisName
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
verticalGridlines
Gridlines
Reference to the verticalGridlines for the chart.
Fires event verticalGridlinesChange
Fires when the value for the configuration attribute verticalGridlines
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
EventFacadeAn Event Facade object with the following attribute-specific properties added:
Events
markerEvent:click
Broadcasts when interactionType
is set to marker
and a series marker has received a click event.
Event Payload:
-
e
EventFacadeEvent 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
Broadcasts when interactionType
is set to marker
and a series marker has received a mousedown event.
Event Payload:
-
e
EventFacadeEvent 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
Broadcasts when interactionType
is set to marker
and a series marker has received a mouseout event.
Event Payload:
-
e
EventFacadeEvent 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
Broadcasts when interactionType
is set to marker
and a series marker has received a mouseover event.
Event Payload:
-
e
EventFacadeEvent 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
Broadcasts when interactionType
is set to marker
and a series marker has received a mouseup event.
Event Payload:
-
e
EventFacadeEvent 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.
planarEvent:mouseout
Broadcasts when interactionType
is set to planar
and a series' marker plane has received a mouseout event.
Event Payload:
planarEvent:mouseover
Broadcasts when interactionType
is set to planar
and a series' marker plane has received a mouseover event.
Event Payload:
-
e
EventFacadeEvent facade with the following additional properties:
- categoryItem
- An array of hashes, each containing information about the category
Axis
of each marker whose plane has been intersected. - valueItem
- An array of hashes, each containing information about the value
Axis
of each marker whose plane has been intersected. - 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)
- items
- An array including all the series which contain a marker whose plane has been intersected.
- index
- Index of the markers in their respective series.
- originEvent
- Underlying dom event.