    /** * @class Ext.chart.axis.Time * @extends Ext.chart.axis.Numeric * * A type of axis whose units are measured in time values. Use this axis * for listing dates that you will want to group or dynamically change. * If you just want to display dates as categories then use the * Category class for axis instead. * *     @example *     Ext.create({ *        xtype: 'cartesian',  *        renderTo: document.body, *        width: 600, *        height: 400, *        store: { *            fields: ['time', 'open', 'high', 'low', 'close'], *            data: [{ *                'time': new Date('Jan 1 2010').getTime(), *                'open': 600, *                'high': 614, *                'low': 578, *                'close': 590 *            }, { *                'time': new Date('Jan 2 2010').getTime(), *                'open': 590, *                'high': 609, *                'low': 580, *                'close': 580 *            }, { *                'time': new Date('Jan 3 2010').getTime(), *                'open': 580, *                'high': 602, *                'low': 578, *                'close': 602 *            }, { *                'time': new Date('Jan 4 2010').getTime(), *                'open': 602, *                'high': 614, *                'low': 586, *                'close': 586 *            }] *        }, *        axes: [{ *            type: 'numeric', *            position: 'left', *            fields: ['open', 'high', 'low', 'close'], *            title: { *                text: 'Sample Values', *                fontSize: 15 *            }, *            grid: true, *            minimum: 560, *            maximum: 640 *        }, { *            type: 'time', *            position: 'bottom', *            fields: ['time'], *            fromDate: new Date('Dec 31 2009'), *            toDate: new Date('Jan 5 2010'), *            title: { *                text: 'Sample Values', *                fontSize: 15 *            }, *            style: { *                axisLine: false *            } *        }], *        series: { *            type: 'candlestick', *            xField: 'time', *            openField: 'open', *            highField: 'high', *            lowField: 'low', *            closeField: 'close', *            style: { *                ohlcType: 'ohlc', *                dropStyle: { *                    fill: 'rgb(255, 128, 128)', *                    stroke: 'rgb(255, 128, 128)', *                    lineWidth: 3 *                }, *                raiseStyle: { *                    fill: 'rgb(48, 189, 167)', *                    stroke: 'rgb(48, 189, 167)', *                    lineWidth: 3 *                } *            } *        } *     }); */Ext.define('Ext.chart.axis.Time', {    extend: 'Ext.chart.axis.Numeric',    alias: 'axis.time',    type: 'time',    requires: [        'Ext.chart.axis.layout.Continuous',        'Ext.chart.axis.segmenter.Time'    ],    config: {        /**         * @cfg {Boolean} calculateByLabelSize          * The minimum value drawn by the axis. If not set explicitly, the axis         * minimum will be calculated automatically.         */        calculateByLabelSize: true,         /**         * @cfg {String} dateFormat          * Indicates the format the date will be rendered in.         * For example: 'M d' will render the dates as 'Jan 30'.         * This config works by setting the {@link #renderer} config         * to a function that uses {@link Ext.Date#format} to format the dates         * using the given `dateFormat`.         * If the {@link #renderer} config was set by the user, changes to this config         * won't replace the user set renderer (until the user removes the renderer by         * setting the `renderer` config to `null`). In this case the way the `dateFormat`         * is used (if at all) is up to the user.         */        dateFormat: null,         /**         * @cfg {Date} fromDate The starting date for the time axis.         */        fromDate: null,         /**         * @cfg {Date} toDate The ending date for the time axis.         */        toDate: null,         layout: 'continuous',         segmenter: 'time',         aggregator: 'time'    },     updateDateFormat: function (format) {        var renderer = this.getRenderer();         if (!renderer || renderer.isDefault) {            renderer = function (axis, date) {                return Ext.Date.format(new Date(date), format);            };            renderer.isDefault = true;            this.setRenderer(renderer);            this.performLayout();        }    },     updateRenderer: function (renderer) {        var dateFormat = this.getDateFormat();         if (renderer) {            this.performLayout();        } else if (dateFormat) {            // If the user removes custom `renderer` and `dateFormat` is set,             // set the `renderer` to the default one based on `dateFormat`.             this.updateDateFormat(dateFormat);        }    },     updateFromDate: function (date) {        this.setMinimum(+date);    },     updateToDate: function (date) {        this.setMaximum(+date);    },     getCoordFor: function (value) {        if (Ext.isString(value)) {            value = new Date(value);        }        return +value;    }});