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; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
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
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 <em>Number</em>
25 * axis are more suitable.
27 * As with other axis you can set the position of the axis and its title. For example:
29 * {@img Ext.chart.axis.Category/Ext.chart.axis.Category.png Ext.chart.axis.Category chart axis}
31 * var store = Ext.create('Ext.data.JsonStore', {
32 * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
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}
42 * Ext.create('Ext.chart.Chart', {
43 * renderTo: Ext.getBody(),
51 * fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
52 * title: 'Sample Values',
62 * adjustMinimumByMajorUnit: 0
67 * title: 'Sample Metrics',
80 * yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
87 * In this example with set the category axis to the bottom of the surface, bound the axis to
88 * the <em>name</em> property and set as title <em>Month of the Year</em>.
91 Ext.define('Ext.chart.axis.Category', {
93 /* Begin Definitions */
95 extend: 'Ext.chart.axis.Axis',
97 alternateClassName: 'Ext.chart.CategoryAxis',
99 alias: 'axis.category',
101 /* End Definitions */
103 <span id='Ext-chart-axis-Category-property-categoryNames'> /**
104 </span> * A list of category names to display along this axis.
106 * @property categoryNames
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.
117 * @property calculateCategoryCount
120 calculateCategoryCount: false,
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,
130 store.each(function(record) {
131 for (i = 0; i < ln; i++) {
132 this.labels.push(record.get(fields[i]));
137 // @private calculates labels positions and marker positions for rendering.
138 applyData: function() {
141 var count = this.chart.store.getCount();