src/chart/axis/Numeric.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.Numeric
  17  * @extends Ext.chart.axis.Axis
  18  *
  19  * An axis to handle numeric values. This axis is used for quantitative data as
  20  * opposed to the category axis. You can set mininum and maximum values to the
  21  * axis so that the values are bound to that. If no values are set, then the
  22  * scale will auto-adjust to the values.
  23  *
  24  * {@img Ext.chart.axis.Numeric/Ext.chart.axis.Numeric.png Ext.chart.axis.Numeric chart axis}
  25  *
  26  * For example:
  27  *
  28  *     var store = Ext.create('Ext.data.JsonStore', {
  29  *          fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  30  *          data: [
  31  *              {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  32  *              {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  33  *              {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  34  *              {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  35  *              {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  36  *          ]
  37  *     });
  38  *
  39  *     Ext.create('Ext.chart.Chart', {
  40  *         renderTo: Ext.getBody(),
  41  *         width: 500,
  42  *         height: 300,
  43  *         store: store,
  44  *         axes: [{
  45  *             type: 'Numeric',
  46  *             grid: true,
  47  *             position: 'left',
  48  *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  49  *             title: 'Sample Values',
  50  *             grid: {
  51  *                 odd: {
  52  *                     opacity: 1,
  53  *                     fill: '#ddd',
  54  *                     stroke: '#bbb',
  55  *                     'stroke-width': 1
  56  *                 }
  57  *             },
  58  *             minimum: 0,
  59  *             adjustMinimumByMajorUnit: 0
  60  *         }, {
  61  *             type: 'Category',
  62  *             position: 'bottom',
  63  *             fields: ['name'],
  64  *             title: 'Sample Metrics',
  65  *             grid: true,
  66  *             label: {
  67  *                 rotate: {
  68  *                     degrees: 315
  69  *                 }
  70  *             }
  71  *         }],
  72  *         series: [{
  73  *             type: 'area',
  74  *             highlight: false,
  75  *             axis: 'left',
  76  *             xField: 'name',
  77  *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  78  *             style: {
  79  *                 opacity: 0.93
  80  *             }
  81  *         }]
  82  *     });
  83  *
  84  * In this example we create an axis of Numeric type. We set a minimum value so that
  85  * even if all series have values greater than zero, the grid starts at zero. We bind
  86  * the axis onto the left part of the surface by setting <em>position</em> to <em>left</em>.
  87  * We bind three different store fields to this axis by setting <em>fields</em> to an array.
  88  * We set the title of the axis to <em>Number of Hits</em> by using the <em>title</em> property.
  89  * We use a <em>grid</em> configuration to set odd background rows to a certain style and even rows
  90  * to be transparent/ignored.
  91  *
  92  */
  93 Ext.define('Ext.chart.axis.Numeric', {
  94
  95     /* Begin Definitions */
  96
  97     extend: 'Ext.chart.axis.Axis',
  98
  99     alternateClassName: 'Ext.chart.NumericAxis',
 100
 101     /* End Definitions */
 102
 103     type: 'numeric',
 104
 105     alias: 'axis.numeric',
 106
 107     constructor: function(config) {
 108         var me = this,
 109             hasLabel = !!(config.label && config.label.renderer),
 110             label;
 111
 112         me.callParent([config]);
 113         label = me.label;
 114         if (me.roundToDecimal === false) {
 115             return;
 116         }
 117         if (!hasLabel) {
 118             label.renderer = function(v) {
 119                 return me.roundToDecimal(v, me.decimals);
 120             };
 121         }
 122     },
 123
 124     roundToDecimal: function(v, dec) {
 125         var val = Math.pow(10, dec || 0);
 126         return ((v * val) >> 0) / val;
 127     },
 128
 129     /**
 130      * The minimum value drawn by the axis. If not set explicitly, the axis
 131      * minimum will be calculated automatically.
 132      *
 133      * @property minimum
 134      * @type Number
 135      */
 136     minimum: NaN,
 137
 138     /**
 139      * The maximum value drawn by the axis. If not set explicitly, the axis
 140      * maximum will be calculated automatically.
 141      *
 142      * @property maximum
 143      * @type Number
 144      */
 145     maximum: NaN,
 146
 147     /**
 148      * The number of decimals to round the value to.
 149      * Default's 2.
 150      *
 151      * @property decimals
 152      * @type Number
 153      */
 154     decimals: 2,
 155
 156     /**
 157      * The scaling algorithm to use on this axis. May be "linear" or
 158      * "logarithmic".
 159      *
 160      * @property scale
 161      * @type String
 162      */
 163     scale: "linear",
 164
 165     /**
 166      * Indicates the position of the axis relative to the chart
 167      *
 168      * @property position
 169      * @type String
 170      */
 171     position: 'left',
 172
 173     /**
 174      * Indicates whether to extend maximum beyond data's maximum to the nearest
 175      * majorUnit.
 176      *
 177      * @property adjustMaximumByMajorUnit
 178      * @type Boolean
 179      */
 180     adjustMaximumByMajorUnit: false,
 181
 182     /**
 183      * Indicates whether to extend the minimum beyond data's minimum to the
 184      * nearest majorUnit.
 185      *
 186      * @property adjustMinimumByMajorUnit
 187      * @type Boolean
 188      */
 189     adjustMinimumByMajorUnit: false,
 190
 191     // @private apply data.
 192     applyData: function() {
 193         this.callParent();
 194         return this.calcEnds();
 195     }
 196 });
 197