Show:
Extends: ChartBase
Module: charts-base
Parent Module: charts

The PieChart class creates a pie chart

Constructor

PieChart

()

Methods

_addAxes

() private

Adds axes to the chart.

_addSeries

() private

Renders the Graph.

_addTooltip

() private

<p>Adds a tooltip to the dom.</p>

_buildSeriesKeys

(
  • dataProvider
)
private

<p>Constructs seriesKeys if not explicitly specified.</p>

Parameters:

  • dataProvider Array

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

Returns:

<p><p>Array</p></p>

_dataProviderChangeHandler

(
  • e
)
private

<p>Event handler for dataProviderChange.</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_getAllKeys

(
  • dp
)

<p>Returns all the keys contained in a <code>dataProvider</code>.</p>

Parameters:

  • dp Array

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

Returns:

<p><p>Object</p></p>

_getAriaMessage

(
  • key
)

Returns the appropriate message based on the key press.

Parameters:

  • key Number

    The keycode that was pressed.

Returns:

String

_getAxisClass

(
  • t
)
private

<p>Helper method that returns the axis class that a key references.</p>

Parameters:

  • t String

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

Returns:

<p><p>Axis</p></p>

_getDefaultAxes

() private

Generates and returns a key-indexed object containing Axis instances or objects used to create Axis instances.

Returns:

Object

_getGraph

() private

<p>Default value function for the <code>Graph</code> attribute.</p>

Returns:

<p><p>Graph</p></p>

_getSeriesCollection

() private

Calculates and returns a seriesCollection.

Returns:

Array

_getTooltip

() private

<p>Default getter for <code>tooltip</code> attribute.</p>

Returns:

<p><p>Object</p></p>

_groupMarkersChangeHandler

(
  • e
)
private

<p>Handles groupMarkers change event.</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_itemRendered

(
  • e
)
private

<p>Handler for itemRendered event.</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_markerEventDispatcher

(
  • e
)
private

<p>Event handler for marker events.</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_parseAxes

(
  • val
)
private

Creates Axis instances.

Parameters:

  • val Object

    Object containing Axis instances or objects in which to construct Axis instances.

Returns:

Object

_parseSeriesAxes

(
  • c
)
private

Parse and sets the axes for the chart.

Parameters:

  • c Array

    A collection PieSeries instance.

_planarLabelFunction

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

<p>Formats tooltip text when <code>interactionType</code> is <code>planar</code>.</p>

Parameters:

  • categoryAxis Axis

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

  • valueItems Array

    <p><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></p>

  • index Number

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

  • seriesArray Array

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

  • seriesIndex Number

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

Returns:

HTMLElement:

_positionTooltip

(
  • e
)
private

<p>Positions the tooltip</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_redraw

() private

Redraws the chart instance.

_setAriaElements

(
  • cb
)
private

<p>Creates an aria <code>live-region</code>, <code>aria-label</code> and <code>aria-describedby</code> for the Chart.</p>

Parameters:

  • cb Node

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

_setDataValues

(
  • val
)
private

<p>Setter method for <code>dataProvider</code> attribute.</p>

Parameters:

  • val Array

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

Returns:

<p><p>Array</p></p>

_setOffscreen

() private

<p>Sets a node offscreen for use as aria-description or aria-live-regin.</p>

Returns:

<p><p>Node</p></p>

_setText

(
  • label
  • val
)
private

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

Parameters:

  • label HTMLElement

    <p><p>label to be updated</p></p>

  • val String

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

_showTooltip

(
  • msg
  • x
  • y
)
private

<p>Shows a tooltip</p>

Parameters:

  • msg String

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

  • x Number

    <p><p>x-coordinate</p></p>

  • y Number

    <p><p>y-coordinate</p></p>

_sizeChanged

(
  • e
)
private

Handler for sizeChanged event.

Parameters:

  • e Object

    Event object.

_tooltipChangeHandler

(
  • e
)
private

<p>Event handler for the tooltipChange.</p>

Parameters:

  • e Object

    <p><p>Event object.</p></p>

_tooltipLabelFunction

(
  • categoryItem
  • valueItem
  • itemIndex
  • series
)
HTMLElement private

Inherited from ChartBase but overwritten in yui3/src/charts/js/PieChart.js:290

Formats tooltip text for a pie chart.

Parameters:

  • categoryItem Object

    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>

  • valueItem Object

    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>

  • itemIndex Number

    The index of the item within the series.

  • series CartesianSeries

    The PieSeries instance of the item.

Returns:

HTMLElement:

_updateTooltip

(
  • val
)
private

<p>Updates the tooltip attribute.</p>

Parameters:

  • val Object

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

Returns:

<p><p>Object</p></p>

_wereSeriesKeysExplicitlySet

() private

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

Returns:

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

bindUI

() private

destructor

() protected

Destructor implementation for the PieChart class.

getAxisByKey

(
  • val
)

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

Parameters:

  • val String

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

Returns:

<p><p>Axis</p></p>

getCategoryAxis

()

<p>Returns the category axis for the chart.</p>

Returns:

<p><p>Axis</p></p>

getSeries

(
  • val
)

<p>Returns a series instance by index or key value.</p>

Parameters:

  • val Object

Returns:

<p><p>CartesianSeries</p></p>

getSeriesItem

(
  • series
  • index
)

Returns an object literal containing a categoryItem and a valueItem for a given series index.

Parameters:

  • series Object

    Reference to a series.

  • index Object

    Index of the specified item within a series.

Returns:

Object

hideTooltip

()

<p>Hides the default tooltip</p>

initializer

() private

renderUI

() private

syncUI

() private

toggleTooltip

(
  • e
)

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

Parameters:

  • e Object

    <p><p>Event object.</p></p>

Properties

_axes

Array private

<p>Collection of axes.</p>

_axisClass

Object private

<p>Key value pairs of axis types.</p>

_dataProvider

Array private

<p>Storage for the <code>dataProvider</code> attribute.</p>

_direction

String private

<p>Default direction of the chart.</p>

Default: horizontal

_seriesCollection

Array private

<p>Storage for <code>seriesCollection</code> attribute.</p>

_setSeriesCollection

Unknown private

<p>Setter method for <code>seriesCollection</code> attribute.</p>

Sub-properties:

  • val Array

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

Attributes

ariaDescription

String

Inherited from ChartBase but overwritten in yui3/src/charts/js/PieChart.js:434

Sets the aria description for the chart.

ariaLabel

String

<p>Sets the <code>aria-label</code> for the chart.</p>

axes

Object

Axes to appear in the chart.

axesCollection

Array

<p>Reference to all the axes in the chart.</p>

categoryKey

String

<p>The key value used for the chart's category axis.</p>

Default: category

categoryType

String

<p>Indicates the type of axis to use for the category axis.</p> <p><dl> <dt>category</dt><dd>Specifies a <code>CategoryAxis</code>.</dd> <dt>time</dt><dd>Specifies a `TimeAxis</dd> </dl></p>

Default: category

dataProvider

Array

<p>Data used to generate the chart.</p>

graph

Graph

<p>Reference to graph instance.</p>

groupMarkers

Boolean

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

interactionType

String

<p>Indicates the the type of interactions that will fire events.</p> <p><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></p>

Default: marker

seriesCollection

Array

Collection of series to appear on the chart. This can be an array of Series instances or object literals used to describe a Series instance.

seriesKeys

Array

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

tooltip

Object

<p>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 <code>CartesianSeries</code> instance of the item.</dd> <dt>seriesIndex</dt><dd>The index of the series in the <code>seriesCollection</code>.</dd> </dl> The method returns an <code>HTMLElement</code> which is written into the DOM using <code>appendChild</code>. If you override this method and choose to return an html string, you will also need to override the tooltip's <code>setTextFunction</code> 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> <code>CategoryAxis</code> 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 <code>seriesCollection</code>.</dd> </dl> </dd> </dl> The method returns an <code>HTMLElement</code> which is written into the DOM using <code>appendChild</code>. If you override this method and choose to return an html string, you will also need to override the tooltip's <code>setTextFunction</code> method to accept an html string. </dd> <dt>setTextFunction</dt><dd>Method that writes content returned from <code>planarLabelFunction</code> or <code>markerLabelFunction</code> into the the tooltip node. Has the following signature: <dl> <dt>label</dt><dd>The <code>HTMLElement</code> that the content is to be added.</dd> <dt>val</dt><dd>The content to be rendered into tooltip. This can be a <code>String</code> or <code>HTMLElement</code>. If an HTML string is used, it will be rendered as a string.</dd> </dl> </dd> </dl></p>

type

String

Type of chart when there is no series collection specified.

Events

markerEvent:click

<p>Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a click event.</p>

Event Payload:

  • e EventFacade

    <p><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></p>

markerEvent:mousedown

<p>Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mousedown event.</p>

Event Payload:

  • e EventFacade

    <p><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></p>

markerEvent:mouseout

<p>Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseout event.</p>

Event Payload:

  • e EventFacade

    <p><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></p>

markerEvent:mouseover

<p>Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseover event.</p>

Event Payload:

  • e EventFacade

    <p><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></p>

markerEvent:mouseup

<p>Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseup event.</p>

Event Payload:

  • e EventFacade

    <p><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></p>