src/chart/axis/Category.js

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