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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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 `Number`
  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  *     @example
  30  *     var store = Ext.create('Ext.data.JsonStore', {
  31  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  32  *         data: [
  33  *             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  34  *             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  35  *             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  36  *             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  37  *             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  38  *         ]
  39  *     });
  40  *
  41  *     Ext.create('Ext.chart.Chart', {
  42  *         renderTo: Ext.getBody(),
  43  *         width: 500,
  44  *         height: 300,
  45  *         store: store,
  46  *         axes: [{
  47  *             type: 'Numeric',
  48  *             grid: true,
  49  *             position: 'left',
  50  *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  51  *             title: 'Sample Values',
  52  *             grid: {
  53  *                 odd: {
  54  *                     opacity: 1,
  55  *                     fill: '#ddd',
  56  *                     stroke: '#bbb',
  57  *                     'stroke-width': 1
  58  *                 }
  59  *             },
  60  *             minimum: 0,
  61  *             adjustMinimumByMajorUnit: 0
  62  *         }, {
  63  *             type: 'Category',
  64  *             position: 'bottom',
  65  *             fields: ['name'],
  66  *             title: 'Sample Metrics',
  67  *             grid: true,
  68  *             label: {
  69  *                 rotate: {
  70  *                     degrees: 315
  71  *                 }
  72  *             }
  73  *         }],
  74  *         series: [{
  75  *             type: 'area',
  76  *             highlight: false,
  77  *             axis: 'left',
  78  *             xField: 'name',
  79  *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  80  *             style: {
  81  *                 opacity: 0.93
  82  *             }
  83  *         }]
  84  *     });
  85  *
  86  * In this example with set the category axis to the bottom of the surface, bound the axis to
  87  * the `name` property and set as title _Month of the Year_.
  88  */
  89 Ext.define('Ext.chart.axis.Category', {
  90
  91     /* Begin Definitions */
  92
  93     extend: 'Ext.chart.axis.Axis',
  94
  95     alternateClassName: 'Ext.chart.CategoryAxis',
  96
  97     alias: 'axis.category',
  98
  99     /* End Definitions */
 100
 101 <span id='Ext-chart-axis-Category-property-categoryNames'>    /**
 102 </span>     * A list of category names to display along this axis.
 103      * @property {String} categoryNames
 104      */
 105     categoryNames: null,
 106
 107 <span id='Ext-chart-axis-Category-property-calculateCategoryCount'>    /**
 108 </span>     * Indicates whether or not to calculate the number of categories (ticks and
 109      * labels) when there is not enough room to display all labels on the axis.
 110      * If set to true, the axis will determine the number of categories to plot.
 111      * If not, all categories will be plotted.
 112      *
 113      * @property calculateCategoryCount
 114      * @type Boolean
 115      */
 116     calculateCategoryCount: false,
 117
 118     // @private creates an array of labels to be used when rendering.
 119     setLabels: function() {
 120         var store = this.chart.store,
 121             fields = this.fields,
 122             ln = fields.length,
 123             i;
 124
 125         this.labels = [];
 126         store.each(function(record) {
 127             for (i = 0; i &lt; ln; i++) {
 128                 this.labels.push(record.get(fields[i]));
 129             }
 130         }, this);
 131     },
 132
 133     // @private calculates labels positions and marker positions for rendering.
 134     applyData: function() {
 135         this.callParent();
 136         this.setLabels();
 137         var count = this.chart.store.getCount();
 138         return {
 139             from: 0,
 140             to: count,
 141             power: 1,
 142             step: 1,
 143             steps: count - 1
 144         };
 145     }
 146 });
 147 </pre>
 148 </body>
 149 </html>