docs/source/Time3.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-Time'>/**
  19 </span> * @class Ext.chart.axis.Time
  20  * @extends Ext.chart.axis.Numeric
  21  *
  22  * A type of axis whose units are measured in time values. Use this axis
  23  * for listing dates that you will want to group or dynamically change.
  24  * If you just want to display dates as categories then use the
  25  * Category class for axis instead.
  26  *
  27  * For example:
  28  *
  29  *     axes: [{
  30  *         type: 'Time',
  31  *         position: 'bottom',
  32  *         fields: 'date',
  33  *         title: 'Day',
  34  *         dateFormat: 'M d',
  35  *
  36  *         constrain: true,
  37  *         fromDate: new Date('1/1/11'),
  38  *         toDate: new Date('1/7/11')
  39  *     }]
  40  *
  41  * In this example we're creating a time axis that has as title *Day*.
  42  * The field the axis is bound to is `date`.
  43  * The date format to use to display the text for the axis labels is `M d`
  44  * which is a three letter month abbreviation followed by the day number.
  45  * The time axis will show values for dates between `fromDate` and `toDate`.
  46  * Since `constrain` is set to true all other values for other dates not between
  47  * the fromDate and toDate will not be displayed.
  48  *
  49  */
  50 Ext.define('Ext.chart.axis.Time', {
  51
  52     /* Begin Definitions */
  53
  54     extend: 'Ext.chart.axis.Numeric',
  55
  56     alternateClassName: 'Ext.chart.TimeAxis',
  57
  58     alias: 'axis.time',
  59
  60     requires: ['Ext.data.Store', 'Ext.data.JsonStore'],
  61
  62     /* End Definitions */
  63
  64 <span id='Ext-chart-axis-Time-cfg-dateFormat'>    /**
  65 </span>     * @cfg {String/Boolean} dateFormat
  66      * Indicates the format the date will be rendered on.
  67      * For example: 'M d' will render the dates as 'Jan 30', etc.
  68      * For a list of possible format strings see {@link Ext.Date Date}
  69      */
  70     dateFormat: false,
  71
  72 <span id='Ext-chart-axis-Time-cfg-fromDate'>    /**
  73 </span>     * @cfg {Date} fromDate The starting date for the time axis.
  74      */
  75     fromDate: false,
  76
  77 <span id='Ext-chart-axis-Time-cfg-toDate'>    /**
  78 </span>     * @cfg {Date} toDate The ending date for the time axis.
  79      */
  80     toDate: false,
  81
  82 <span id='Ext-chart-axis-Time-cfg-step'>    /**
  83 </span>     * @cfg {Array/Boolean} step
  84      * An array with two components: The first is the unit of the step (day, month, year, etc).
  85      * The second one is the number of units for the step (1, 2, etc.).
  86      * Defaults to `[Ext.Date.DAY, 1]`.
  87      */
  88     step: [Ext.Date.DAY, 1],
  89
  90 <span id='Ext-chart-axis-Time-cfg-constrain'>    /**
  91 </span>     * @cfg {Boolean} constrain
  92      * If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
  93      * If false, the time axis will adapt to the new values by adding/removing steps.
  94      */
  95     constrain: false,
  96
  97     // Avoid roundtoDecimal call in Numeric Axis's constructor
  98     roundToDecimal: false,
  99
 100     constructor: function (config) {
 101         var me = this, label, f, df;
 102         me.callParent([config]);
 103         label = me.label || {};
 104         df = this.dateFormat;
 105         if (df) {
 106             if (label.renderer) {
 107                 f = label.renderer;
 108                 label.renderer = function(v) {
 109                     v = f(v);
 110                     return Ext.Date.format(new Date(f(v)), df);
 111                 };
 112             } else {
 113                 label.renderer = function(v) {
 114                     return Ext.Date.format(new Date(v &gt;&gt; 0), df);
 115                 };
 116             }
 117         }
 118     },
 119
 120     doConstrain: function () {
 121         var me = this,
 122             store = me.chart.store,
 123             data = [],
 124             series = me.chart.series.items,
 125             math = Math,
 126             mmax = math.max,
 127             mmin = math.min,
 128             fields = me.fields,
 129             ln = fields.length,
 130             range = me.getRange(),
 131             min = range.min, max = range.max, i, l, excludes = [],
 132             value, values, rec, data = [];
 133         for (i = 0, l = series.length; i &lt; l; i++) {
 134             excludes[i] = series[i].__excludes;
 135         }
 136         store.each(function(record) {
 137             for (i = 0; i &lt; ln; i++) {
 138                 if (excludes[i]) {
 139                     continue;
 140                 }
 141                 value = record.get(fields[i]);
 142                 if (+value &lt; +min) return;
 143                 if (+value &gt; +max) return;
 144             }
 145             data.push(record);
 146         })
 147         me.chart.substore = Ext.create('Ext.data.JsonStore', { model: store.model, data: data });
 148     },
 149
 150     // Before rendering, set current default step count to be number of records.
 151     processView: function () {
 152         var me = this;
 153         if (me.fromDate) {
 154             me.minimum = +me.fromDate;
 155         }
 156         if (me.toDate) {
 157             me.maximum = +me.toDate;
 158         }
 159         if (me.constrain) {
 160             me.doConstrain();
 161         }
 162      },
 163
 164     // @private modifies the store and creates the labels for the axes.
 165     calcEnds: function() {
 166         var me = this, range, step = me.step;
 167         if (step) {
 168             range = me.getRange();
 169             range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
 170             if (me.minimum) {
 171                 range.from = me.minimum;
 172             }
 173             if (me.maximum) {
 174                 range.to = me.maximum;
 175             }
 176             range.step = (range.to - range.from) / range.steps;
 177             return range;
 178         } else {
 179             return me.callParent(arguments);
 180         }
 181     }
 182  });
 183
 184 </pre>
 185 </body>
 186 </html>