docs/source/Numeric.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-Numeric'>/**
  19 </span> * @class Ext.chart.axis.Numeric
  20  * @extends Ext.chart.axis.Axis
  21  *
  22  * An axis to handle numeric values. This axis is used for quantitative data as
  23  * opposed to the category axis. You can set mininum and maximum values to the
  24  * axis so that the values are bound to that. If no values are set, then the
  25  * scale will auto-adjust to the values.
  26  *
  27  *     @example
  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 `position` to `left`.
  87  * We bind three different store fields to this axis by setting `fields` to an array.
  88  * We set the title of the axis to _Number of Hits_ by using the `title` property.
  89  * We use a `grid` configuration to set odd background rows to a certain style and even rows
  90  * to be transparent/ignored.
  91  */
  92 Ext.define('Ext.chart.axis.Numeric', {
  93
  94     /* Begin Definitions */
  95
  96     extend: 'Ext.chart.axis.Axis',
  97
  98     alternateClassName: 'Ext.chart.NumericAxis',
  99
 100     /* End Definitions */
 101
 102     type: 'numeric',
 103
 104     alias: 'axis.numeric',
 105
 106     constructor: function(config) {
 107         var me = this,
 108             hasLabel = !!(config.label &amp;&amp; config.label.renderer),
 109             label;
 110
 111         me.callParent([config]);
 112         label = me.label;
 113         if (me.roundToDecimal === false) {
 114             return;
 115         }
 116         if (!hasLabel) {
 117             label.renderer = function(v) {
 118                 return me.roundToDecimal(v, me.decimals);
 119             };
 120         }
 121     },
 122
 123     roundToDecimal: function(v, dec) {
 124         var val = Math.pow(10, dec || 0);
 125         return Math.floor(v * val) / val;
 126     },
 127
 128 <span id='Ext-chart-axis-Numeric-property-minimum'>    /**
 129 </span>     * The minimum value drawn by the axis. If not set explicitly, the axis
 130      * minimum will be calculated automatically.
 131      *
 132      * @property {Number} minimum
 133      */
 134     minimum: NaN,
 135
 136 <span id='Ext-chart-axis-Numeric-property-maximum'>    /**
 137 </span>     * The maximum value drawn by the axis. If not set explicitly, the axis
 138      * maximum will be calculated automatically.
 139      *
 140      * @property {Number} maximum
 141      */
 142     maximum: NaN,
 143
 144 <span id='Ext-chart-axis-Numeric-property-decimals'>    /**
 145 </span>     * The number of decimals to round the value to.
 146      *
 147      * @property {Number} decimals
 148      */
 149     decimals: 2,
 150
 151 <span id='Ext-chart-axis-Numeric-property-scale'>    /**
 152 </span>     * The scaling algorithm to use on this axis. May be &quot;linear&quot; or
 153      * &quot;logarithmic&quot;.  Currently only linear scale is implemented.
 154      *
 155      * @property {String} scale
 156      * @private
 157      */
 158     scale: &quot;linear&quot;,
 159
 160 <span id='Ext-chart-axis-Numeric-property-position'>    /**
 161 </span>     * Indicates the position of the axis relative to the chart
 162      *
 163      * @property {String} position
 164      */
 165     position: 'left',
 166
 167 <span id='Ext-chart-axis-Numeric-property-adjustMaximumByMajorUnit'>    /**
 168 </span>     * Indicates whether to extend maximum beyond data's maximum to the nearest
 169      * majorUnit.
 170      *
 171      * @property {Boolean} adjustMaximumByMajorUnit
 172      */
 173     adjustMaximumByMajorUnit: false,
 174
 175 <span id='Ext-chart-axis-Numeric-property-adjustMinimumByMajorUnit'>    /**
 176 </span>     * Indicates whether to extend the minimum beyond data's minimum to the
 177      * nearest majorUnit.
 178      *
 179      * @property {Boolean} adjustMinimumByMajorUnit
 180      */
 181     adjustMinimumByMajorUnit: false,
 182
 183     // @private apply data.
 184     applyData: function() {
 185         this.callParent();
 186         return this.calcEnds();
 187     }
 188 });
 189 </pre>
 190 </body>
 191 </html>