docs/source/Area.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-Area'>/**
  19 </span> * @class Ext.chart.series.Area
  20  * @extends Ext.chart.series.Cartesian
  21  *
  22  &lt;p&gt;
  23     Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.
  24     As with all other series, the Area Series must be appended in the *series* Chart array configuration. See the Chart
  25     documentation for more information. A typical configuration object for the area series could be:
  26  &lt;/p&gt;
  27 {@img Ext.chart.series.Area/Ext.chart.series.Area.png Ext.chart.series.Area chart series}
  28   &lt;pre&gt;&lt;code&gt;
  29    var store = Ext.create('Ext.data.JsonStore', {
  30         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  31         data: [
  32             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  33             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  34             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  35             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  36             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  37         ]
  38     });
  39
  40     Ext.create('Ext.chart.Chart', {
  41         renderTo: Ext.getBody(),
  42         width: 500,
  43         height: 300,
  44         store: store,
  45         axes: [{
  46             type: 'Numeric',
  47             grid: true,
  48             position: 'left',
  49             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  50             title: 'Sample Values',
  51             grid: {
  52                 odd: {
  53                     opacity: 1,
  54                     fill: '#ddd',
  55                     stroke: '#bbb',
  56                     'stroke-width': 1
  57                 }
  58             },
  59             minimum: 0,
  60             adjustMinimumByMajorUnit: 0
  61         }, {
  62             type: 'Category',
  63             position: 'bottom',
  64             fields: ['name'],
  65             title: 'Sample Metrics',
  66             grid: true,
  67             label: {
  68                 rotate: {
  69                     degrees: 315
  70                 }
  71             }
  72         }],
  73         series: [{
  74             type: 'area',
  75             highlight: false,
  76             axis: 'left',
  77             xField: 'name',
  78             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  79             style: {
  80                 opacity: 0.93
  81             }
  82         }]
  83     });
  84    &lt;/code&gt;&lt;/pre&gt;
  85
  86
  87  &lt;p&gt;
  88   In this configuration we set `area` as the type for the series, set highlighting options to true for highlighting elements on hover,
  89   take the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store,
  90   and as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity
  91   to the style object.
  92  &lt;/p&gt;
  93
  94  * @xtype area
  95  *
  96  */
  97 Ext.define('Ext.chart.series.Area', {
  98
  99     /* Begin Definitions */
 100
 101     extend: 'Ext.chart.series.Cartesian',
 102
 103     alias: 'series.area',
 104
 105     requires: ['Ext.chart.axis.Axis', 'Ext.draw.Color', 'Ext.fx.Anim'],
 106
 107     /* End Definitions */
 108
 109     type: 'area',
 110
 111     // @private Area charts are alyways stacked
 112     stacked: true,
 113
 114 <span id='Ext-chart-series-Area-cfg-style'>    /**
 115 </span>     * @cfg {Object} style
 116      * Append styling properties to this object for it to override theme properties.
 117      */
 118     style: {},
 119
 120     constructor: function(config) {
 121         this.callParent(arguments);
 122         var me = this,
 123             surface = me.chart.surface,
 124             i, l;
 125         Ext.apply(me, config, {
 126             __excludes: [],
 127             highlightCfg: {
 128                 lineWidth: 3,
 129                 stroke: '#55c',
 130                 opacity: 0.8,
 131                 color: '#f00'
 132             }
 133         });
 134         if (me.highlight) {
 135             me.highlightSprite = surface.add({
 136                 type: 'path',
 137                 path: ['M', 0, 0],
 138                 zIndex: 1000,
 139                 opacity: 0.3,
 140                 lineWidth: 5,
 141                 hidden: true,
 142                 stroke: '#444'
 143             });
 144         }
 145         me.group = surface.getGroup(me.seriesId);
 146     },
 147
 148     // @private Shrinks dataSets down to a smaller size
 149     shrink: function(xValues, yValues, size) {
 150         var len = xValues.length,
 151             ratio = Math.floor(len / size),
 152             i, j,
 153             xSum = 0,
 154             yCompLen = this.areas.length,
 155             ySum = [],
 156             xRes = [],
 157             yRes = [];
 158         //initialize array
 159         for (j = 0; j &lt; yCompLen; ++j) {
 160             ySum[j] = 0;
 161         }
 162         for (i = 0; i &lt; len; ++i) {
 163             xSum += xValues[i];
 164             for (j = 0; j &lt; yCompLen; ++j) {
 165                 ySum[j] += yValues[i][j];
 166             }
 167             if (i % ratio == 0) {
 168                 //push averages
 169                 xRes.push(xSum/ratio);
 170                 for (j = 0; j &lt; yCompLen; ++j) {
 171                     ySum[j] /= ratio;
 172                 }
 173                 yRes.push(ySum);
 174                 //reset sum accumulators
 175                 xSum = 0;
 176                 for (j = 0, ySum = []; j &lt; yCompLen; ++j) {
 177                     ySum[j] = 0;
 178                 }
 179             }
 180         }
 181         return {
 182             x: xRes,
 183             y: yRes
 184         };
 185     },
 186
 187     // @private Get chart and data boundaries
 188     getBounds: function() {
 189         var me = this,
 190             chart = me.chart,
 191             store = chart.substore || chart.store,
 192             areas = [].concat(me.yField),
 193             areasLen = areas.length,
 194             xValues = [],
 195             yValues = [],
 196             infinity = Infinity,
 197             minX = infinity,
 198             minY = infinity,
 199             maxX = -infinity,
 200             maxY = -infinity,
 201             math = Math,
 202             mmin = math.min,
 203             mmax = math.max,
 204             bbox, xScale, yScale, xValue, yValue, areaIndex, acumY, ln, sumValues, clipBox, areaElem;
 205
 206         me.setBBox();
 207         bbox = me.bbox;
 208
 209         // Run through the axis
 210         if (me.axis) {
 211             axis = chart.axes.get(me.axis);
 212             if (axis) {
 213                 out = axis.calcEnds();
 214                 minY = out.from || axis.prevMin;
 215                 maxY = mmax(out.to || axis.prevMax, 0);
 216             }
 217         }
 218
 219         if (me.yField &amp;&amp; !Ext.isNumber(minY)) {
 220             axis = Ext.create('Ext.chart.axis.Axis', {
 221                 chart: chart,
 222                 fields: [].concat(me.yField)
 223             });
 224             out = axis.calcEnds();
 225             minY = out.from || axis.prevMin;
 226             maxY = mmax(out.to || axis.prevMax, 0);
 227         }
 228
 229         if (!Ext.isNumber(minY)) {
 230             minY = 0;
 231         }
 232         if (!Ext.isNumber(maxY)) {
 233             maxY = 0;
 234         }
 235
 236         store.each(function(record, i) {
 237             xValue = record.get(me.xField);
 238             yValue = [];
 239             if (typeof xValue != 'number') {
 240                 xValue = i;
 241             }
 242             xValues.push(xValue);
 243             acumY = 0;
 244             for (areaIndex = 0; areaIndex &lt; areasLen; areaIndex++) {
 245                 areaElem = record.get(areas[areaIndex]);
 246                 if (typeof areaElem == 'number') {
 247                     minY = mmin(minY, areaElem);
 248                     yValue.push(areaElem);
 249                     acumY += areaElem;
 250                 }
 251             }
 252             minX = mmin(minX, xValue);
 253             maxX = mmax(maxX, xValue);
 254             maxY = mmax(maxY, acumY);
 255             yValues.push(yValue);
 256         }, me);
 257
 258         xScale = bbox.width / (maxX - minX);
 259         yScale = bbox.height / (maxY - minY);
 260
 261         ln = xValues.length;
 262         if ((ln &gt; bbox.width) &amp;&amp; me.areas) {
 263             sumValues = me.shrink(xValues, yValues, bbox.width);
 264             xValues = sumValues.x;
 265             yValues = sumValues.y;
 266         }
 267
 268         return {
 269             bbox: bbox,
 270             minX: minX,
 271             minY: minY,
 272             xValues: xValues,
 273             yValues: yValues,
 274             xScale: xScale,
 275             yScale: yScale,
 276             areasLen: areasLen
 277         };
 278     },
 279
 280     // @private Build an array of paths for the chart
 281     getPaths: function() {
 282         var me = this,
 283             chart = me.chart,
 284             store = chart.substore || chart.store,
 285             first = true,
 286             bounds = me.getBounds(),
 287             bbox = bounds.bbox,
 288             items = me.items = [],
 289             componentPaths = [],
 290             componentPath,
 291             paths = [],
 292             i, ln, x, y, xValue, yValue, acumY, areaIndex, prevAreaIndex, areaElem, path;
 293
 294         ln = bounds.xValues.length;
 295         // Start the path
 296         for (i = 0; i &lt; ln; i++) {
 297             xValue = bounds.xValues[i];
 298             yValue = bounds.yValues[i];
 299             x = bbox.x + (xValue - bounds.minX) * bounds.xScale;
 300             acumY = 0;
 301             for (areaIndex = 0; areaIndex &lt; bounds.areasLen; areaIndex++) {
 302                 // Excluded series
 303                 if (me.__excludes[areaIndex]) {
 304                     continue;
 305                 }
 306                 if (!componentPaths[areaIndex]) {
 307                     componentPaths[areaIndex] = [];
 308                 }
 309                 areaElem = yValue[areaIndex];
 310                 acumY += areaElem;
 311                 y = bbox.y + bbox.height - (acumY - bounds.minY) * bounds.yScale;
 312                 if (!paths[areaIndex]) {
 313                     paths[areaIndex] = ['M', x, y];
 314                     componentPaths[areaIndex].push(['L', x, y]);
 315                 } else {
 316                     paths[areaIndex].push('L', x, y);
 317                     componentPaths[areaIndex].push(['L', x, y]);
 318                 }
 319                 if (!items[areaIndex]) {
 320                     items[areaIndex] = {
 321                         pointsUp: [],
 322                         pointsDown: [],
 323                         series: me
 324                     };
 325                 }
 326                 items[areaIndex].pointsUp.push([x, y]);
 327             }
 328         }
 329
 330         // Close the paths
 331         for (areaIndex = 0; areaIndex &lt; bounds.areasLen; areaIndex++) {
 332             // Excluded series
 333             if (me.__excludes[areaIndex]) {
 334                 continue;
 335             }
 336             path = paths[areaIndex];
 337             // Close bottom path to the axis
 338             if (areaIndex == 0 || first) {
 339                 first = false;
 340                 path.push('L', x, bbox.y + bbox.height,
 341                           'L', bbox.x, bbox.y + bbox.height,
 342                           'Z');
 343             }
 344             // Close other paths to the one before them
 345             else {
 346                 componentPath = componentPaths[prevAreaIndex];
 347                 componentPath.reverse();
 348                 path.push('L', x, componentPath[0][2]);
 349                 for (i = 0; i &lt; ln; i++) {
 350                     path.push(componentPath[i][0],
 351                               componentPath[i][1],
 352                               componentPath[i][2]);
 353                     items[areaIndex].pointsDown[ln -i -1] = [componentPath[i][1], componentPath[i][2]];
 354                 }
 355                 path.push('L', bbox.x, path[2], 'Z');
 356             }
 357             prevAreaIndex = areaIndex;
 358         }
 359         return {
 360             paths: paths,
 361             areasLen: bounds.areasLen
 362         };
 363     },
 364
 365 <span id='Ext-chart-series-Area-method-drawSeries'>    /**
 366 </span>     * Draws the series for the current chart.
 367      */
 368     drawSeries: function() {
 369         var me = this,
 370             chart = me.chart,
 371             store = chart.substore || chart.store,
 372             surface = chart.surface,
 373             animate = chart.animate,
 374             group = me.group,
 375             endLineStyle = Ext.apply(me.seriesStyle, me.style),
 376             colorArrayStyle = me.colorArrayStyle,
 377             colorArrayLength = colorArrayStyle &amp;&amp; colorArrayStyle.length || 0,
 378             areaIndex, areaElem, paths, path, rendererAttributes;
 379
 380         me.unHighlightItem();
 381         me.cleanHighlights();
 382
 383         if (!store || !store.getCount()) {
 384             return;
 385         }
 386
 387         paths = me.getPaths();
 388
 389         if (!me.areas) {
 390             me.areas = [];
 391         }
 392
 393         for (areaIndex = 0; areaIndex &lt; paths.areasLen; areaIndex++) {
 394             // Excluded series
 395             if (me.__excludes[areaIndex]) {
 396                 continue;
 397             }
 398             if (!me.areas[areaIndex]) {
 399                 me.items[areaIndex].sprite = me.areas[areaIndex] = surface.add(Ext.apply({}, {
 400                     type: 'path',
 401                     group: group,
 402                     // 'clip-rect': me.clipBox,
 403                     path: paths.paths[areaIndex],
 404                     stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength],
 405                     fill: colorArrayStyle[areaIndex % colorArrayLength]
 406                 }, endLineStyle || {}));
 407             }
 408             areaElem = me.areas[areaIndex];
 409             path = paths.paths[areaIndex];
 410             if (animate) {
 411                 //Add renderer to line. There is not a unique record associated with this.
 412                 rendererAttributes = me.renderer(areaElem, false, {
 413                     path: path,
 414                     // 'clip-rect': me.clipBox,
 415                     fill: colorArrayStyle[areaIndex % colorArrayLength],
 416                     stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
 417                 }, areaIndex, store);
 418                 //fill should not be used here but when drawing the special fill path object
 419                 me.animation = me.onAnimate(areaElem, {
 420                     to: rendererAttributes
 421                 });
 422             } else {
 423                 rendererAttributes = me.renderer(areaElem, false, {
 424                     path: path,
 425                     // 'clip-rect': me.clipBox,
 426                     hidden: false,
 427                     fill: colorArrayStyle[areaIndex % colorArrayLength],
 428                     stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
 429                 }, areaIndex, store);
 430                 me.areas[areaIndex].setAttributes(rendererAttributes, true);
 431             }
 432         }
 433         me.renderLabels();
 434         me.renderCallouts();
 435     },
 436
 437     // @private
 438     onAnimate: function(sprite, attr) {
 439         sprite.show();
 440         return this.callParent(arguments);
 441     },
 442
 443     // @private
 444     onCreateLabel: function(storeItem, item, i, display) {
 445         var me = this,
 446             group = me.labelsGroup,
 447             config = me.label,
 448             bbox = me.bbox,
 449             endLabelStyle = Ext.apply(config, me.seriesLabelStyle);
 450
 451         return me.chart.surface.add(Ext.apply({
 452             'type': 'text',
 453             'text-anchor': 'middle',
 454             'group': group,
 455             'x': item.point[0],
 456             'y': bbox.y + bbox.height / 2
 457         }, endLabelStyle || {}));
 458     },
 459
 460     // @private
 461     onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
 462         var me = this,
 463             chart = me.chart,
 464             resizing = chart.resizing,
 465             config = me.label,
 466             format = config.renderer,
 467             field = config.field,
 468             bbox = me.bbox,
 469             x = item.point[0],
 470             y = item.point[1],
 471             bb, width, height;
 472
 473         label.setAttributes({
 474             text: format(storeItem.get(field[index])),
 475             hidden: true
 476         }, true);
 477
 478         bb = label.getBBox();
 479         width = bb.width / 2;
 480         height = bb.height / 2;
 481
 482         x = x - width &lt; bbox.x? bbox.x + width : x;
 483         x = (x + width &gt; bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
 484         y = y - height &lt; bbox.y? bbox.y + height : y;
 485         y = (y + height &gt; bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
 486
 487         if (me.chart.animate &amp;&amp; !me.chart.resizing) {
 488             label.show(true);
 489             me.onAnimate(label, {
 490                 to: {
 491                     x: x,
 492                     y: y
 493                 }
 494             });
 495         } else {
 496             label.setAttributes({
 497                 x: x,
 498                 y: y
 499             }, true);
 500             if (resizing) {
 501                 me.animation.on('afteranimate', function() {
 502                     label.show(true);
 503                 });
 504             } else {
 505                 label.show(true);
 506             }
 507         }
 508     },
 509
 510     // @private
 511     onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
 512         var me = this,
 513             chart = me.chart,
 514             surface = chart.surface,
 515             resizing = chart.resizing,
 516             config = me.callouts,
 517             items = me.items,
 518             prev = (i == 0) ? false : items[i -1].point,
 519             next = (i == items.length -1) ? false : items[i +1].point,
 520             cur = item.point,
 521             dir, norm, normal, a, aprev, anext,
 522             bbox = callout.label.getBBox(),
 523             offsetFromViz = 30,
 524             offsetToSide = 10,
 525             offsetBox = 3,
 526             boxx, boxy, boxw, boxh,
 527             p, clipRect = me.clipRect,
 528             x, y;
 529
 530         //get the right two points
 531         if (!prev) {
 532             prev = cur;
 533         }
 534         if (!next) {
 535             next = cur;
 536         }
 537         a = (next[1] - prev[1]) / (next[0] - prev[0]);
 538         aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
 539         anext = (next[1] - cur[1]) / (next[0] - cur[0]);
 540
 541         norm = Math.sqrt(1 + a * a);
 542         dir = [1 / norm, a / norm];
 543         normal = [-dir[1], dir[0]];
 544
 545         //keep the label always on the outer part of the &quot;elbow&quot;
 546         if (aprev &gt; 0 &amp;&amp; anext &lt; 0 &amp;&amp; normal[1] &lt; 0 || aprev &lt; 0 &amp;&amp; anext &gt; 0 &amp;&amp; normal[1] &gt; 0) {
 547             normal[0] *= -1;
 548             normal[1] *= -1;
 549         } else if (Math.abs(aprev) &lt; Math.abs(anext) &amp;&amp; normal[0] &lt; 0 || Math.abs(aprev) &gt; Math.abs(anext) &amp;&amp; normal[0] &gt; 0) {
 550             normal[0] *= -1;
 551             normal[1] *= -1;
 552         }
 553
 554         //position
 555         x = cur[0] + normal[0] * offsetFromViz;
 556         y = cur[1] + normal[1] * offsetFromViz;
 557
 558         //box position and dimensions
 559         boxx = x + (normal[0] &gt; 0? 0 : -(bbox.width + 2 * offsetBox));
 560         boxy = y - bbox.height /2 - offsetBox;
 561         boxw = bbox.width + 2 * offsetBox;
 562         boxh = bbox.height + 2 * offsetBox;
 563
 564         //now check if we're out of bounds and invert the normal vector correspondingly
 565         //this may add new overlaps between labels (but labels won't be out of bounds).
 566         if (boxx &lt; clipRect[0] || (boxx + boxw) &gt; (clipRect[0] + clipRect[2])) {
 567             normal[0] *= -1;
 568         }
 569         if (boxy &lt; clipRect[1] || (boxy + boxh) &gt; (clipRect[1] + clipRect[3])) {
 570             normal[1] *= -1;
 571         }
 572
 573         //update positions
 574         x = cur[0] + normal[0] * offsetFromViz;
 575         y = cur[1] + normal[1] * offsetFromViz;
 576
 577         //update box position and dimensions
 578         boxx = x + (normal[0] &gt; 0? 0 : -(bbox.width + 2 * offsetBox));
 579         boxy = y - bbox.height /2 - offsetBox;
 580         boxw = bbox.width + 2 * offsetBox;
 581         boxh = bbox.height + 2 * offsetBox;
 582
 583         //set the line from the middle of the pie to the box.
 584         callout.lines.setAttributes({
 585             path: [&quot;M&quot;, cur[0], cur[1], &quot;L&quot;, x, y, &quot;Z&quot;]
 586         }, true);
 587         //set box position
 588         callout.box.setAttributes({
 589             x: boxx,
 590             y: boxy,
 591             width: boxw,
 592             height: boxh
 593         }, true);
 594         //set text position
 595         callout.label.setAttributes({
 596             x: x + (normal[0] &gt; 0? offsetBox : -(bbox.width + offsetBox)),
 597             y: y
 598         }, true);
 599         for (p in callout) {
 600             callout[p].show(true);
 601         }
 602     },
 603
 604     isItemInPoint: function(x, y, item, i) {
 605         var me = this,
 606             pointsUp = item.pointsUp,
 607             pointsDown = item.pointsDown,
 608             abs = Math.abs,
 609             dist = Infinity, p, pln, point;
 610
 611         for (p = 0, pln = pointsUp.length; p &lt; pln; p++) {
 612             point = [pointsUp[p][0], pointsUp[p][1]];
 613             if (dist &gt; abs(x - point[0])) {
 614                 dist = abs(x - point[0]);
 615             } else {
 616                 point = pointsUp[p -1];
 617                 if (y &gt;= point[1] &amp;&amp; (!pointsDown.length || y &lt;= (pointsDown[p -1][1]))) {
 618                     item.storeIndex = p -1;
 619                     item.storeField = me.yField[i];
 620                     item.storeItem = me.chart.store.getAt(p -1);
 621                     item._points = pointsDown.length? [point, pointsDown[p -1]] : [point];
 622                     return true;
 623                 } else {
 624                     break;
 625                 }
 626             }
 627         }
 628         return false;
 629     },
 630
 631 <span id='Ext-chart-series-Area-method-highlightSeries'>    /**
 632 </span>     * Highlight this entire series.
 633      * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
 634      */
 635     highlightSeries: function() {
 636         var area, to, fillColor;
 637         if (this._index !== undefined) {
 638             area = this.areas[this._index];
 639             if (area.__highlightAnim) {
 640                 area.__highlightAnim.paused = true;
 641             }
 642             area.__highlighted = true;
 643             area.__prevOpacity = area.__prevOpacity || area.attr.opacity || 1;
 644             area.__prevFill = area.__prevFill || area.attr.fill;
 645             area.__prevLineWidth = area.__prevLineWidth || area.attr.lineWidth;
 646             fillColor = Ext.draw.Color.fromString(area.__prevFill);
 647             to = {
 648                 lineWidth: (area.__prevLineWidth || 0) + 2
 649             };
 650             if (fillColor) {
 651                 to.fill = fillColor.getLighter(0.2).toString();
 652             }
 653             else {
 654                 to.opacity = Math.max(area.__prevOpacity - 0.3, 0);
 655             }
 656             if (this.chart.animate) {
 657                 area.__highlightAnim = Ext.create('Ext.fx.Anim', Ext.apply({
 658                     target: area,
 659                     to: to
 660                 }, this.chart.animate));
 661             }
 662             else {
 663                 area.setAttributes(to, true);
 664             }
 665         }
 666     },
 667
 668 <span id='Ext-chart-series-Area-method-unHighlightSeries'>    /**
 669 </span>     * UnHighlight this entire series.
 670      * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
 671      */
 672     unHighlightSeries: function() {
 673         var area;
 674         if (this._index !== undefined) {
 675             area = this.areas[this._index];
 676             if (area.__highlightAnim) {
 677                 area.__highlightAnim.paused = true;
 678             }
 679             if (area.__highlighted) {
 680                 area.__highlighted = false;
 681                 area.__highlightAnim = Ext.create('Ext.fx.Anim', {
 682                     target: area,
 683                     to: {
 684                         fill: area.__prevFill,
 685                         opacity: area.__prevOpacity,
 686                         lineWidth: area.__prevLineWidth
 687                     }
 688                 });
 689             }
 690         }
 691     },
 692
 693 <span id='Ext-chart-series-Area-method-highlightItem'>    /**
 694 </span>     * Highlight the specified item. If no item is provided the whole series will be highlighted.
 695      * @param item {Object} Info about the item; same format as returned by #getItemForPoint
 696      */
 697     highlightItem: function(item) {
 698         var me = this,
 699             points, path;
 700         if (!item) {
 701             this.highlightSeries();
 702             return;
 703         }
 704         points = item._points;
 705         path = points.length == 2? ['M', points[0][0], points[0][1], 'L', points[1][0], points[1][1]]
 706                 : ['M', points[0][0], points[0][1], 'L', points[0][0], me.bbox.y + me.bbox.height];
 707         me.highlightSprite.setAttributes({
 708             path: path,
 709             hidden: false
 710         }, true);
 711     },
 712
 713 <span id='Ext-chart-series-Area-method-unHighlightItem'>    /**
 714 </span>     * un-highlights the specified item. If no item is provided it will un-highlight the entire series.
 715      * @param item {Object} Info about the item; same format as returned by #getItemForPoint
 716      */
 717     unHighlightItem: function(item) {
 718         if (!item) {
 719             this.unHighlightSeries();
 720         }
 721
 722         if (this.highlightSprite) {
 723             this.highlightSprite.hide(true);
 724         }
 725     },
 726
 727     // @private
 728     hideAll: function() {
 729         if (!isNaN(this._index)) {
 730             this.__excludes[this._index] = true;
 731             this.areas[this._index].hide(true);
 732             this.drawSeries();
 733         }
 734     },
 735
 736     // @private
 737     showAll: function() {
 738         if (!isNaN(this._index)) {
 739             this.__excludes[this._index] = false;
 740             this.areas[this._index].show(true);
 741             this.drawSeries();
 742         }
 743     },
 744
 745 <span id='Ext-chart-series-Area-method-getLegendColor'>    /**
 746 </span>     * Returns the color of the series (to be displayed as color for the series legend item).
 747      * @param item {Object} Info about the item; same format as returned by #getItemForPoint
 748      */
 749     getLegendColor: function(index) {
 750         var me = this;
 751         return me.colorArrayStyle[index % me.colorArrayStyle.length];
 752     }
 753 });
 754 </pre>
 755 </body>
 756 </html>