src/chart/series/Column.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.chart.series.Column
  17  * @extends Ext.chart.series.Bar
  18  *
  19  * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
  20  * visualization technique to display quantitative information for different categories that can
  21  * show some progression (or regression) in the data set. As with all other series, the Column Series
  22  * must be appended in the *series* Chart array configuration. See the Chart documentation for more
  23  * information. A typical configuration object for the column series could be:
  24  *
  25  *     @example
  26  *     var store = Ext.create('Ext.data.JsonStore', {
  27  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  28  *         data: [
  29  *             { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
  30  *             { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
  31  *             { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
  32  *             { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
  33  *             { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
  34  *         ]
  35  *     });
  36  *
  37  *     Ext.create('Ext.chart.Chart', {
  38  *         renderTo: Ext.getBody(),
  39  *         width: 500,
  40  *         height: 300,
  41  *         animate: true,
  42  *         store: store,
  43  *         axes: [
  44  *             {
  45  *                 type: 'Numeric',
  46  *                 position: 'left',
  47  *                 fields: ['data1'],
  48  *                 label: {
  49  *                     renderer: Ext.util.Format.numberRenderer('0,0')
  50  *                 },
  51  *                 title: 'Sample Values',
  52  *                 grid: true,
  53  *                 minimum: 0
  54  *             },
  55  *             {
  56  *                 type: 'Category',
  57  *                 position: 'bottom',
  58  *                 fields: ['name'],
  59  *                 title: 'Sample Metrics'
  60  *             }
  61  *         ],
  62  *         series: [
  63  *             {
  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  *
  89  * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
  90  * set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
  91  * field to the data store `name` property and the `yField` as the data1 property of a store element.
  92  */
  93 Ext.define('Ext.chart.series.Column', {
  94
  95     /* Begin Definitions */
  96
  97     alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
  98
  99     extend: 'Ext.chart.series.Bar',
 100
 101     /* End Definitions */
 102
 103     type: 'column',
 104     alias: 'series.column',
 105
 106     column: true,
 107
 108     /**
 109      * @cfg {Number} xPadding
 110      * Padding between the left/right axes and the bars
 111      */
 112     xPadding: 10,
 113
 114     /**
 115      * @cfg {Number} yPadding
 116      * Padding between the top/bottom axes and the bars
 117      */
 118     yPadding: 0
 119 });