src/chart/series/Column.js

   1 /**
   2  * @class Ext.chart.series.Column
   3  * @extends Ext.chart.series.Bar
   4  *
   5  * 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
   6  * categories that can show some progression (or regression) in the data set.
   7  * As with all other series, the Column Series must be appended in the *series* Chart array configuration. See the Chart
   8  * documentation for more information. A typical configuration object for the column series could be:
   9  *
  10  * {@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series}
  11  *
  12  * ## Example
  13  *
  14  *     var store = Ext.create('Ext.data.JsonStore', {
  15  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  16  *         data: [
  17  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  18  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  19  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  20  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  21  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  22  *         ]
  23  *     });
  24  *
  25  *     Ext.create('Ext.chart.Chart', {
  26  *         renderTo: Ext.getBody(),
  27  *         width: 500,
  28  *         height: 300,
  29  *         animate: true,
  30  *         store: store,
  31  *         axes: [{
  32  *             type: 'Numeric',
  33  *             position: 'bottom',
  34  *             fields: ['data1'],
  35  *             label: {
  36  *                 renderer: Ext.util.Format.numberRenderer('0,0')
  37  *             },
  38  *             title: 'Sample Values',
  39  *             grid: true,
  40  *             minimum: 0
  41  *         }, {
  42  *             type: 'Category',
  43  *             position: 'left',
  44  *             fields: ['name'],
  45  *             title: 'Sample Metrics'
  46  *         }],
  47  *             axes: [{
  48  *                 type: 'Numeric',
  49  *                 position: 'left',
  50  *                 fields: ['data1'],
  51  *                 label: {
  52  *                     renderer: Ext.util.Format.numberRenderer('0,0')
  53  *                 },
  54  *                 title: 'Sample Values',
  55  *                 grid: true,
  56  *                 minimum: 0
  57  *             }, {
  58  *                 type: 'Category',
  59  *                 position: 'bottom',
  60  *                 fields: ['name'],
  61  *                 title: 'Sample Metrics'
  62  *             }],
  63  *             series: [{
  64  *                 type: 'column',
  65  *                 axis: 'left',
  66  *                 highlight: true,
  67  *                 tips: {
  68  *                   trackMouse: true,
  69  *                   width: 140,
  70  *                   height: 28,
  71  *                   renderer: function(storeItem, item) {
  72  *                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
  73  *                   }
  74  *                 },
  75  *                 label: {
  76  *                   display: 'insideEnd',
  77  *                   'text-anchor': 'middle',
  78  *                     field: 'data1',
  79  *                     renderer: Ext.util.Format.numberRenderer('0'),
  80  *                     orientation: 'vertical',
  81  *                     color: '#333'
  82  *                 },
  83  *                 xField: 'name',
  84  *                 yField: 'data1'
  85  *             }]
  86  *     });
  87  *
  88  * 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
  89  * 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.
  90  */
  91 Ext.define('Ext.chart.series.Column', {
  92
  93     /* Begin Definitions */
  94
  95     alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
  96
  97     extend: 'Ext.chart.series.Bar',
  98
  99     /* End Definitions */
 100
 101     type: 'column',
 102     alias: 'series.column',
 103
 104     column: true,
 105
 106     /**
 107      * @cfg {Number} xPadding
 108      * Padding between the left/right axes and the bars
 109      */
 110     xPadding: 10,
 111
 112     /**
 113      * @cfg {Number} yPadding
 114      * Padding between the top/bottom axes and the bars
 115      */
 116     yPadding: 0
 117 });