src/chart/series/Column.js

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