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