| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 | <!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>The source code</title>  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>  <style type="text/css">    .highlight { display: block; background-color: #ddd; }  </style>  <script type="text/javascript">    function highlight() {      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";    }  </script></head><body onload="prettyPrint(); highlight();">  <pre class="prettyprint lang-js"><span id='Ext-chart-axis-Numeric'>/**</span> * @class Ext.chart.axis.Numeric * * An axis to handle numeric values. This axis is used for quantitative data as * opposed to the category axis. You can set mininum and maximum values to the * axis so that the values are bound to that. If no values are set, then the * scale will auto-adjust to the values. * *     @example *     var store = Ext.create('Ext.data.JsonStore', { *          fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], *          data: [ *              {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, *              {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, *              {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, *              {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, *              {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} *          ] *     }); * *     Ext.create('Ext.chart.Chart', { *         renderTo: Ext.getBody(), *         width: 500, *         height: 300, *         store: store, *         axes: [{ *             type: 'Numeric', *             grid: true, *             position: 'left', *             fields: ['data1', 'data2', 'data3', 'data4', 'data5'], *             title: 'Sample Values', *             grid: { *                 odd: { *                     opacity: 1, *                     fill: '#ddd', *                     stroke: '#bbb', *                     'stroke-width': 1 *                 } *             }, *             minimum: 0, *             adjustMinimumByMajorUnit: 0 *         }, { *             type: 'Category', *             position: 'bottom', *             fields: ['name'], *             title: 'Sample Metrics', *             grid: true, *             label: { *                 rotate: { *                     degrees: 315 *                 } *             } *         }], *         series: [{ *             type: 'area', *             highlight: false, *             axis: 'left', *             xField: 'name', *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'], *             style: { *                 opacity: 0.93 *             } *         }] *     }); * * In this example we create an axis of Numeric type. We set a minimum value so that * even if all series have values greater than zero, the grid starts at zero. We bind * the axis onto the left part of the surface by setting `position` to `left`. * We bind three different store fields to this axis by setting `fields` to an array. * We set the title of the axis to _Number of Hits_ by using the `title` property. * We use a `grid` configuration to set odd background rows to a certain style and even rows * to be transparent/ignored. */Ext.define('Ext.chart.axis.Numeric', {    /* Begin Definitions */    extend: 'Ext.chart.axis.Axis',    alternateClassName: 'Ext.chart.NumericAxis',    /* End Definitions */    type: 'numeric',    alias: 'axis.numeric',    uses: ['Ext.data.Store'],    constructor: function(config) {        var me = this,            hasLabel = !!(config.label && config.label.renderer),            label;        me.callParent([config]);        label = me.label;        if (config.constrain == null) {            me.constrain = (config.minimum != null && config.maximum != null);        }        if (!hasLabel) {            label.renderer = function(v) {                return me.roundToDecimal(v, me.decimals);            };        }    },    roundToDecimal: function(v, dec) {        var val = Math.pow(10, dec || 0);        return Math.round(v * val) / val;    },<span id='Ext-chart-axis-Numeric-property-minimum'>    /**</span>     * The minimum value drawn by the axis. If not set explicitly, the axis     * minimum will be calculated automatically.     *     * @property {Number} minimum     */    minimum: NaN,<span id='Ext-chart-axis-Numeric-property-maximum'>    /**</span>     * The maximum value drawn by the axis. If not set explicitly, the axis     * maximum will be calculated automatically.     *     * @property {Number} maximum     */    maximum: NaN,<span id='Ext-chart-axis-Numeric-cfg-constrain'>    /**</span>     * @cfg {Boolean} constrain     * If true, the values of the chart will be rendered only if they belong between minimum and maximum     * If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not     * Default's true if maximum and minimum is specified.     */    constrain: true,<span id='Ext-chart-axis-Numeric-property-decimals'>    /**</span>     * The number of decimals to round the value to.     *     * @property {Number} decimals     */    decimals: 2,<span id='Ext-chart-axis-Numeric-property-scale'>    /**</span>     * The scaling algorithm to use on this axis. May be "linear" or     * "logarithmic".  Currently only linear scale is implemented.     *     * @property {String} scale     * @private     */    scale: "linear",    // @private constrains to datapoints between minimum and maximum only    doConstrain: function() {        var me = this,            store = me.chart.store,            items = store.data.items,            d, dLen, record,            series = me.chart.series.items,            fields = me.fields,            ln = fields.length,            range = me.calcEnds(),            min = range.from, max = range.to, i, l,            useAcum = false,            value, data = [],            addRecord;        for (i = 0, l = series.length; i < l; i++) {            if (series[i].type === 'bar' && series[i].stacked) {                // Do not constrain stacked bar chart.                return;            }        }        for (d = 0, dLen = items.length; d < dLen; d++) {            addRecord = true;            record = items[d];            for (i = 0; i < ln; i++) {                value = record.get(fields[i]);                if (+value < +min) {                    addRecord = false;                    break;                }                if (+value > +max) {                    addRecord = false;                    break;                }            }            if (addRecord) {                data.push(record);            }        }        me.chart.substore = Ext.create('Ext.data.Store', { model: store.model });        me.chart.substore.loadData(data); // data records must be loaded (not passed as config above because it's not json)    },<span id='Ext-chart-axis-Numeric-property-position'>    /**</span>     * Indicates the position of the axis relative to the chart     *     * @property {String} position     */    position: 'left',<span id='Ext-chart-axis-Numeric-property-adjustMaximumByMajorUnit'>    /**</span>     * Indicates whether to extend maximum beyond data's maximum to the nearest     * majorUnit.     *     * @property {Boolean} adjustMaximumByMajorUnit     */    adjustMaximumByMajorUnit: false,<span id='Ext-chart-axis-Numeric-property-adjustMinimumByMajorUnit'>    /**</span>     * Indicates whether to extend the minimum beyond data's minimum to the     * nearest majorUnit.     *     * @property {Boolean} adjustMinimumByMajorUnit     */    adjustMinimumByMajorUnit: false,    // applying constraint    processView: function() {        var me = this,            constrain = me.constrain;        if (constrain) {            me.doConstrain();        }    },    // @private apply data.    applyData: function() {        this.callParent();        return this.calcEnds();    }});</pre></body></html>
 |