docs/source/Series.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-series-Series'>/**
  19 </span> * @class Ext.chart.series.Series
  20  *
  21  * Series is the abstract class containing the common logic to all chart series. Series includes
  22  * methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling
  23  * mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.
  24  *
  25  * ## Listeners
  26  *
  27  * The series class supports listeners via the Observable syntax. Some of these listeners are:
  28  *
  29  *  - `itemmouseup` When the user interacts with a marker.
  30  *  - `itemmousedown` When the user interacts with a marker.
  31  *  - `itemmousemove` When the user iteracts with a marker.
  32  *  - `afterrender` Will be triggered when the animation ends or when the series has been rendered completely.
  33  *
  34  * For example:
  35  *
  36  *     series: [{
  37  *             type: 'column',
  38  *             axis: 'left',
  39  *             listeners: {
  40  *                     'afterrender': function() {
  41  *                             console('afterrender');
  42  *                     }
  43  *             },
  44  *             xField: 'category',
  45  *             yField: 'data1'
  46  *     }]
  47  *
  48  */
  49 Ext.define('Ext.chart.series.Series', {
  50
  51     /* Begin Definitions */
  52
  53     mixins: {
  54         observable: 'Ext.util.Observable',
  55         labels: 'Ext.chart.Label',
  56         highlights: 'Ext.chart.Highlight',
  57         tips: 'Ext.chart.Tip',
  58         callouts: 'Ext.chart.Callout'
  59     },
  60
  61     /* End Definitions */
  62
  63 <span id='Ext-chart-series-Series-cfg-highlight'>    /**
  64 </span>     * @cfg {Boolean|Object} highlight
  65      * If set to `true` it will highlight the markers or the series when hovering
  66      * with the mouse. This parameter can also be an object with the same style
  67      * properties you would apply to a {@link Ext.draw.Sprite} to apply custom
  68      * styles to markers and series.
  69      */
  70
  71 <span id='Ext-chart-series-Series-cfg-tips'>    /**
  72 </span>     * @cfg {Object} tips
  73      * Add tooltips to the visualization's markers. The options for the tips are the
  74      * same configuration used with {@link Ext.tip.ToolTip}. For example:
  75      *
  76      *     tips: {
  77      *       trackMouse: true,
  78      *       width: 140,
  79      *       height: 28,
  80      *       renderer: function(storeItem, item) {
  81      *         this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  82      *       }
  83      *     },
  84      */
  85
  86 <span id='Ext-chart-series-Series-cfg-type'>    /**
  87 </span>     * @cfg {String} type
  88      * The type of series. Set in subclasses.
  89      */
  90     type: null,
  91
  92 <span id='Ext-chart-series-Series-cfg-title'>    /**
  93 </span>     * @cfg {String} title
  94      * The human-readable name of the series.
  95      */
  96     title: null,
  97
  98 <span id='Ext-chart-series-Series-cfg-showInLegend'>    /**
  99 </span>     * @cfg {Boolean} showInLegend
 100      * Whether to show this series in the legend.
 101      */
 102     showInLegend: true,
 103
 104 <span id='Ext-chart-series-Series-cfg-renderer'>    /**
 105 </span>     * @cfg {Function} renderer
 106      * A function that can be overridden to set custom styling properties to each rendered element.
 107      * Passes in (sprite, record, attributes, index, store) to the function.
 108      */
 109     renderer: function(sprite, record, attributes, index, store) {
 110         return attributes;
 111     },
 112
 113 <span id='Ext-chart-series-Series-cfg-shadowAttributes'>    /**
 114 </span>     * @cfg {Array} shadowAttributes
 115      * An array with shadow attributes
 116      */
 117     shadowAttributes: null,
 118
 119     //@private triggerdrawlistener flag
 120     triggerAfterDraw: false,
 121
 122 <span id='Ext-chart-series-Series-cfg-listeners'>    /**
 123 </span>     * @cfg {Object} listeners
 124      * An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback functions are:
 125      *
 126      *  &lt;ul&gt;
 127      *      &lt;li&gt;itemmouseover&lt;/li&gt;
 128      *      &lt;li&gt;itemmouseout&lt;/li&gt;
 129      *      &lt;li&gt;itemmousedown&lt;/li&gt;
 130      *      &lt;li&gt;itemmouseup&lt;/li&gt;
 131      *  &lt;/ul&gt;
 132      */
 133
 134     constructor: function(config) {
 135         var me = this;
 136         if (config) {
 137             Ext.apply(me, config);
 138         }
 139
 140         me.shadowGroups = [];
 141
 142         me.mixins.labels.constructor.call(me, config);
 143         me.mixins.highlights.constructor.call(me, config);
 144         me.mixins.tips.constructor.call(me, config);
 145         me.mixins.callouts.constructor.call(me, config);
 146
 147         me.addEvents({
 148             scope: me,
 149             itemmouseover: true,
 150             itemmouseout: true,
 151             itemmousedown: true,
 152             itemmouseup: true,
 153             mouseleave: true,
 154             afterdraw: true,
 155
 156 <span id='Ext-chart-series-Series-event-titlechange'>            /**
 157 </span>             * @event titlechange
 158              * Fires when the series title is changed via {@link #setTitle}.
 159              * @param {String} title The new title value
 160              * @param {Number} index The index in the collection of titles
 161              */
 162             titlechange: true
 163         });
 164
 165         me.mixins.observable.constructor.call(me, config);
 166
 167         me.on({
 168             scope: me,
 169             itemmouseover: me.onItemMouseOver,
 170             itemmouseout: me.onItemMouseOut,
 171             mouseleave: me.onMouseLeave
 172         });
 173     },
 174
 175     // @private set the bbox and clipBox for the series
 176     setBBox: function(noGutter) {
 177         var me = this,
 178             chart = me.chart,
 179             chartBBox = chart.chartBBox,
 180             gutterX = noGutter ? 0 : chart.maxGutter[0],
 181             gutterY = noGutter ? 0 : chart.maxGutter[1],
 182             clipBox, bbox;
 183
 184         clipBox = {
 185             x: chartBBox.x,
 186             y: chartBBox.y,
 187             width: chartBBox.width,
 188             height: chartBBox.height
 189         };
 190         me.clipBox = clipBox;
 191
 192         bbox = {
 193             x: (clipBox.x + gutterX) - (chart.zoom.x * chart.zoom.width),
 194             y: (clipBox.y + gutterY) - (chart.zoom.y * chart.zoom.height),
 195             width: (clipBox.width - (gutterX * 2)) * chart.zoom.width,
 196             height: (clipBox.height - (gutterY * 2)) * chart.zoom.height
 197         };
 198         me.bbox = bbox;
 199     },
 200
 201     // @private set the animation for the sprite
 202     onAnimate: function(sprite, attr) {
 203         var me = this;
 204         sprite.stopAnimation();
 205         if (me.triggerAfterDraw) {
 206             return sprite.animate(Ext.applyIf(attr, me.chart.animate));
 207         } else {
 208             me.triggerAfterDraw = true;
 209             return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
 210                 listeners: {
 211                     'afteranimate': function() {
 212                         me.triggerAfterDraw = false;
 213                         me.fireEvent('afterrender');
 214                     }
 215                 }
 216             }));
 217         }
 218     },
 219
 220     // @private return the gutter.
 221     getGutters: function() {
 222         return [0, 0];
 223     },
 224
 225     // @private wrapper for the itemmouseover event.
 226     onItemMouseOver: function(item) {
 227         var me = this;
 228         if (item.series === me) {
 229             if (me.highlight) {
 230                 me.highlightItem(item);
 231             }
 232             if (me.tooltip) {
 233                 me.showTip(item);
 234             }
 235         }
 236     },
 237
 238     // @private wrapper for the itemmouseout event.
 239     onItemMouseOut: function(item) {
 240         var me = this;
 241         if (item.series === me) {
 242             me.unHighlightItem();
 243             if (me.tooltip) {
 244                 me.hideTip(item);
 245             }
 246         }
 247     },
 248
 249     // @private wrapper for the mouseleave event.
 250     onMouseLeave: function() {
 251         var me = this;
 252         me.unHighlightItem();
 253         if (me.tooltip) {
 254             me.hideTip();
 255         }
 256     },
 257
 258 <span id='Ext-chart-series-Series-method-getItemForPoint'>    /**
 259 </span>     * For a given x/y point relative to the Surface, find a corresponding item from this
 260      * series, if any.
 261      * @param {Number} x
 262      * @param {Number} y
 263      * @return {Object} An object describing the item, or null if there is no matching item. The exact contents of
 264      *                  this object will vary by series type, but should always contain at least the following:
 265      *                  &lt;ul&gt;
 266      *                    &lt;li&gt;{Ext.chart.series.Series} series - the Series object to which the item belongs&lt;/li&gt;
 267      *                    &lt;li&gt;{Object} value - the value(s) of the item's data point&lt;/li&gt;
 268      *                    &lt;li&gt;{Array} point - the x/y coordinates relative to the chart box of a single point
 269      *                        for this data item, which can be used as e.g. a tooltip anchor point.&lt;/li&gt;
 270      *                    &lt;li&gt;{Ext.draw.Sprite} sprite - the item's rendering Sprite.
 271      *                  &lt;/ul&gt;
 272      */
 273     getItemForPoint: function(x, y) {
 274         //if there are no items to query just return null.
 275         if (!this.items || !this.items.length || this.seriesIsHidden) {
 276             return null;
 277         }
 278         var me = this,
 279             items = me.items,
 280             bbox = me.bbox,
 281             item, i, ln;
 282         // Check bounds
 283         if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
 284             return null;
 285         }
 286         for (i = 0, ln = items.length; i &lt; ln; i++) {
 287             if (items[i] &amp;&amp; this.isItemInPoint(x, y, items[i], i)) {
 288                 return items[i];
 289             }
 290         }
 291
 292         return null;
 293     },
 294
 295     isItemInPoint: function(x, y, item, i) {
 296         return false;
 297     },
 298
 299 <span id='Ext-chart-series-Series-method-hideAll'>    /**
 300 </span>     * Hides all the elements in the series.
 301      */
 302     hideAll: function() {
 303         var me = this,
 304             items = me.items,
 305             item, len, i, sprite;
 306
 307         me.seriesIsHidden = true;
 308         me._prevShowMarkers = me.showMarkers;
 309
 310         me.showMarkers = false;
 311         //hide all labels
 312         me.hideLabels(0);
 313         //hide all sprites
 314         for (i = 0, len = items.length; i &lt; len; i++) {
 315             item = items[i];
 316             sprite = item.sprite;
 317             if (sprite) {
 318                 sprite.setAttributes({
 319                     hidden: true
 320                 }, true);
 321             }
 322         }
 323     },
 324
 325 <span id='Ext-chart-series-Series-method-showAll'>    /**
 326 </span>     * Shows all the elements in the series.
 327      */
 328     showAll: function() {
 329         var me = this,
 330             prevAnimate = me.chart.animate;
 331         me.chart.animate = false;
 332         me.seriesIsHidden = false;
 333         me.showMarkers = me._prevShowMarkers;
 334         me.drawSeries();
 335         me.chart.animate = prevAnimate;
 336     },
 337
 338 <span id='Ext-chart-series-Series-method-getLegendColor'>    /**
 339 </span>     * Returns a string with the color to be used for the series legend item.
 340      */
 341     getLegendColor: function(index) {
 342         var me = this, fill, stroke;
 343         if (me.seriesStyle) {
 344             fill = me.seriesStyle.fill;
 345             stroke = me.seriesStyle.stroke;
 346             if (fill &amp;&amp; fill != 'none') {
 347                 return fill;
 348             }
 349             return stroke;
 350         }
 351         return '#000';
 352     },
 353
 354 <span id='Ext-chart-series-Series-method-visibleInLegend'>    /**
 355 </span>     * Checks whether the data field should be visible in the legend
 356      * @private
 357      * @param {Number} index The index of the current item
 358      */
 359     visibleInLegend: function(index){
 360         var excludes = this.__excludes;
 361         if (excludes) {
 362             return !excludes[index];
 363         }
 364         return !this.seriesIsHidden;
 365     },
 366
 367 <span id='Ext-chart-series-Series-method-setTitle'>    /**
 368 </span>     * Changes the value of the {@link #title} for the series.
 369      * Arguments can take two forms:
 370      * &lt;ul&gt;
 371      * &lt;li&gt;A single String value: this will be used as the new single title for the series (applies
 372      * to series with only one yField)&lt;/li&gt;
 373      * &lt;li&gt;A numeric index and a String value: this will set the title for a single indexed yField.&lt;/li&gt;
 374      * &lt;/ul&gt;
 375      * @param {Number} index
 376      * @param {String} title
 377      */
 378     setTitle: function(index, title) {
 379         var me = this,
 380             oldTitle = me.title;
 381
 382         if (Ext.isString(index)) {
 383             title = index;
 384             index = 0;
 385         }
 386
 387         if (Ext.isArray(oldTitle)) {
 388             oldTitle[index] = title;
 389         } else {
 390             me.title = title;
 391         }
 392
 393         me.fireEvent('titlechange', title, index);
 394     }
 395 });
 396 </pre>
 397 </body>
 398 </html>