Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / src / chart / series / Column.js

diff --git a/src/chart/series/Column.js b/src/chart/series/Column.js
new file mode 100644 (file)
index 0000000..94880ce
--- /dev/null
+++ b/src/chart/series/Column.js
@@ -0,0 +1,120 @@
+/**
+ * @class Ext.chart.series.Column
+ * @extends Ext.chart.series.Bar
+ * 
+  <p>
+  Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful visualization technique to display quantitative information for different 
+  categories that can show some progression (or regression) in the data set.
+  As with all other series, the Column Series must be appended in the *series* Chart array configuration. See the Chart 
+  documentation for more information. A typical configuration object for the column series could be:
+  </p>
+{@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series  
+  <pre><code>
+    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}                                                
+        ]
+    });
+    
+    Ext.create('Ext.chart.Chart', {
+        renderTo: Ext.getBody(),
+        width: 500,
+        height: 300,
+        animate: true,
+        store: store,
+        axes: [{
+            type: 'Numeric',
+            position: 'bottom',
+            fields: ['data1'],
+            label: {
+                renderer: Ext.util.Format.numberRenderer('0,0')
+            },
+            title: 'Sample Values',
+            grid: true,
+            minimum: 0
+        }, {
+            type: 'Category',
+            position: 'left',
+            fields: ['name'],
+            title: 'Sample Metrics'
+        }],
+            axes: [{
+                type: 'Numeric',
+                position: 'left',
+                fields: ['data1'],
+                label: {
+                    renderer: Ext.util.Format.numberRenderer('0,0')
+                },
+                title: 'Sample Values',
+                grid: true,
+                minimum: 0
+            }, {
+                type: 'Category',
+                position: 'bottom',
+                fields: ['name'],
+                title: 'Sample Metrics'
+            }],
+            series: [{
+                type: 'column',
+                axis: 'left',
+                highlight: true,
+                tips: {
+                  trackMouse: true,
+                  width: 140,
+                  height: 28,
+                  renderer: function(storeItem, item) {
+                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
+                  }
+                },
+                label: {
+                  display: 'insideEnd',
+                  'text-anchor': 'middle',
+                    field: 'data1',
+                    renderer: Ext.util.Format.numberRenderer('0'),
+                    orientation: 'vertical',
+                    color: '#333'
+                },
+                xField: 'name',
+                yField: 'data1'
+            }]
+    });
+   </code></pre>
+ 
+  <p>
+  In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis, set `highlight` to true so that bars are smoothly highlighted
+  when hovered and bind the `xField` or category field to the data store `name` property and the `yField` as the data1 property of a store element. 
+  </p>
+ */
+
+Ext.define('Ext.chart.series.Column', {
+
+    /* Begin Definitions */
+
+    alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
+
+    extend: 'Ext.chart.series.Bar',
+
+    /* End Definitions */
+
+    type: 'column',
+    alias: 'series.column',
+
+    column: true,
+
+    /**
+     * @cfg {Number} xPadding
+     * Padding between the left/right axes and the bars
+     */
+    xPadding: 10,
+
+    /**
+     * @cfg {Number} yPadding
+     * Padding between the top/bottom axes and the bars
+     */
+    yPadding: 0
+});
\ No newline at end of file