Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Bar2.html
index 6da75bc..4493e24 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
  * Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information.
  * A typical configuration object for the bar series could be:
  *
- * {@img Ext.chart.series.Bar/Ext.chart.series.Bar.png Ext.chart.series.Bar chart series}
- *
+ *     @example
  *     var store = Ext.create('Ext.data.JsonStore', {
  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  *         data: [
- *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
- *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
- *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
- *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
- *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
+ *             { 'name': 'metric one',   'data1':10, 'data2':12, 'data3':14, 'data4':8,  'data5':13 },
+ *             { 'name': 'metric two',   'data1':7,  'data2':8,  'data3':16, 'data4':10, 'data5':3  },
+ *             { 'name': 'metric three', 'data1':5,  'data2':2,  'data3':14, 'data4':12, 'data5':7  },
+ *             { 'name': 'metric four',  'data1':2,  'data2':14, 'data3':6,  'data4':1,  'data5':23 },
+ *             { 'name': 'metric five',  'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }
  *         ]
  *     });
- *     
+ *
  *     Ext.create('Ext.chart.Chart', {
  *         renderTo: Ext.getBody(),
  *         width: 500,
@@ -107,12 +106,12 @@ Ext.define('Ext.chart.series.Bar', {
 </span>     * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
      */
     column: false,
-    
+
 <span id='Ext-chart-series-Bar-cfg-style'>    /**
 </span>     * @cfg style Style properties that will override the theming series styles.
      */
     style: {},
-    
+
 <span id='Ext-chart-series-Bar-cfg-gutter'>    /**
 </span>     * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
      */
@@ -146,7 +145,7 @@ Ext.define('Ext.chart.series.Bar', {
                 opacity: 0.8,
                 color: '#f00'
             },
-            
+
             shadowAttributes: [{
                 &quot;stroke-width&quot;: 6,
                 &quot;stroke-opacity&quot;: 0.05,
@@ -184,11 +183,11 @@ Ext.define('Ext.chart.series.Bar', {
     // @private sets the bar girth.
     getBarGirth: function() {
         var me = this,
-            store = me.chart.store,
+            store = me.chart.getChartStore(),
             column = me.column,
             ln = store.getCount(),
             gutter = me.gutter / 100;
-        
+
         return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter);
     },
 
@@ -204,7 +203,7 @@ Ext.define('Ext.chart.series.Bar', {
     getBounds: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             bars = [].concat(me.yField),
             barsLen = bars.length,
             groupBarsLen = barsLen,
@@ -236,8 +235,8 @@ Ext.define('Ext.chart.series.Bar', {
             axis = chart.axes.get(me.axis);
             if (axis) {
                 out = axis.calcEnds();
-                minY = out.from || axis.prevMin;
-                maxY = mmax(out.to || axis.prevMax, 0);
+                minY = out.from;
+                maxY = out.to;
             }
         }
 
@@ -247,8 +246,8 @@ Ext.define('Ext.chart.series.Bar', {
                 fields: [].concat(me.yField)
             });
             out = axis.calcEnds();
-            minY = out.from || axis.prevMin;
-            maxY = mmax(out.to || axis.prevMax, 0);
+            minY = out.from;
+            maxY = out.to;
         }
 
         if (!Ext.isNumber(minY)) {
@@ -305,7 +304,7 @@ Ext.define('Ext.chart.series.Bar', {
     getPaths: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             bounds = me.bounds = me.getBounds(),
             items = me.items = [],
             gutter = me.gutter / 100,
@@ -336,14 +335,14 @@ Ext.define('Ext.chart.series.Bar', {
             top = bounds.zero;
             totalDim = 0;
             totalNegDim = 0;
-            hasShadow = false; 
+            hasShadow = false;
             for (j = 0, counter = 0; j &lt; barsLen; j++) {
                 // Excluded series
                 if (me.__excludes &amp;&amp; me.__excludes[j]) {
                     continue;
                 }
                 yValue = record.get(bounds.bars[j]);
-                height = Math.round((yValue - ((bounds.minY &lt; 0) ? 0 : bounds.minY)) * bounds.scale);
+                height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale);
                 barAttr = {
                     fill: colors[(barsLen &gt; 1 ? j : 0) % colorLength]
                 };
@@ -449,7 +448,7 @@ Ext.define('Ext.chart.series.Bar', {
             shadowGroups = me.shadowGroups,
             shadowAttributes = me.shadowAttributes,
             shadowGroupsLn = shadowGroups.length,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             column = me.column,
             items = me.items,
             shadows = [],
@@ -507,7 +506,7 @@ Ext.define('Ext.chart.series.Bar', {
     drawSeries: function() {
         var me = this,
             chart = me.chart,
-            store = chart.substore || chart.store,
+            store = chart.getChartStore(),
             surface = chart.surface,
             animate = chart.animate,
             stacked = me.stacked,
@@ -519,11 +518,11 @@ Ext.define('Ext.chart.series.Bar', {
             seriesStyle = me.seriesStyle,
             items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
             bounds, endSeriesStyle, barAttr, attrs, anim;
-        
+
         if (!store || !store.getCount()) {
             return;
         }
-        
+
         //fill colors are taken from the colors array.
         delete seriesStyle.fill;
         endSeriesStyle = Ext.apply(seriesStyle, this.style);
@@ -597,7 +596,7 @@ Ext.define('Ext.chart.series.Bar', {
         }
         me.renderLabels();
     },
-    
+
     // @private handled when creating a label.
     onCreateLabel: function(storeItem, item, i, display) {
         var me = this,
@@ -611,7 +610,7 @@ Ext.define('Ext.chart.series.Bar', {
             group: group
         }, endLabelStyle || {}));
     },
-    
+
     // @private callback used when placing a label.
     onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
         // Determine the label's final position. Starts with the configured preferred value but
@@ -647,6 +646,7 @@ Ext.define('Ext.chart.series.Bar', {
             text: text
         });
 
+        label.isOutside = false;
         if (column) {
             if (display == outside) {
                 if (height + offsetY + attr.height &gt; (yValue &gt;= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
@@ -655,6 +655,7 @@ Ext.define('Ext.chart.series.Bar', {
             } else {
                 if (height + offsetY &gt; attr.height) {
                     display = outside;
+                    label.isOutside = true;
                 }
             }
             x = attr.x + groupBarWidth / 2;
@@ -672,6 +673,7 @@ Ext.define('Ext.chart.series.Bar', {
             else {
                 if (width + offsetX &gt; attr.width) {
                     display = outside;
+                    label.isOutside = true;
                 }
             }
             x = display == insideStart ?
@@ -764,14 +766,14 @@ Ext.define('Ext.chart.series.Bar', {
         sprite.show();
         return this.callParent(arguments);
     },
-    
+
     isItemInPoint: function(x, y, item) {
         var bbox = item.sprite.getBBox();
         return bbox.x &lt;= x &amp;&amp; bbox.y &lt;= y
             &amp;&amp; (bbox.x + bbox.width) &gt;= x
             &amp;&amp; (bbox.y + bbox.height) &gt;= y;
     },
-    
+
     // @private hide all markers
     hideAll: function() {
         var axes = this.chart.axes;
@@ -801,14 +803,35 @@ Ext.define('Ext.chart.series.Bar', {
             });
         }
     },
-    
+
 <span id='Ext-chart-series-Bar-method-getLegendColor'>    /**
 </span>     * Returns a string with the color to be used for the series legend item.
      * @param index
      */
     getLegendColor: function(index) {
-        var me = this;
-        return me.colorArrayStyle[index % me.colorArrayStyle.length];
+        var me = this,
+            colorLength = me.colorArrayStyle.length;
+
+        if (me.style &amp;&amp; me.style.fill) {
+            return me.style.fill;
+        } else {
+            return me.colorArrayStyle[index % colorLength];
+        }
+    },
+
+    highlightItem: function(item) {
+        this.callParent(arguments);
+        this.renderLabels();
+    },
+
+    unHighlightItem: function() {
+        this.callParent(arguments);
+        this.renderLabels();
+    },
+
+    cleanHighlights: function() {
+        this.callParent(arguments);
+        this.renderLabels();
     }
 });</pre>
 </body>