Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Category.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-axis-Category'>/**
19 </span> * @class Ext.chart.axis.Category
20  * @extends Ext.chart.axis.Axis
21  *
22  * A type of axis that displays items in categories. This axis is generally used to
23  * display categorical information like names of items, month names, quarters, etc.
24  * but no quantitative values. For that other type of information &lt;em&gt;Number&lt;/em&gt;
25  * axis are more suitable.
26  *
27  * As with other axis you can set the position of the axis and its title. For example:
28  *
29  * {@img Ext.chart.axis.Category/Ext.chart.axis.Category.png Ext.chart.axis.Category chart axis}
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  *         store: store,
47  *         axes: [{
48  *             type: 'Numeric',
49  *             grid: true,
50  *             position: 'left',
51  *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
52  *             title: 'Sample Values',
53  *             grid: {
54  *                 odd: {
55  *                     opacity: 1,
56  *                     fill: '#ddd',
57  *                     stroke: '#bbb',
58  *                     'stroke-width': 1
59  *                 }
60  *             },
61  *             minimum: 0,
62  *             adjustMinimumByMajorUnit: 0
63  *         }, {
64  *             type: 'Category',
65  *             position: 'bottom',
66  *             fields: ['name'],
67  *             title: 'Sample Metrics',
68  *             grid: true,
69  *             label: {
70  *                 rotate: {
71  *                     degrees: 315
72  *                 }
73  *             }
74  *         }],
75  *         series: [{
76  *             type: 'area',
77  *             highlight: false,
78  *             axis: 'left',
79  *             xField: 'name',
80  *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
81  *             style: {
82  *                 opacity: 0.93
83  *             }
84  *         }]
85  *     });
86  *
87  * In this example with set the category axis to the bottom of the surface, bound the axis to
88  * the &lt;em&gt;name&lt;/em&gt; property and set as title &lt;em&gt;Month of the Year&lt;/em&gt;.
89  */
90
91 Ext.define('Ext.chart.axis.Category', {
92
93     /* Begin Definitions */
94
95     extend: 'Ext.chart.axis.Axis',
96
97     alternateClassName: 'Ext.chart.CategoryAxis',
98
99     alias: 'axis.category',
100
101     /* End Definitions */
102
103 <span id='Ext-chart-axis-Category-property-categoryNames'>    /**
104 </span>     * A list of category names to display along this axis.
105      *
106      * @property categoryNames
107      * @type Array
108      */
109     categoryNames: null,
110
111 <span id='Ext-chart-axis-Category-property-calculateCategoryCount'>    /**
112 </span>     * Indicates whether or not to calculate the number of categories (ticks and
113      * labels) when there is not enough room to display all labels on the axis.
114      * If set to true, the axis will determine the number of categories to plot.
115      * If not, all categories will be plotted.
116      *
117      * @property calculateCategoryCount
118      * @type Boolean
119      */
120     calculateCategoryCount: false,
121
122     // @private creates an array of labels to be used when rendering.
123     setLabels: function() {
124         var store = this.chart.store,
125             fields = this.fields,
126             ln = fields.length,
127             i;
128
129         this.labels = [];
130         store.each(function(record) {
131             for (i = 0; i &lt; ln; i++) {
132                 this.labels.push(record.get(fields[i]));
133             }
134         }, this);
135     },
136
137     // @private calculates labels positions and marker positions for rendering.
138     applyData: function() {
139         this.callParent();
140         this.setLabels();
141         var count = this.chart.store.getCount();
142         return {
143             from: 0,
144             to: count,
145             power: 1,
146             step: 1,
147             steps: count - 1
148         };
149     }
150 });
151 </pre>
152 </body>
153 </html>