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