ChartBase.js revision 97a5407d7fca2fea1fb9c9e7a7cc06183bc1c839
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * The ChartBase class is an abstract class used to create charts.
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @module charts
4778ff543a041ac356d6e661cc9b66c3fafa2092Adam Moore * @class ChartBase
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * @constructor
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * Reference to the default tooltip available for the chart.
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * <p>Contains the following properties:</p>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <dt>node</dt><dd>Reference to the actual dom node</dd>
87d6b0a14cce52c4faa4b78fc9878eb553dab0d5Adam Moore * <dt>showEvent</dt><dd>Event that should trigger the tooltip</dd>
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * <dt>hideEvent</dt><dd>Event that should trigger the removal of a tooltip (can be an event or an array of events)</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <dt>styles</dt><dd>A hash of style properties that will be applied to the tooltip node</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <dt>show</dt><dd>Indicates whether or not to show the tooltip</dd>
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * <dt>markerEventHandler</dt><dd>Displays and hides tooltip based on marker events</dd>
173310d032abe522e8645dd148cc28591cd128eaAdam Moore * <dt>planarEventHandler</dt><dd>Displays and hides tooltip based on planar events</dd>
173310d032abe522e8645dd148cc28591cd128eaAdam Moore * <dt>markerLabelFunction</dt><dd>Reference to the function used to format a marker event triggered tooltip's text. The method contains
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * the following arguments:
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * <dt>categoryItem</dt><dd>An object containing the following:
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * <dt>axis</dt><dd>The axis to which the category is bound.</dd>
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided).</dd>
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * <dt>key</dt><dd>The key of the category.</dd>
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * <dt>value</dt><dd>The value of the category.</dd>
16bec62f211cecacdbbc2cb4632f079ef8c7f936Adam Moore * <dt>valueItem</dt><dd>An object containing the following:
c74cf2305e301535acc8a5d42be60e93dcbd97daAdam Moore * <dt>axis</dt><dd>The axis to which the item's series is bound.</dd>
16bec62f211cecacdbbc2cb4632f079ef8c7f936Adam Moore * <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
16bec62f211cecacdbbc2cb4632f079ef8c7f936Adam Moore * <dt>key</dt><dd>The key for the series.</dd>
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore * <dt>value</dt><dd>The value for the series item.</dd>
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>itemIndex</dt><dd>The index of the item within the series.</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <dt>series</dt><dd> The `CartesianSeries` instance of the item.</dd>
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>seriesIndex</dt><dd>The index of the series in the `seriesCollection`.</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * 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
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * will also need to override the tooltip's `setTextFunction` method to accept an html string.
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>planarLabelFunction</dt><dd>Reference to the function used to format a planar event triggered tooltip's text
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>categoryAxis</dt><dd> `CategoryAxis` Reference to the categoryAxis of the chart.
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <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:
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>axis</dt><dd>The value axis of the series.</dd>
489c0c8e2523f1bcd1acee1173c6d85f6a7edd6aAdam Moore * <dt>key</dt><dd>The key for the series.</dd>
4390434761f176b0f8d7a71c00a6e0141aa1752cAdam Moore * <dt>value</dt><dd>The value for the series item.</dd>
4390434761f176b0f8d7a71c00a6e0141aa1752cAdam Moore * <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>index</dt><dd>The index of the item within its series.</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>seriesArray</dt><dd>Array of series instances for each value item.</dd>
91ff24e65531ce8bf171340d9384182f8c168af3Adam Moore * <dt>seriesIndex</dt><dd>The index of the series in the `seriesCollection`.</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * 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
173310d032abe522e8645dd148cc28591cd128eaAdam Moore * will also need to override the tooltip's `setTextFunction` method to accept an html string.
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>setTextFunction</dt><dd>Method that writes content returned from `planarLabelFunction` or `markerLabelFunction` into the the tooltip node.
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * has the following signature:
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>label</dt><dd>The `HTMLElement` that the content is to be added.</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <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
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * string.</dd>
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * @attribute tooltip
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * @type Object
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * The key value used for the chart's category axis.
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * @attribute categoryKey
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * @type String
458ca79ae0e4fa1eb1a2a3c6f67401a191d025e4Adam Moore * @default category
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * Indicates the type of axis to use for the category axis.
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>category</dt><dd>Specifies a `CategoryAxis`.</dd>
13a50a8c4ecfe16d42abb7605f9451f76e02dc42Adam Moore * <dt>time</dt><dd>Specifies a `TimeAxis</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @attribute categoryType
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @type String
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @default category
16bec62f211cecacdbbc2cb4632f079ef8c7f936Adam Moore * Indicates the the type of interactions that will fire events.
87d6b0a14cce52c4faa4b78fc9878eb553dab0d5Adam Moore * <dt>marker</dt><dd>Events will be broadcasted when the mouse interacts with individual markers.</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * <dt>planar</dt><dd>Events will be broadcasted when the mouse intersects the plane of any markers on the chart.</dd>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * <dt>none</dt><dd>No events will be broadcasted.</dd>
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @attribute interactionType
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @type String
d4dbc3afb5bb9cfd13490b358dc37bf951104ca7Adam Moore * @default marker
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * Data used to generate the chart.
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * @attribute dataProvider
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @type Array
87d6b0a14cce52c4faa4b78fc9878eb553dab0d5Adam Moore * A collection of keys that map to the series axes. If no keys are set,
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * they will be generated automatically depending on the data structure passed into
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * the chart.
efa57736d44cf446f1661497a8645bd388b493fbAdam Moore * @attribute seriesKeys
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @type Array
ba2701ee03e94104edf19911ee0989f8cee11088Adam Moore * Reference to all the axes in the chart.
ba2701ee03e94104edf19911ee0989f8cee11088Adam Moore * @attribute axesCollection
489c0c8e2523f1bcd1acee1173c6d85f6a7edd6aAdam Moore * @type Array
1b298c6f0ef597aa4ab0b8bcb25430b6c9a87749Adam Moore * Reference to graph instance.
7cd8fe832d4f91bed468c7498ff957c446f90aaaAdam Moore * @attribute graph
23209f57fce338501bc1dc828a991d103732b92fAdam Moore * @type Graph
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * Indicates whether or not markers for a series will be grouped and rendered in a single complex shape instance.
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @attribute groupMarkers
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @type Boolean
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * Default value function for the `Graph` attribute.
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @method _getGraph
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @return Graph
b39897a381c2203466da5568bfd2862a54a81311Adam Moore graph.after("chartRendered", Y.bind(function(e) {
b9f576e4a859f38cf945d867cf23fdbb84347564Adam Moore * Returns a series instance by index or key value.
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore * @method getSeries
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @param val
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @return CartesianSeries
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * Returns an `Axis` instance by key reference. If the axis was explicitly set through the `axes` attribute,
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * the key will be the same as the key used in the `axes` object. For default axes, the key for
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * the category axis is the value of the `categoryKey` (`category`). For the value axis, the default
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * key is `values`.
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore * @method getAxisByKey
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @param {String} val Key reference used to look up the axis.
3395e5fc071521d4e6b258ef4c7c0ef38601b94eAdam Moore * @return Axis
8c3fae1cf2a8dfa82c53922a6f99ab7b991b959cAdam Moore * Returns the category axis for the chart.
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * @method getCategoryAxis
8c3fae1cf2a8dfa82c53922a6f99ab7b991b959cAdam Moore * @return Axis
return axis;
_dataProvider: null,
var hash,
dp = [],
return dp;
return val;
_seriesCollection: null,
* @param {Array} val Array of either `CartesianSeries` instances or objects containing series attribute key value pairs.
_getAxisClass: function(t)
return this._axisClass[t];
_axisClass: {
_axes: null,
initializer: function()
this._axesRenderQueue = [];
renderUI: function()
this._addAxes();
this._addSeries();
this._addTooltip();
this._redraw();
bindUI: function()
len,
if(tt)
if(showEvent)
if(hideEvent)
for(; i < len; ++i)
_markerEventDispatcher: function(e)
e.halt();
* Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseover event.
* Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseout event.
* Broadcasts when `interactionType` is set to `marker` and a series marker has received a mousedown event.
* Broadcasts when `interactionType` is set to `marker` and a series marker has received a mouseup event.
* Broadcasts when `interactionType` is set to `marker` and a series marker has received a click event.
originEvent: e,
_dataProviderChangeHandler: function(e)
axis;
if(axes)
for(i in axes)
toggleTooltip: function(e)
this.hideTooltip();
if(msg)
_positionTooltip: function(e)
if(node)
hideTooltip: function()
_addTooltip: function()
if(oldNode)
node,
props = {
if(styles)
for(i in styles)
for(i in props)
return tt;
_getTooltip: function()
tt = {
show: true,
markerEventHandler: function(e)
msg = tt.markerLabelFunction.apply(this, [e.categoryItem, e.valueItem, e.index, e.series, e.seriesIndex]);
planarEventHandler: function(e)
msg ,
msg = tt.planarLabelFunction.apply(this, [categoryAxis, e.valueItem, e.index, e.items, e.seriesIndex]);
return tt;
* @param {Array} 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,
if(categoryAxis)
msg.appendChild(DOCUMENT.createTextNode(categoryAxis.get("labelFunction").apply(this, [categoryAxis.getKeyValueAt(this.get("categoryKey"), index), categoryAxis.get("labelFormat")])));
for(; i < len; ++i)
msg.appendChild(DOCUMENT.createTextNode(valueItem.displayName + ": " + axis.get("labelFunction").apply(this, [axis.getKeyValueAt(valueItem.key, index), axis.get("labelFormat")])));
return msg;
* <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided)</dd>
": " + categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
": " + valueItem.axis.get("labelFunction").apply(this, [valueItem.value, valueItem.axis.get("labelFormat")])));
return msg;
_tooltipChangeHandler: function(e)
this._addTooltip();