AlloyUI - API Docs

  • API Docs for Version: 3.1.0-deprecated.60

    • Show:

    ChartBase Class

    Defined in: yui3/src/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 yui3/src/charts/js/ChartBase.js:1

    Methods

    _addTooltip

    () private

    Defined in yui3/src/charts/js/ChartBase.js:967

    Adds a tooltip to the dom.

    _buildSeriesKeys

    (
    • dataProvider
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:1295

    Constructs seriesKeys if not explicitly specified.

    Parameters:

    • dataProvider Array

      <p>The dataProvider for the chart.</p>

    Returns:

    <p>Array</p>

    _dataProviderChangeHandler

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:846

    Event handler for dataProviderChange.

    Parameters:

    • e Object

      <p>Event object.</p>

    _getAllKeys

    (
    • dp
    )

    Defined in yui3/src/charts/js/ChartBase.js:1267

    Returns all the keys contained in a dataProvider.

    Parameters:

    • dp Array

      <p>Collection of objects to be parsed.</p>

    Returns:

    <p>Object</p>

    _getAxisClass

    (
    • t
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:463

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

    Parameters:

    • t String

      <p>The type of axis.</p>

    Returns:

    <p>Axis</p>

    _getGraph

    () private

    Defined in yui3/src/charts/js/ChartBase.js:308

    Default value function for the Graph attribute.

    Returns:

    <p>Graph</p>

    _getTooltip

    () private

    Defined in yui3/src/charts/js/ChartBase.js:1046

    Default getter for tooltip attribute.

    Returns:

    <p>Object</p>

    _groupMarkersChangeHandler

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:275

    Handles groupMarkers change event.

    Parameters:

    • e Object

      <p>Event object.</p>

    _itemRendered

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:292

    Handler for itemRendered event.

    Parameters:

    • e Object

      <p>Event object.</p>

    _markerEventDispatcher

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:705

    Event handler for marker events.

    Parameters:

    • e Object

      <p>Event object.</p>

    _planarLabelFunction

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

    Defined in yui3/src/charts/js/ChartBase.js:1099

    Formats tooltip text when interactionType is planar.

    Parameters:

    • categoryAxis Axis

      <p>Reference to the categoryAxis of the chart.</p>

    • valueItems Array

      <p>Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data: <dl> <dt>axis</dt><dd>The value axis of the series.</dd> <dt>key</dt><dd>The key for the series.</dd> <dt>value</dt><dd>The value for the series item.</dd> <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd> </dl></p>

    • index Number

      <p>The index of the item within its series.</p>

    • seriesArray Array

      <p>Array of series instances for each value item.</p>

    • seriesIndex Number

      <p>The index of the series in the <code>seriesCollection</code>.</p>

    Returns:

    HTMLElement:

    _positionTooltip

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:930

    Positions the tooltip

    Parameters:

    • e Object

      <p>Event object.</p>

    _setAriaElements

    (
    • cb
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:532

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

    Parameters:

    • cb Node

      <p>Reference to the Chart's <code>contentBox</code> attribute.</p>

    _setDataValues

    (
    • val
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:410

    Setter method for dataProvider attribute.

    Parameters:

    • val Array

      <p>Array to be set as <code>dataProvider</code>.</p>

    Returns:

    <p>Array</p>

    _setOffscreen

    () private

    Defined in yui3/src/charts/js/ChartBase.js:562

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

    Returns:

    <p>Node</p>

    _setText

    (
    • label
    • val
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:1240

    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

      <p>label to be updated</p>

    • val String

      <p>value with which to update the label</p>

    _showTooltip

    (
    • msg
    • x
    • y
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:907

    Shows a tooltip

    Parameters:

    • msg String

      <p>Message to dispaly in the tooltip.</p>

    • x Number

      <p>x-coordinate</p>

    • y Number

      <p>y-coordinate</p>

    _tooltipChangeHandler

    (
    • e
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:1215

    Event handler for the tooltipChange.

    Parameters:

    • e Object

      <p>Event object.</p>

    _tooltipLabelFunction

    (
    • categoryItem
    • valueItem
    )
    HTMLElement private

    Defined in yui3/src/charts/js/ChartBase.js:1165

    Formats tooltip text when interactionType is marker.

    Parameters:

    • categoryItem Object

      <p>An object containing the following: <dl> <dt>axis</dt><dd>The axis to which the category is bound.</dd> <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided)</dd> <dt>key</dt><dd>The key of the category.</dd> <dt>value</dt><dd>The value of the category</dd> </dl></p>

    • valueItem Object

      <p>An object containing the following: <dl> <dt>axis</dt><dd>The axis to which the item's series is bound.</dd> <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd> <dt>key</dt><dd>The key for the series.</dd> <dt>value</dt><dd>The value for the series item.</dd> </dl></p>

    Returns:

    HTMLElement:

    _updateTooltip

    (
    • val
    )
    private

    Defined in yui3/src/charts/js/ChartBase.js:988

    Updates the tooltip attribute.

    Parameters:

    • val Object

      <p>Object containing properties for the tooltip.</p>

    Returns:

    <p>Object</p>

    _wereSeriesKeysExplicitlySet

    () private

    Defined in yui3/src/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:

    <p>boolean true if the <code>seriesKeys</code> attribute was explicitly set.</p>

    bindUI

    () private

    Defined in yui3/src/charts/js/ChartBase.js:591

    getAxisByKey

    (
    • val
    )

    Defined in yui3/src/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

      <p>Key reference used to look up the axis.</p>

    Returns:

    <p>Axis</p>

    getCategoryAxis

    ()

    Defined in yui3/src/charts/js/ChartBase.js:373

    Returns the category axis for the chart.

    Returns:

    <p>Axis</p>

    getSeries

    (
    • val
    )

    Defined in yui3/src/charts/js/ChartBase.js:327

    Returns a series instance by index or key value.

    Parameters:

    • val Object

    Returns:

    <p>CartesianSeries</p>

    hideTooltip

    ()

    Defined in yui3/src/charts/js/ChartBase.js:951

    Hides the default tooltip

    initializer

    () private

    Defined in yui3/src/charts/js/ChartBase.js:499

    renderUI

    () private

    Defined in yui3/src/charts/js/ChartBase.js:511

    syncUI

    () private

    Defined in yui3/src/charts/js/ChartBase.js:582

    toggleTooltip

    (
    • e
    )

    Defined in yui3/src/charts/js/ChartBase.js:887

    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 Object

      <p>Event object.</p>

    Properties

    _axes

    Array private

    Defined in yui3/src/charts/js/ChartBase.js:490

    Collection of axes.

    _axisClass

    Object private

    Defined in yui3/src/charts/js/ChartBase.js:476

    Key value pairs of axis types.

    _dataProvider

    Array private

    Defined in yui3/src/charts/js/ChartBase.js:401

    Storage for the dataProvider attribute.

    _direction

    String private

    Defined in yui3/src/charts/js/ChartBase.js:391

    Default direction of the chart.

    Default: horizontal

    _seriesCollection

    Array private

    Defined in yui3/src/charts/js/ChartBase.js:443

    Storage for seriesCollection attribute.

    _setSeriesCollection

    Unknown private

    Defined in yui3/src/charts/js/ChartBase.js:452

    Setter method for seriesCollection attribute.

    Sub-properties:

    • val Array

      <p>Array of either <code>CartesianSeries</code> instances or objects containing series attribute key value pairs.</p>

    Attributes

    ariaDescription

    String

    Defined in yui3/src/charts/js/ChartBase.js:87

    Sets the aria description for the chart.

    ariaLabel

    String

    Defined in yui3/src/charts/js/ChartBase.js:67

    Sets the aria-label for the chart.

    axesCollection

    Array

    Defined in yui3/src/charts/js/ChartBase.js:229

    Reference to all the axes in the chart.

    categoryKey

    String

    Defined in yui3/src/charts/js/ChartBase.js:185

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

    Default: category

    categoryType

    String

    Defined in yui3/src/charts/js/ChartBase.js:196

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

    <dl> <dt>category</dt><dd>Specifies a CategoryAxis.</dd> <dt>time</dt><dd>Specifies a `TimeAxis</dd> </dl>

    Default: category

    dataProvider

    Array

    Defined in yui3/src/charts/js/ChartBase.js:11

    Data used to generate the chart.

    graph

    Graph

    Defined in yui3/src/charts/js/ChartBase.js:237

    Reference to graph instance.

    groupMarkers

    Boolean

    Defined in yui3/src/charts/js/ChartBase.js:247

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

    interactionType

    String

    Defined in yui3/src/charts/js/ChartBase.js:212

    Indicates the the type of interactions that will fire events.

    <dl> <dt>marker</dt><dd>Events will be broadcasted when the mouse interacts with individual markers.</dd> <dt>planar</dt><dd>Events will be broadcasted when the mouse intersects the plane of any markers on the chart.</dd> <dt>none</dt><dd>No events will be broadcasted.</dd> </dl>

    Default: marker

    seriesKeys

    Array

    Defined in yui3/src/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.

    tooltip

    Object

    Defined in yui3/src/charts/js/ChartBase.js:106

    Reference to the default tooltip available for the chart. <p>Contains the following properties:</p> <dl> <dt>node</dt><dd>Reference to the actual dom node</dd> <dt>showEvent</dt><dd>Event that should trigger the tooltip</dd> <dt>hideEvent</dt><dd>Event that should trigger the removal of a tooltip (can be an event or an array of events)</dd> <dt>styles</dt><dd>A hash of style properties that will be applied to the tooltip node</dd> <dt>show</dt><dd>Indicates whether or not to show the tooltip</dd> <dt>markerEventHandler</dt><dd>Displays and hides tooltip based on marker events</dd> <dt>planarEventHandler</dt><dd>Displays and hides tooltip based on planar events</dd> <dt>markerLabelFunction</dt><dd>Reference to the function used to format a marker event triggered tooltip's text. The method contains the following arguments: <dl> <dt>categoryItem</dt><dd>An object containing the following: <dl> <dt>axis</dt><dd>The axis to which the category is bound.</dd> <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided).</dd> <dt>key</dt><dd>The key of the category.</dd> <dt>value</dt><dd>The value of the category.</dd> </dl> </dd> <dt>valueItem</dt><dd>An object containing the following: <dl> <dt>axis</dt><dd>The axis to which the item's series is bound.</dd> <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd> <dt>key</dt><dd>The key for the series.</dd> <dt>value</dt><dd>The value for the series item.</dd> </dl> </dd> <dt>itemIndex</dt><dd>The index of the item within the series.</dd> <dt>series</dt><dd> The CartesianSeries instance of the item.</dd> <dt>seriesIndex</dt><dd>The index of the series in the seriesCollection.</dd> </dl> 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. </dd> <dt>planarLabelFunction</dt><dd>Reference to the function used to format a planar event triggered tooltip's text <dl> <dt>categoryAxis</dt><dd> CategoryAxis Reference to the categoryAxis of the chart. <dt>valueItems</dt><dd>Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data: <dl> <dt>axis</dt><dd>The value axis of the series.</dd> <dt>key</dt><dd>The key for the series.</dd> <dt>value</dt><dd>The value for the series item.</dd> <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd> </dl> </dd> <dt>index</dt><dd>The index of the item within its series.</dd> <dt>seriesArray</dt><dd>Array of series instances for each value item.</dd> <dt>seriesIndex</dt><dd>The index of the series in the seriesCollection.</dd> </dl> </dd> </dl> 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. </dd> <dt>setTextFunction</dt><dd>Method that writes content returned from planarLabelFunction or markerLabelFunction into the the tooltip node. Has the following signature: <dl> <dt>label</dt><dd>The HTMLElement that the content is to be added.</dd> <dt>val</dt><dd>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.</dd> </dl> </dd> </dl>

    Events

    markerEvent:click

    Defined in yui3/src/charts/js/ChartBase.js:810

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

    Event Payload:

    • e EventFacade

      <p>Event facade with the following additional properties: <dl> <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd> <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd> <dt>node</dt><dd>The dom node of the marker.</dd> <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd> <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd> <dt>pageX</dt><dd>The x location of the event on the page (including scroll)</dd> <dt>pageY</dt><dd>The y location of the event on the page (including scroll)</dd> <dt>series</dt><dd>Reference to the series of the marker.</dd> <dt>index</dt><dd>Index of the marker in the series.</dd> <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd> <dt>originEvent</dt><dd>Underlying dom event.</dd> </dl></p>

    markerEvent:mousedown

    Defined in yui3/src/charts/js/ChartBase.js:774

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

    Event Payload:

    • e EventFacade

      <p>Event facade with the following additional properties: <dl> <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd> <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd> <dt>node</dt><dd>The dom node of the marker.</dd> <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd> <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd> <dt>series</dt><dd>Reference to the series of the marker.</dd> <dt>index</dt><dd>Index of the marker in the series.</dd> <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd> </dl></p>

    markerEvent:mouseout

    Defined in yui3/src/charts/js/ChartBase.js:756

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

    Event Payload:

    • e EventFacade

      <p>Event facade with the following additional properties: <dl> <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd> <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd> <dt>node</dt><dd>The dom node of the marker.</dd> <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd> <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd> <dt>series</dt><dd>Reference to the series of the marker.</dd> <dt>index</dt><dd>Index of the marker in the series.</dd> <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd> </dl></p>

    markerEvent:mouseover

    Defined in yui3/src/charts/js/ChartBase.js:737

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

    Event Payload:

    • e EventFacade

      <p>Event facade with the following additional properties: <dl> <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd> <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd> <dt>node</dt><dd>The dom node of the marker.</dd> <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd> <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd> <dt>series</dt><dd>Reference to the series of the marker.</dd> <dt>index</dt><dd>Index of the marker in the series.</dd> <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd> </dl></p>

    markerEvent:mouseup

    Defined in yui3/src/charts/js/ChartBase.js:792

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

    Event Payload:

    • e EventFacade

      <p>Event facade with the following additional properties: <dl> <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd> <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd> <dt>node</dt><dd>The dom node of the marker.</dd> <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd> <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd> <dt>series</dt><dd>Reference to the series of the marker.</dd> <dt>index</dt><dd>Index of the marker in the series.</dd> <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd> </dl></p>