1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.series.Series'>/**
2 </span> * @class Ext.chart.series.Series
4 * Series is the abstract class containing the common logic to all chart series. Series includes
5 * methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling
6 * mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.
10 * The series class supports listeners via the Observable syntax. Some of these listeners are:
12 * - `itemmouseup` When the user interacts with a marker.
13 * - `itemmousedown` When the user interacts with a marker.
14 * - `itemmousemove` When the user iteracts with a marker.
15 * - `afterrender` Will be triggered when the animation ends or when the series has been rendered completely.
23 * 'afterrender': function() {
24 * console('afterrender');
32 Ext.define('Ext.chart.series.Series', {
34 /* Begin Definitions */
37 observable: 'Ext.util.Observable',
38 labels: 'Ext.chart.Label',
39 highlights: 'Ext.chart.Highlight',
40 tips: 'Ext.chart.Tip',
41 callouts: 'Ext.chart.Callout'
46 <span id='Ext-chart.series.Series-cfg-highlight'> /**
47 </span> * @cfg {Boolean|Object} highlight
48 * If set to `true` it will highlight the markers or the series when hovering
49 * with the mouse. This parameter can also be an object with the same style
50 * properties you would apply to a {@link Ext.draw.Sprite} to apply custom
51 * styles to markers and series.
54 <span id='Ext-chart.series.Series-cfg-tips'> /**
55 </span> * @cfg {Object} tips
56 * Add tooltips to the visualization's markers. The options for the tips are the
57 * same configuration used with {@link Ext.tip.ToolTip}. For example:
63 * renderer: function(storeItem, item) {
64 * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
69 <span id='Ext-chart.series.Series-cfg-type'> /**
70 </span> * @cfg {String} type
71 * The type of series. Set in subclasses.
75 <span id='Ext-chart.series.Series-cfg-title'> /**
76 </span> * @cfg {String} title
77 * The human-readable name of the series.
81 <span id='Ext-chart.series.Series-cfg-showInLegend'> /**
82 </span> * @cfg {Boolean} showInLegend
83 * Whether to show this series in the legend.
87 <span id='Ext-chart.series.Series-cfg-renderer'> /**
88 </span> * @cfg {Function} renderer
89 * A function that can be overridden to set custom styling properties to each rendered element.
90 * Passes in (sprite, record, attributes, index, store) to the function.
92 renderer: function(sprite, record, attributes, index, store) {
96 <span id='Ext-chart.series.Series-cfg-shadowAttributes'> /**
97 </span> * @cfg {Array} shadowAttributes
98 * An array with shadow attributes
100 shadowAttributes: null,
102 //@private triggerdrawlistener flag
103 triggerAfterDraw: false,
105 <span id='Ext-chart.series.Series-cfg-listeners'> /**
106 </span> * @cfg {Object} listeners
107 * An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback functions are:
110 * <li>itemmouseover</li>
111 * <li>itemmouseout</li>
112 * <li>itemmousedown</li>
113 * <li>itemmouseup</li>
117 constructor: function(config) {
120 Ext.apply(me, config);
123 me.shadowGroups = [];
125 me.mixins.labels.constructor.call(me, config);
126 me.mixins.highlights.constructor.call(me, config);
127 me.mixins.tips.constructor.call(me, config);
128 me.mixins.callouts.constructor.call(me, config);
139 <span id='Ext-chart.series.Series-event-titlechange'> /**
140 </span> * @event titlechange
141 * Fires when the series title is changed via {@link #setTitle}.
142 * @param {String} title The new title value
143 * @param {Number} index The index in the collection of titles
148 me.mixins.observable.constructor.call(me, config);
152 itemmouseover: me.onItemMouseOver,
153 itemmouseout: me.onItemMouseOut,
154 mouseleave: me.onMouseLeave
158 // @private set the bbox and clipBox for the series
159 setBBox: function(noGutter) {
162 chartBBox = chart.chartBBox,
163 gutterX = noGutter ? 0 : chart.maxGutter[0],
164 gutterY = noGutter ? 0 : chart.maxGutter[1],
170 width: chartBBox.width,
171 height: chartBBox.height
173 me.clipBox = clipBox;
176 x: (clipBox.x + gutterX) - (chart.zoom.x * chart.zoom.width),
177 y: (clipBox.y + gutterY) - (chart.zoom.y * chart.zoom.height),
178 width: (clipBox.width - (gutterX * 2)) * chart.zoom.width,
179 height: (clipBox.height - (gutterY * 2)) * chart.zoom.height
184 // @private set the animation for the sprite
185 onAnimate: function(sprite, attr) {
187 sprite.stopAnimation();
188 if (me.triggerAfterDraw) {
189 return sprite.animate(Ext.applyIf(attr, me.chart.animate));
191 me.triggerAfterDraw = true;
192 return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
194 'afteranimate': function() {
195 me.triggerAfterDraw = false;
196 me.fireEvent('afterrender');
203 // @private return the gutter.
204 getGutters: function() {
208 // @private wrapper for the itemmouseover event.
209 onItemMouseOver: function(item) {
211 if (item.series === me) {
213 me.highlightItem(item);
221 // @private wrapper for the itemmouseout event.
222 onItemMouseOut: function(item) {
224 if (item.series === me) {
225 me.unHighlightItem();
232 // @private wrapper for the mouseleave event.
233 onMouseLeave: function() {
235 me.unHighlightItem();
241 <span id='Ext-chart.series.Series-method-getItemForPoint'> /**
242 </span> * For a given x/y point relative to the Surface, find a corresponding item from this
246 * @return {Object} An object describing the item, or null if there is no matching item. The exact contents of
247 * this object will vary by series type, but should always contain at least the following:
249 * <li>{Ext.chart.series.Series} series - the Series object to which the item belongs</li>
250 * <li>{Object} value - the value(s) of the item's data point</li>
251 * <li>{Array} point - the x/y coordinates relative to the chart box of a single point
252 * for this data item, which can be used as e.g. a tooltip anchor point.</li>
253 * <li>{Ext.draw.Sprite} sprite - the item's rendering Sprite.
256 getItemForPoint: function(x, y) {
257 //if there are no items to query just return null.
258 if (!this.items || !this.items.length || this.seriesIsHidden) {
266 if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
269 for (i = 0, ln = items.length; i < ln; i++) {
270 if (items[i] && this.isItemInPoint(x, y, items[i], i)) {
278 isItemInPoint: function(x, y, item, i) {
282 <span id='Ext-chart.series.Series-method-hideAll'> /**
283 </span> * Hides all the elements in the series.
285 hideAll: function() {
288 item, len, i, sprite;
290 me.seriesIsHidden = true;
291 me._prevShowMarkers = me.showMarkers;
293 me.showMarkers = false;
297 for (i = 0, len = items.length; i < len; i++) {
299 sprite = item.sprite;
301 sprite.setAttributes({
308 <span id='Ext-chart.series.Series-method-showAll'> /**
309 </span> * Shows all the elements in the series.
311 showAll: function() {
313 prevAnimate = me.chart.animate;
314 me.chart.animate = false;
315 me.seriesIsHidden = false;
316 me.showMarkers = me._prevShowMarkers;
318 me.chart.animate = prevAnimate;
321 <span id='Ext-chart.series.Series-method-getLegendColor'> /**
322 </span> * Returns a string with the color to be used for the series legend item.
324 getLegendColor: function(index) {
325 var me = this, fill, stroke;
326 if (me.seriesStyle) {
327 fill = me.seriesStyle.fill;
328 stroke = me.seriesStyle.stroke;
329 if (fill && fill != 'none') {
337 <span id='Ext-chart.series.Series-method-visibleInLegend'> /**
338 </span> * Checks whether the data field should be visible in the legend
340 * @param {Number} index The index of the current item
342 visibleInLegend: function(index){
343 var excludes = this.__excludes;
345 return !excludes[index];
347 return !this.seriesIsHidden;
350 <span id='Ext-chart.series.Series-method-setTitle'> /**
351 </span> * Changes the value of the {@link #title} for the series.
352 * Arguments can take two forms:
354 * <li>A single String value: this will be used as the new single title for the series (applies
355 * to series with only one yField)</li>
356 * <li>A numeric index and a String value: this will set the title for a single indexed yField.</li>
358 * @param {Number} index
359 * @param {String} title
361 setTitle: function(index, title) {
365 if (Ext.isString(index)) {
370 if (Ext.isArray(oldTitle)) {
371 oldTitle[index] = title;
376 me.fireEvent('titlechange', title, index);
379 </pre></pre></body></html>