docs/source/Category.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.axis.Category'>/**
   2 </span> * @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 &lt;em&gt;Number&lt;/em&gt;
   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  *
  12  * {@img Ext.chart.axis.Category/Ext.chart.axis.Category.png Ext.chart.axis.Category chart axis}
  13  *
  14  *     var store = Ext.create('Ext.data.JsonStore', {
  15  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  16  *         data: [
  17  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  18  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  19  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  20  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  21  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  22  *         ]
  23  *     });
  24  *
  25  *     Ext.create('Ext.chart.Chart', {
  26  *         renderTo: Ext.getBody(),
  27  *         width: 500,
  28  *         height: 300,
  29  *         store: store,
  30  *         axes: [{
  31  *             type: 'Numeric',
  32  *             grid: true,
  33  *             position: 'left',
  34  *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  35  *             title: 'Sample Values',
  36  *             grid: {
  37  *                 odd: {
  38  *                     opacity: 1,
  39  *                     fill: '#ddd',
  40  *                     stroke: '#bbb',
  41  *                     'stroke-width': 1
  42  *                 }
  43  *             },
  44  *             minimum: 0,
  45  *             adjustMinimumByMajorUnit: 0
  46  *         }, {
  47  *             type: 'Category',
  48  *             position: 'bottom',
  49  *             fields: ['name'],
  50  *             title: 'Sample Metrics',
  51  *             grid: true,
  52  *             label: {
  53  *                 rotate: {
  54  *                     degrees: 315
  55  *                 }
  56  *             }
  57  *         }],
  58  *         series: [{
  59  *             type: 'area',
  60  *             highlight: false,
  61  *             axis: 'left',
  62  *             xField: 'name',
  63  *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  64  *             style: {
  65  *                 opacity: 0.93
  66  *             }
  67  *         }]
  68  *     });
  69  *
  70  * In this example with set the category axis to the bottom of the surface, bound the axis to
  71  * the &lt;em&gt;name&lt;/em&gt; property and set as title &lt;em&gt;Month of the Year&lt;/em&gt;.
  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 <span id='Ext-chart.axis.Category-property-categoryNames'>    /**
  87 </span>     * A list of category names to display along this axis.
  88      *
  89      * @property categoryNames
  90      * @type Array
  91      */
  92     categoryNames: null,
  93
  94 <span id='Ext-chart.axis.Category-property-calculateCategoryCount'>    /**
  95 </span>     * 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 &lt; 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 });
 134 </pre></pre></body></html>