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