Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Column4.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-chart-series-Column'>/**
19 </span> * @class Ext.chart.series.Column
20  * @extends Ext.chart.series.Bar
21  * 
22  * 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 
23  * categories that can show some progression (or regression) in the data set.
24  * As with all other series, the Column Series must be appended in the *series* Chart array configuration. See the Chart 
25  * documentation for more information. A typical configuration object for the column series could be:
26  *
27  * {@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series}
28  *
29  * ## Example
30  * 
31  *     var store = Ext.create('Ext.data.JsonStore', {
32  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
33  *         data: [
34  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
35  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
36  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
37  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
38  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
39  *         ]
40  *     });
41  *     
42  *     Ext.create('Ext.chart.Chart', {
43  *         renderTo: Ext.getBody(),
44  *         width: 500,
45  *         height: 300,
46  *         animate: true,
47  *         store: store,
48  *         axes: [{
49  *             type: 'Numeric',
50  *             position: 'bottom',
51  *             fields: ['data1'],
52  *             label: {
53  *                 renderer: Ext.util.Format.numberRenderer('0,0')
54  *             },
55  *             title: 'Sample Values',
56  *             grid: true,
57  *             minimum: 0
58  *         }, {
59  *             type: 'Category',
60  *             position: 'left',
61  *             fields: ['name'],
62  *             title: 'Sample Metrics'
63  *         }],
64  *             axes: [{
65  *                 type: 'Numeric',
66  *                 position: 'left',
67  *                 fields: ['data1'],
68  *                 label: {
69  *                     renderer: Ext.util.Format.numberRenderer('0,0')
70  *                 },
71  *                 title: 'Sample Values',
72  *                 grid: true,
73  *                 minimum: 0
74  *             }, {
75  *                 type: 'Category',
76  *                 position: 'bottom',
77  *                 fields: ['name'],
78  *                 title: 'Sample Metrics'
79  *             }],
80  *             series: [{
81  *                 type: 'column',
82  *                 axis: 'left',
83  *                 highlight: true,
84  *                 tips: {
85  *                   trackMouse: true,
86  *                   width: 140,
87  *                   height: 28,
88  *                   renderer: function(storeItem, item) {
89  *                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
90  *                   }
91  *                 },
92  *                 label: {
93  *                   display: 'insideEnd',
94  *                   'text-anchor': 'middle',
95  *                     field: 'data1',
96  *                     renderer: Ext.util.Format.numberRenderer('0'),
97  *                     orientation: 'vertical',
98  *                     color: '#333'
99  *                 },
100  *                 xField: 'name',
101  *                 yField: 'data1'
102  *             }]
103  *     });
104  *  
105  * 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
106  * 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. 
107  */
108 Ext.define('Ext.chart.series.Column', {
109
110     /* Begin Definitions */
111
112     alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
113
114     extend: 'Ext.chart.series.Bar',
115
116     /* End Definitions */
117
118     type: 'column',
119     alias: 'series.column',
120
121     column: true,
122
123 <span id='Ext-chart-series-Column-cfg-xPadding'>    /**
124 </span>     * @cfg {Number} xPadding
125      * Padding between the left/right axes and the bars
126      */
127     xPadding: 10,
128
129 <span id='Ext-chart-series-Column-cfg-yPadding'>    /**
130 </span>     * @cfg {Number} yPadding
131      * Padding between the top/bottom axes and the bars
132      */
133     yPadding: 0
134 });</pre>
135 </body>
136 </html>