src/chart/axis/Category.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.chart.axis.Category
  17  * @extends Ext.chart.axis.Axis
  18  *
  19  * A type of axis that displays items in categories. This axis is generally used to
  20  * display categorical information like names of items, month names, quarters, etc.
  21  * but no quantitative values. For that other type of information `Number`
  22  * axis are more suitable.
  23  *
  24  * As with other axis you can set the position of the axis and its title. For example:
  25  *
  26  *     @example
  27  *     var store = Ext.create('Ext.data.JsonStore', {
  28  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  29  *         data: [
  30  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  31  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  32  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  33  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  34  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  35  *         ]
  36  *     });
  37  *
  38  *     Ext.create('Ext.chart.Chart', {
  39  *         renderTo: Ext.getBody(),
  40  *         width: 500,
  41  *         height: 300,
  42  *         store: store,
  43  *         axes: [{
  44  *             type: 'Numeric',
  45  *             grid: true,
  46  *             position: 'left',
  47  *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  48  *             title: 'Sample Values',
  49  *             grid: {
  50  *                 odd: {
  51  *                     opacity: 1,
  52  *                     fill: '#ddd',
  53  *                     stroke: '#bbb',
  54  *                     'stroke-width': 1
  55  *                 }
  56  *             },
  57  *             minimum: 0,
  58  *             adjustMinimumByMajorUnit: 0
  59  *         }, {
  60  *             type: 'Category',
  61  *             position: 'bottom',
  62  *             fields: ['name'],
  63  *             title: 'Sample Metrics',
  64  *             grid: true,
  65  *             label: {
  66  *                 rotate: {
  67  *                     degrees: 315
  68  *                 }
  69  *             }
  70  *         }],
  71  *         series: [{
  72  *             type: 'area',
  73  *             highlight: false,
  74  *             axis: 'left',
  75  *             xField: 'name',
  76  *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  77  *             style: {
  78  *                 opacity: 0.93
  79  *             }
  80  *         }]
  81  *     });
  82  *
  83  * In this example with set the category axis to the bottom of the surface, bound the axis to
  84  * the `name` property and set as title _Month of the Year_.
  85  */
  86 Ext.define('Ext.chart.axis.Category', {
  87
  88     /* Begin Definitions */
  89
  90     extend: 'Ext.chart.axis.Axis',
  91
  92     alternateClassName: 'Ext.chart.CategoryAxis',
  93
  94     alias: 'axis.category',
  95
  96     /* End Definitions */
  97
  98     /**
  99      * A list of category names to display along this axis.
 100      * @property {String} categoryNames
 101      */
 102     categoryNames: null,
 103
 104     /**
 105      * Indicates whether or not to calculate the number of categories (ticks and
 106      * labels) when there is not enough room to display all labels on the axis.
 107      * If set to true, the axis will determine the number of categories to plot.
 108      * If not, all categories will be plotted.
 109      *
 110      * @property calculateCategoryCount
 111      * @type Boolean
 112      */
 113     calculateCategoryCount: false,
 114
 115     // @private creates an array of labels to be used when rendering.
 116     setLabels: function() {
 117         var store = this.chart.store,
 118             fields = this.fields,
 119             ln = fields.length,
 120             i;
 121
 122         this.labels = [];
 123         store.each(function(record) {
 124             for (i = 0; i < ln; i++) {
 125                 this.labels.push(record.get(fields[i]));
 126             }
 127         }, this);
 128     },
 129
 130     // @private calculates labels positions and marker positions for rendering.
 131     applyData: function() {
 132         this.callParent();
 133         this.setLabels();
 134         var count = this.chart.store.getCount();
 135         return {
 136             from: 0,
 137             to: count,
 138             power: 1,
 139             step: 1,
 140             steps: count - 1
 141         };
 142     }
 143 });
 144