docs/source/Bar2.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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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-Bar'>/**
  19 </span> * Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for
  20  * different categories that can show some progression (or regression) in the dataset. As with all other series, the Bar
  21  * Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information.
  22  * A typical configuration object for the bar series could be:
  23  *
  24  *     @example
  25  *     var store = Ext.create('Ext.data.JsonStore', {
  26  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  27  *         data: [
  28  *             { 'name': 'metric one',   'data1':10, 'data2':12, 'data3':14, 'data4':8,  'data5':13 },
  29  *             { 'name': 'metric two',   'data1':7,  'data2':8,  'data3':16, 'data4':10, 'data5':3  },
  30  *             { 'name': 'metric three', 'data1':5,  'data2':2,  'data3':14, 'data4':12, 'data5':7  },
  31  *             { 'name': 'metric four',  'data1':2,  'data2':14, 'data3':6,  'data4':1,  'data5':23 },
  32  *             { 'name': 'metric five',  'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }
  33  *         ]
  34  *     });
  35  *
  36  *     Ext.create('Ext.chart.Chart', {
  37  *         renderTo: Ext.getBody(),
  38  *         width: 500,
  39  *         height: 300,
  40  *         animate: true,
  41  *         store: store,
  42  *         axes: [{
  43  *             type: 'Numeric',
  44  *             position: 'bottom',
  45  *             fields: ['data1'],
  46  *             label: {
  47  *                 renderer: Ext.util.Format.numberRenderer('0,0')
  48  *             },
  49  *             title: 'Sample Values',
  50  *             grid: true,
  51  *             minimum: 0
  52  *         }, {
  53  *             type: 'Category',
  54  *             position: 'left',
  55  *             fields: ['name'],
  56  *             title: 'Sample Metrics'
  57  *         }],
  58  *         series: [{
  59  *             type: 'bar',
  60  *             axis: 'bottom',
  61  *             highlight: true,
  62  *             tips: {
  63  *               trackMouse: true,
  64  *               width: 140,
  65  *               height: 28,
  66  *               renderer: function(storeItem, item) {
  67  *                 this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  68  *               }
  69  *             },
  70  *             label: {
  71  *               display: 'insideEnd',
  72  *                 field: 'data1',
  73  *                 renderer: Ext.util.Format.numberRenderer('0'),
  74  *                 orientation: 'horizontal',
  75  *                 color: '#333',
  76  *                 'text-anchor': 'middle'
  77  *             },
  78  *             xField: 'name',
  79  *             yField: ['data1']
  80  *         }]
  81  *     });
  82  *
  83  * In this configuration we set `bar` as the series type, bind the values of the bar to the bottom axis and set the
  84  * xField or category field to the `name` parameter of the store. We also set `highlight` to true which enables smooth
  85  * animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar,
  86  * to display the information found in the `data1` property of each element store, to render a formated text with the
  87  * `Ext.util.Format` we pass in, to have an `horizontal` orientation (as opposed to a vertical one) and we also set
  88  * other styles like `color`, `text-anchor`, etc.
  89  */
  90 Ext.define('Ext.chart.series.Bar', {
  91
  92     /* Begin Definitions */
  93
  94     extend: 'Ext.chart.series.Cartesian',
  95
  96     alternateClassName: ['Ext.chart.BarSeries', 'Ext.chart.BarChart', 'Ext.chart.StackedBarChart'],
  97
  98     requires: ['Ext.chart.axis.Axis', 'Ext.fx.Anim'],
  99
 100     /* End Definitions */
 101
 102     type: 'bar',
 103
 104     alias: 'series.bar',
 105 <span id='Ext-chart-series-Bar-cfg-column'>    /**
 106 </span>     * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
 107      */
 108     column: false,
 109
 110 <span id='Ext-chart-series-Bar-cfg-style'>    /**
 111 </span>     * @cfg style Style properties that will override the theming series styles.
 112      */
 113     style: {},
 114
 115 <span id='Ext-chart-series-Bar-cfg-gutter'>    /**
 116 </span>     * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
 117      */
 118     gutter: 38.2,
 119
 120 <span id='Ext-chart-series-Bar-cfg-groupGutter'>    /**
 121 </span>     * @cfg {Number} groupGutter The gutter space between groups of bars, as a percentage of the bar width
 122      */
 123     groupGutter: 38.2,
 124
 125 <span id='Ext-chart-series-Bar-cfg-xPadding'>    /**
 126 </span>     * @cfg {Number} xPadding Padding between the left/right axes and the bars
 127      */
 128     xPadding: 0,
 129
 130 <span id='Ext-chart-series-Bar-cfg-yPadding'>    /**
 131 </span>     * @cfg {Number} yPadding Padding between the top/bottom axes and the bars
 132      */
 133     yPadding: 10,
 134
 135     constructor: function(config) {
 136         this.callParent(arguments);
 137         var me = this,
 138             surface = me.chart.surface,
 139             shadow = me.chart.shadow,
 140             i, l;
 141         Ext.apply(me, config, {
 142             highlightCfg: {
 143                 lineWidth: 3,
 144                 stroke: '#55c',
 145                 opacity: 0.8,
 146                 color: '#f00'
 147             },
 148
 149             shadowAttributes: [{
 150                 &quot;stroke-width&quot;: 6,
 151                 &quot;stroke-opacity&quot;: 0.05,
 152                 stroke: 'rgb(200, 200, 200)',
 153                 translate: {
 154                     x: 1.2,
 155                     y: 1.2
 156                 }
 157             }, {
 158                 &quot;stroke-width&quot;: 4,
 159                 &quot;stroke-opacity&quot;: 0.1,
 160                 stroke: 'rgb(150, 150, 150)',
 161                 translate: {
 162                     x: 0.9,
 163                     y: 0.9
 164                 }
 165             }, {
 166                 &quot;stroke-width&quot;: 2,
 167                 &quot;stroke-opacity&quot;: 0.15,
 168                 stroke: 'rgb(100, 100, 100)',
 169                 translate: {
 170                     x: 0.6,
 171                     y: 0.6
 172                 }
 173             }]
 174         });
 175         me.group = surface.getGroup(me.seriesId + '-bars');
 176         if (shadow) {
 177             for (i = 0, l = me.shadowAttributes.length; i &lt; l; i++) {
 178                 me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
 179             }
 180         }
 181     },
 182
 183     // @private sets the bar girth.
 184     getBarGirth: function() {
 185         var me = this,
 186             store = me.chart.getChartStore(),
 187             column = me.column,
 188             ln = store.getCount(),
 189             gutter = me.gutter / 100;
 190
 191         return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter);
 192     },
 193
 194     // @private returns the gutters.
 195     getGutters: function() {
 196         var me = this,
 197             column = me.column,
 198             gutter = Math.ceil(me[column ? 'xPadding' : 'yPadding'] + me.getBarGirth() / 2);
 199         return me.column ? [gutter, 0] : [0, gutter];
 200     },
 201
 202     // @private Get chart and data boundaries
 203     getBounds: function() {
 204         var me = this,
 205             chart = me.chart,
 206             store = chart.getChartStore(),
 207             bars = [].concat(me.yField),
 208             barsLen = bars.length,
 209             groupBarsLen = barsLen,
 210             groupGutter = me.groupGutter / 100,
 211             column = me.column,
 212             xPadding = me.xPadding,
 213             yPadding = me.yPadding,
 214             stacked = me.stacked,
 215             barWidth = me.getBarGirth(),
 216             math = Math,
 217             mmax = math.max,
 218             mabs = math.abs,
 219             groupBarWidth, bbox, minY, maxY, axis, out,
 220             scale, zero, total, rec, j, plus, minus;
 221
 222         me.setBBox(true);
 223         bbox = me.bbox;
 224
 225         //Skip excluded series
 226         if (me.__excludes) {
 227             for (j = 0, total = me.__excludes.length; j &lt; total; j++) {
 228                 if (me.__excludes[j]) {
 229                     groupBarsLen--;
 230                 }
 231             }
 232         }
 233
 234         if (me.axis) {
 235             axis = chart.axes.get(me.axis);
 236             if (axis) {
 237                 out = axis.calcEnds();
 238                 minY = out.from;
 239                 maxY = out.to;
 240             }
 241         }
 242
 243         if (me.yField &amp;&amp; !Ext.isNumber(minY)) {
 244             axis = Ext.create('Ext.chart.axis.Axis', {
 245                 chart: chart,
 246                 fields: [].concat(me.yField)
 247             });
 248             out = axis.calcEnds();
 249             minY = out.from;
 250             maxY = out.to;
 251         }
 252
 253         if (!Ext.isNumber(minY)) {
 254             minY = 0;
 255         }
 256         if (!Ext.isNumber(maxY)) {
 257             maxY = 0;
 258         }
 259         scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (maxY - minY);
 260         groupBarWidth = barWidth / ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter);
 261         zero = (column) ? bbox.y + bbox.height - yPadding : bbox.x + xPadding;
 262
 263         if (stacked) {
 264             total = [[], []];
 265             store.each(function(record, i) {
 266                 total[0][i] = total[0][i] || 0;
 267                 total[1][i] = total[1][i] || 0;
 268                 for (j = 0; j &lt; barsLen; j++) {
 269                     if (me.__excludes &amp;&amp; me.__excludes[j]) {
 270                         continue;
 271                     }
 272                     rec = record.get(bars[j]);
 273                     total[+(rec &gt; 0)][i] += mabs(rec);
 274                 }
 275             });
 276             total[+(maxY &gt; 0)].push(mabs(maxY));
 277             total[+(minY &gt; 0)].push(mabs(minY));
 278             minus = mmax.apply(math, total[0]);
 279             plus = mmax.apply(math, total[1]);
 280             scale = (column ? bbox.height - yPadding * 2 : bbox.width - xPadding * 2) / (plus + minus);
 281             zero = zero + minus * scale * (column ? -1 : 1);
 282         }
 283         else if (minY / maxY &lt; 0) {
 284             zero = zero - minY * scale * (column ? -1 : 1);
 285         }
 286         return {
 287             bars: bars,
 288             bbox: bbox,
 289             barsLen: barsLen,
 290             groupBarsLen: groupBarsLen,
 291             barWidth: barWidth,
 292             groupBarWidth: groupBarWidth,
 293             scale: scale,
 294             zero: zero,
 295             xPadding: xPadding,
 296             yPadding: yPadding,
 297             signed: minY / maxY &lt; 0,
 298             minY: minY,
 299             maxY: maxY
 300         };
 301     },
 302
 303     // @private Build an array of paths for the chart
 304     getPaths: function() {
 305         var me = this,
 306             chart = me.chart,
 307             store = chart.getChartStore(),
 308             bounds = me.bounds = me.getBounds(),
 309             items = me.items = [],
 310             gutter = me.gutter / 100,
 311             groupGutter = me.groupGutter / 100,
 312             animate = chart.animate,
 313             column = me.column,
 314             group = me.group,
 315             enableShadows = chart.shadow,
 316             shadowGroups = me.shadowGroups,
 317             shadowAttributes = me.shadowAttributes,
 318             shadowGroupsLn = shadowGroups.length,
 319             bbox = bounds.bbox,
 320             xPadding = me.xPadding,
 321             yPadding = me.yPadding,
 322             stacked = me.stacked,
 323             barsLen = bounds.barsLen,
 324             colors = me.colorArrayStyle,
 325             colorLength = colors &amp;&amp; colors.length || 0,
 326             math = Math,
 327             mmax = math.max,
 328             mmin = math.min,
 329             mabs = math.abs,
 330             j, yValue, height, totalDim, totalNegDim, bottom, top, hasShadow, barAttr, attrs, counter,
 331             shadowIndex, shadow, sprite, offset, floorY;
 332
 333         store.each(function(record, i, total) {
 334             bottom = bounds.zero;
 335             top = bounds.zero;
 336             totalDim = 0;
 337             totalNegDim = 0;
 338             hasShadow = false;
 339             for (j = 0, counter = 0; j &lt; barsLen; j++) {
 340                 // Excluded series
 341                 if (me.__excludes &amp;&amp; me.__excludes[j]) {
 342                     continue;
 343                 }
 344                 yValue = record.get(bounds.bars[j]);
 345                 height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale);
 346                 barAttr = {
 347                     fill: colors[(barsLen &gt; 1 ? j : 0) % colorLength]
 348                 };
 349                 if (column) {
 350                     Ext.apply(barAttr, {
 351                         height: height,
 352                         width: mmax(bounds.groupBarWidth, 0),
 353                         x: (bbox.x + xPadding + i * bounds.barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked),
 354                         y: bottom - height
 355                     });
 356                 }
 357                 else {
 358                     // draw in reverse order
 359                     offset = (total - 1) - i;
 360                     Ext.apply(barAttr, {
 361                         height: mmax(bounds.groupBarWidth, 0),
 362                         width: height + (bottom == bounds.zero),
 363                         x: bottom + (bottom != bounds.zero),
 364                         y: (bbox.y + yPadding + offset * bounds.barWidth * (1 + gutter) + counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked + 1)
 365                     });
 366                 }
 367                 if (height &lt; 0) {
 368                     if (column) {
 369                         barAttr.y = top;
 370                         barAttr.height = mabs(height);
 371                     } else {
 372                         barAttr.x = top + height;
 373                         barAttr.width = mabs(height);
 374                     }
 375                 }
 376                 if (stacked) {
 377                     if (height &lt; 0) {
 378                         top += height * (column ? -1 : 1);
 379                     } else {
 380                         bottom += height * (column ? -1 : 1);
 381                     }
 382                     totalDim += mabs(height);
 383                     if (height &lt; 0) {
 384                         totalNegDim += mabs(height);
 385                     }
 386                 }
 387                 barAttr.x = Math.floor(barAttr.x) + 1;
 388                 floorY = Math.floor(barAttr.y);
 389                 if (!Ext.isIE9 &amp;&amp; barAttr.y &gt; floorY) {
 390                     floorY--;
 391                 }
 392                 barAttr.y = floorY;
 393                 barAttr.width = Math.floor(barAttr.width);
 394                 barAttr.height = Math.floor(barAttr.height);
 395                 items.push({
 396                     series: me,
 397                     storeItem: record,
 398                     value: [record.get(me.xField), yValue],
 399                     attr: barAttr,
 400                     point: column ? [barAttr.x + barAttr.width / 2, yValue &gt;= 0 ? barAttr.y : barAttr.y + barAttr.height] :
 401                                     [yValue &gt;= 0 ? barAttr.x + barAttr.width : barAttr.x, barAttr.y + barAttr.height / 2]
 402                 });
 403                 // When resizing, reset before animating
 404                 if (animate &amp;&amp; chart.resizing) {
 405                     attrs = column ? {
 406                         x: barAttr.x,
 407                         y: bounds.zero,
 408                         width: barAttr.width,
 409                         height: 0
 410                     } : {
 411                         x: bounds.zero,
 412                         y: barAttr.y,
 413                         width: 0,
 414                         height: barAttr.height
 415                     };
 416                     if (enableShadows &amp;&amp; (stacked &amp;&amp; !hasShadow || !stacked)) {
 417                         hasShadow = true;
 418                         //update shadows
 419                         for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 420                             shadow = shadowGroups[shadowIndex].getAt(stacked ? i : (i * barsLen + j));
 421                             if (shadow) {
 422                                 shadow.setAttributes(attrs, true);
 423                             }
 424                         }
 425                     }
 426                     //update sprite position and width/height
 427                     sprite = group.getAt(i * barsLen + j);
 428                     if (sprite) {
 429                         sprite.setAttributes(attrs, true);
 430                     }
 431                 }
 432                 counter++;
 433             }
 434             if (stacked &amp;&amp; items.length) {
 435                 items[i * counter].totalDim = totalDim;
 436                 items[i * counter].totalNegDim = totalNegDim;
 437             }
 438         }, me);
 439     },
 440
 441     // @private render/setAttributes on the shadows
 442     renderShadows: function(i, barAttr, baseAttrs, bounds) {
 443         var me = this,
 444             chart = me.chart,
 445             surface = chart.surface,
 446             animate = chart.animate,
 447             stacked = me.stacked,
 448             shadowGroups = me.shadowGroups,
 449             shadowAttributes = me.shadowAttributes,
 450             shadowGroupsLn = shadowGroups.length,
 451             store = chart.getChartStore(),
 452             column = me.column,
 453             items = me.items,
 454             shadows = [],
 455             zero = bounds.zero,
 456             shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
 457
 458         if ((stacked &amp;&amp; (i % bounds.groupBarsLen === 0)) || !stacked) {
 459             j = i / bounds.groupBarsLen;
 460             //create shadows
 461             for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 462                 shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
 463                 shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
 464                 Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
 465                 if (!shadow) {
 466                     shadow = surface.add(Ext.apply({
 467                         type: 'rect',
 468                         group: shadowGroups[shadowIndex]
 469                     }, Ext.apply({}, baseAttrs, shadowBarAttr)));
 470                 }
 471                 if (stacked) {
 472                     totalDim = items[i].totalDim;
 473                     totalNegDim = items[i].totalNegDim;
 474                     if (column) {
 475                         shadowBarAttr.y = zero - totalNegDim;
 476                         shadowBarAttr.height = totalDim;
 477                     }
 478                     else {
 479                         shadowBarAttr.x = zero - totalNegDim;
 480                         shadowBarAttr.width = totalDim;
 481                     }
 482                 }
 483                 if (animate) {
 484                     if (!stacked) {
 485                         rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store);
 486                         me.onAnimate(shadow, { to: rendererAttributes });
 487                     }
 488                     else {
 489                         rendererAttributes = me.renderer(shadow, store.getAt(j), Ext.apply(shadowBarAttr, { hidden: true }), i, store);
 490                         shadow.setAttributes(rendererAttributes, true);
 491                     }
 492                 }
 493                 else {
 494                     rendererAttributes = me.renderer(shadow, store.getAt(j), Ext.apply(shadowBarAttr, { hidden: false }), i, store);
 495                     shadow.setAttributes(rendererAttributes, true);
 496                 }
 497                 shadows.push(shadow);
 498             }
 499         }
 500         return shadows;
 501     },
 502
 503 <span id='Ext-chart-series-Bar-method-drawSeries'>    /**
 504 </span>     * Draws the series for the current chart.
 505      */
 506     drawSeries: function() {
 507         var me = this,
 508             chart = me.chart,
 509             store = chart.getChartStore(),
 510             surface = chart.surface,
 511             animate = chart.animate,
 512             stacked = me.stacked,
 513             column = me.column,
 514             enableShadows = chart.shadow,
 515             shadowGroups = me.shadowGroups,
 516             shadowGroupsLn = shadowGroups.length,
 517             group = me.group,
 518             seriesStyle = me.seriesStyle,
 519             items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
 520             bounds, endSeriesStyle, barAttr, attrs, anim;
 521
 522         if (!store || !store.getCount()) {
 523             return;
 524         }
 525
 526         //fill colors are taken from the colors array.
 527         delete seriesStyle.fill;
 528         endSeriesStyle = Ext.apply(seriesStyle, this.style);
 529         me.unHighlightItem();
 530         me.cleanHighlights();
 531
 532         me.getPaths();
 533         bounds = me.bounds;
 534         items = me.items;
 535
 536         baseAttrs = column ? {
 537             y: bounds.zero,
 538             height: 0
 539         } : {
 540             x: bounds.zero,
 541             width: 0
 542         };
 543         ln = items.length;
 544         // Create new or reuse sprites and animate/display
 545         for (i = 0; i &lt; ln; i++) {
 546             sprite = group.getAt(i);
 547             barAttr = items[i].attr;
 548
 549             if (enableShadows) {
 550                 items[i].shadows = me.renderShadows(i, barAttr, baseAttrs, bounds);
 551             }
 552
 553             // Create a new sprite if needed (no height)
 554             if (!sprite) {
 555                 attrs = Ext.apply({}, baseAttrs, barAttr);
 556                 attrs = Ext.apply(attrs, endSeriesStyle || {});
 557                 sprite = surface.add(Ext.apply({}, {
 558                     type: 'rect',
 559                     group: group
 560                 }, attrs));
 561             }
 562             if (animate) {
 563                 rendererAttributes = me.renderer(sprite, store.getAt(i), barAttr, i, store);
 564                 sprite._to = rendererAttributes;
 565                 anim = me.onAnimate(sprite, { to: Ext.apply(rendererAttributes, endSeriesStyle) });
 566                 if (enableShadows &amp;&amp; stacked &amp;&amp; (i % bounds.barsLen === 0)) {
 567                     j = i / bounds.barsLen;
 568                     for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 569                         anim.on('afteranimate', function() {
 570                             this.show(true);
 571                         }, shadowGroups[shadowIndex].getAt(j));
 572                     }
 573                 }
 574             }
 575             else {
 576                 rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(barAttr, { hidden: false }), i, store);
 577                 sprite.setAttributes(Ext.apply(rendererAttributes, endSeriesStyle), true);
 578             }
 579             items[i].sprite = sprite;
 580         }
 581
 582         // Hide unused sprites
 583         ln = group.getCount();
 584         for (j = i; j &lt; ln; j++) {
 585             group.getAt(j).hide(true);
 586         }
 587         // Hide unused shadows
 588         if (enableShadows) {
 589             for (shadowIndex = 0; shadowIndex &lt; shadowGroupsLn; shadowIndex++) {
 590                 shadowGroup = shadowGroups[shadowIndex];
 591                 ln = shadowGroup.getCount();
 592                 for (j = i; j &lt; ln; j++) {
 593                     shadowGroup.getAt(j).hide(true);
 594                 }
 595             }
 596         }
 597         me.renderLabels();
 598     },
 599
 600     // @private handled when creating a label.
 601     onCreateLabel: function(storeItem, item, i, display) {
 602         var me = this,
 603             surface = me.chart.surface,
 604             group = me.labelsGroup,
 605             config = me.label,
 606             endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {}),
 607             sprite;
 608         return surface.add(Ext.apply({
 609             type: 'text',
 610             group: group
 611         }, endLabelStyle || {}));
 612     },
 613
 614     // @private callback used when placing a label.
 615     onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
 616         // Determine the label's final position. Starts with the configured preferred value but
 617         // may get flipped from inside to outside or vice-versa depending on space.
 618         var me = this,
 619             opt = me.bounds,
 620             groupBarWidth = opt.groupBarWidth,
 621             column = me.column,
 622             chart = me.chart,
 623             chartBBox = chart.chartBBox,
 624             resizing = chart.resizing,
 625             xValue = item.value[0],
 626             yValue = item.value[1],
 627             attr = item.attr,
 628             config = me.label,
 629             rotate = config.orientation == 'vertical',
 630             field = [].concat(config.field),
 631             format = config.renderer,
 632             text = format(storeItem.get(field[index])),
 633             size = me.getLabelSize(text),
 634             width = size.width,
 635             height = size.height,
 636             zero = opt.zero,
 637             outside = 'outside',
 638             insideStart = 'insideStart',
 639             insideEnd = 'insideEnd',
 640             offsetX = 10,
 641             offsetY = 6,
 642             signed = opt.signed,
 643             x, y, finalAttr;
 644
 645         label.setAttributes({
 646             text: text
 647         });
 648
 649         label.isOutside = false;
 650         if (column) {
 651             if (display == outside) {
 652                 if (height + offsetY + attr.height &gt; (yValue &gt;= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
 653                     display = insideEnd;
 654                 }
 655             } else {
 656                 if (height + offsetY &gt; attr.height) {
 657                     display = outside;
 658                     label.isOutside = true;
 659                 }
 660             }
 661             x = attr.x + groupBarWidth / 2;
 662             y = display == insideStart ?
 663                     (zero + ((height / 2 + 3) * (yValue &gt;= 0 ? -1 : 1))) :
 664                     (yValue &gt;= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
 665                                    (attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
 666         }
 667         else {
 668             if (display == outside) {
 669                 if (width + offsetX + attr.width &gt; (yValue &gt;= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
 670                     display = insideEnd;
 671                 }
 672             }
 673             else {
 674                 if (width + offsetX &gt; attr.width) {
 675                     display = outside;
 676                     label.isOutside = true;
 677                 }
 678             }
 679             x = display == insideStart ?
 680                 (zero + ((width / 2 + 5) * (yValue &gt;= 0 ? 1 : -1))) :
 681                 (yValue &gt;= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
 682                 (attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
 683             y = attr.y + groupBarWidth / 2;
 684         }
 685         //set position
 686         finalAttr = {
 687             x: x,
 688             y: y
 689         };
 690         //rotate
 691         if (rotate) {
 692             finalAttr.rotate = {
 693                 x: x,
 694                 y: y,
 695                 degrees: 270
 696             };
 697         }
 698         //check for resizing
 699         if (animate &amp;&amp; resizing) {
 700             if (column) {
 701                 x = attr.x + attr.width / 2;
 702                 y = zero;
 703             } else {
 704                 x = zero;
 705                 y = attr.y + attr.height / 2;
 706             }
 707             label.setAttributes({
 708                 x: x,
 709                 y: y
 710             }, true);
 711             if (rotate) {
 712                 label.setAttributes({
 713                     rotate: {
 714                         x: x,
 715                         y: y,
 716                         degrees: 270
 717                     }
 718                 }, true);
 719             }
 720         }
 721         //handle animation
 722         if (animate) {
 723             me.onAnimate(label, { to: finalAttr });
 724         }
 725         else {
 726             label.setAttributes(Ext.apply(finalAttr, {
 727                 hidden: false
 728             }), true);
 729         }
 730     },
 731
 732     /* @private
 733      * Gets the dimensions of a given bar label. Uses a single hidden sprite to avoid
 734      * changing visible sprites.
 735      * @param value
 736      */
 737     getLabelSize: function(value) {
 738         var tester = this.testerLabel,
 739             config = this.label,
 740             endLabelStyle = Ext.apply({}, config, this.seriesLabelStyle || {}),
 741             rotated = config.orientation === 'vertical',
 742             bbox, w, h,
 743             undef;
 744         if (!tester) {
 745             tester = this.testerLabel = this.chart.surface.add(Ext.apply({
 746                 type: 'text',
 747                 opacity: 0
 748             }, endLabelStyle));
 749         }
 750         tester.setAttributes({
 751             text: value
 752         }, true);
 753
 754         // Flip the width/height if rotated, as getBBox returns the pre-rotated dimensions
 755         bbox = tester.getBBox();
 756         w = bbox.width;
 757         h = bbox.height;
 758         return {
 759             width: rotated ? h : w,
 760             height: rotated ? w : h
 761         };
 762     },
 763
 764     // @private used to animate label, markers and other sprites.
 765     onAnimate: function(sprite, attr) {
 766         sprite.show();
 767         return this.callParent(arguments);
 768     },
 769
 770     isItemInPoint: function(x, y, item) {
 771         var bbox = item.sprite.getBBox();
 772         return bbox.x &lt;= x &amp;&amp; bbox.y &lt;= y
 773             &amp;&amp; (bbox.x + bbox.width) &gt;= x
 774             &amp;&amp; (bbox.y + bbox.height) &gt;= y;
 775     },
 776
 777     // @private hide all markers
 778     hideAll: function() {
 779         var axes = this.chart.axes;
 780         if (!isNaN(this._index)) {
 781             if (!this.__excludes) {
 782                 this.__excludes = [];
 783             }
 784             this.__excludes[this._index] = true;
 785             this.drawSeries();
 786             axes.each(function(axis) {
 787                 axis.drawAxis();
 788             });
 789         }
 790     },
 791
 792     // @private show all markers
 793     showAll: function() {
 794         var axes = this.chart.axes;
 795         if (!isNaN(this._index)) {
 796             if (!this.__excludes) {
 797                 this.__excludes = [];
 798             }
 799             this.__excludes[this._index] = false;
 800             this.drawSeries();
 801             axes.each(function(axis) {
 802                 axis.drawAxis();
 803             });
 804         }
 805     },
 806
 807 <span id='Ext-chart-series-Bar-method-getLegendColor'>    /**
 808 </span>     * Returns a string with the color to be used for the series legend item.
 809      * @param index
 810      */
 811     getLegendColor: function(index) {
 812         var me = this,
 813             colorLength = me.colorArrayStyle.length;
 814
 815         if (me.style &amp;&amp; me.style.fill) {
 816             return me.style.fill;
 817         } else {
 818             return me.colorArrayStyle[index % colorLength];
 819         }
 820     },
 821
 822     highlightItem: function(item) {
 823         this.callParent(arguments);
 824         this.renderLabels();
 825     },
 826
 827     unHighlightItem: function() {
 828         this.callParent(arguments);
 829         this.renderLabels();
 830     },
 831
 832     cleanHighlights: function() {
 833         this.callParent(arguments);
 834         this.renderLabels();
 835     }
 836 });</pre>
 837 </body>
 838 </html>