src/chart/axis/Numeric.js

   1 /**
   2  * @class Ext.chart.axis.Numeric
   3  * @extends Ext.chart.axis.Axis
   4  *
   5  * An axis to handle numeric values. This axis is used for quantitative data as
   6  * opposed to the category axis. You can set mininum and maximum values to the
   7  * axis so that the values are bound to that. If no values are set, then the
   8  * scale will auto-adjust to the values.
   9  *
  10  * {@img Ext.chart.axis.Numeric/Ext.chart.axis.Numeric.png Ext.chart.axis.Numeric chart axis}
  11  *
  12  * For example:
  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 we create an axis of Numeric type. We set a minimum value so that
  71  * even if all series have values greater than zero, the grid starts at zero. We bind
  72  * the axis onto the left part of the surface by setting <em>position</em> to <em>left</em>.
  73  * We bind three different store fields to this axis by setting <em>fields</em> to an array.
  74  * We set the title of the axis to <em>Number of Hits</em> by using the <em>title</em> property.
  75  * We use a <em>grid</em> configuration to set odd background rows to a certain style and even rows
  76  * to be transparent/ignored.
  77  *
  78  * @constructor
  79  */
  80 Ext.define('Ext.chart.axis.Numeric', {
  81
  82     /* Begin Definitions */
  83
  84     extend: 'Ext.chart.axis.Axis',
  85
  86     alternateClassName: 'Ext.chart.NumericAxis',
  87
  88     /* End Definitions */
  89
  90     type: 'numeric',
  91
  92     alias: 'axis.numeric',
  93
  94     constructor: function(config) {
  95         var me = this, label, f;
  96         me.callParent([config]);
  97         label = me.label;
  98         if (me.roundToDecimal === false) {
  99             return;
 100         }
 101         if (label.renderer) {
 102             f = label.renderer;
 103             label.renderer = function(v) {
 104                 return me.roundToDecimal( f(v), me.decimals );
 105             };
 106         } else {
 107             label.renderer = function(v) {
 108                 return me.roundToDecimal(v, me.decimals);
 109             };
 110         }
 111     },
 112
 113     roundToDecimal: function(v, dec) {
 114         var val = Math.pow(10, dec || 0);
 115         return ((v * val) >> 0) / val;
 116     },
 117
 118     /**
 119      * The minimum value drawn by the axis. If not set explicitly, the axis
 120      * minimum will be calculated automatically.
 121      *
 122      * @property minimum
 123      * @type Number
 124      */
 125     minimum: NaN,
 126
 127     /**
 128      * The maximum value drawn by the axis. If not set explicitly, the axis
 129      * maximum will be calculated automatically.
 130      *
 131      * @property maximum
 132      * @type Number
 133      */
 134     maximum: NaN,
 135
 136     /**
 137      * The number of decimals to round the value to.
 138      * Default's 2.
 139      *
 140      * @property decimals
 141      * @type Number
 142      */
 143     decimals: 2,
 144
 145     /**
 146      * The scaling algorithm to use on this axis. May be "linear" or
 147      * "logarithmic".
 148      *
 149      * @property scale
 150      * @type String
 151      */
 152     scale: "linear",
 153
 154     /**
 155      * Indicates the position of the axis relative to the chart
 156      *
 157      * @property position
 158      * @type String
 159      */
 160     position: 'left',
 161
 162     /**
 163      * Indicates whether to extend maximum beyond data's maximum to the nearest
 164      * majorUnit.
 165      *
 166      * @property adjustMaximumByMajorUnit
 167      * @type Boolean
 168      */
 169     adjustMaximumByMajorUnit: false,
 170
 171     /**
 172      * Indicates whether to extend the minimum beyond data's minimum to the
 173      * nearest majorUnit.
 174      *
 175      * @property adjustMinimumByMajorUnit
 176      * @type Boolean
 177      */
 178     adjustMinimumByMajorUnit: false,
 179
 180     // @private apply data.
 181     applyData: function() {
 182         this.callParent();
 183         return this.calcEnds();
 184     }
 185 });