X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/chart/series/Column.js diff --git a/src/chart/series/Column.js b/src/chart/series/Column.js new file mode 100644 index 00000000..94880ced --- /dev/null +++ b/src/chart/series/Column.js @@ -0,0 +1,120 @@ +/** + * @class Ext.chart.series.Column + * @extends Ext.chart.series.Bar + * +
+ 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: +
+{@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series +
+ 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'
+ }]
+ });
+
+
+ + 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. +
+ */ + +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