1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.axis.Time-method-constructor'><span id='Ext-chart.axis.Time'>/**
2 </span></span> * @class Ext.chart.axis.Time
3 * @extends Ext.chart.axis.Axis
5 * A type of axis whose units are measured in time values. Use this axis
6 * for listing dates that you will want to group or dynamically change.
7 * If you just want to display dates as categories then use the
8 * Category class for axis instead.
18 * groupBy: 'year,month,day',
22 * fromDate: new Date('1/1/11'),
23 * toDate: new Date('1/7/11')
26 * In this example we're creating a time axis that has as title *Day*.
27 * The field the axis is bound to is `date`.
28 * The date format to use to display the text for the axis labels is `M d`
29 * which is a three letter month abbreviation followed by the day number.
30 * The time axis will show values for dates between `fromDate` and `toDate`.
31 * Since `constrain` is set to true all other values for other dates not between
32 * the fromDate and toDate will not be displayed.
36 Ext.define('Ext.chart.axis.Time', {
38 /* Begin Definitions */
40 extend: 'Ext.chart.axis.Category',
42 alternateClassName: 'Ext.chart.TimeAxis',
46 requires: ['Ext.data.Store', 'Ext.data.JsonStore'],
50 <span id='Ext-chart.axis.Time-property-calculateByLabelSize'> /**
51 </span> * The minimum value drawn by the axis. If not set explicitly, the axis
52 * minimum will be calculated automatically.
53 * @property calculateByLabelSize
56 calculateByLabelSize: true,
58 <span id='Ext-chart.axis.Time-property-dateFormat'> /**
59 </span> * Indicates the format the date will be rendered on.
60 * For example: 'M d' will render the dates as 'Jan 30', etc.
62 * @property dateFormat
63 * @type {String|Boolean}
67 <span id='Ext-chart.axis.Time-property-timeUnit'> /**
68 </span> * Indicates the time unit to use for each step. Can be 'day', 'month', 'year' or a comma-separated combination of all of them.
69 * Default's 'year,month,day'.
74 groupBy: 'year,month,day',
76 <span id='Ext-chart.axis.Time-property-aggregateOp'> /**
77 </span> * Aggregation operation when grouping. Possible options are 'sum', 'avg', 'max', 'min'. Default's 'sum'.
79 * @property aggregateOp
84 <span id='Ext-chart.axis.Time-property-fromDate'> /**
85 </span> * The starting date for the time axis.
91 <span id='Ext-chart.axis.Time-property-toDate'> /**
92 </span> * The ending date for the time axis.
98 <span id='Ext-chart.axis.Time-property-step'> /**
99 </span> * An array with two components: The first is the unit of the step (day, month, year, etc). The second one is the number of units for the step (1, 2, etc.).
100 * Default's [Ext.Date.DAY, 1].
105 step: [Ext.Date.DAY, 1],
107 <span id='Ext-chart.axis.Time-property-constrain'> /**
108 </span> * If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
109 * If false, the time axis will adapt to the new values by adding/removing steps.
110 * Default's [Ext.Date.DAY, 1].
112 * @property constrain
117 // @private a wrapper for date methods.
119 'year': function(date) {
120 return date.getFullYear();
122 'month': function(date) {
123 return date.getMonth() + 1;
125 'day': function(date) {
126 return date.getDate();
128 'hour': function(date) {
129 return date.getHours();
131 'minute': function(date) {
132 return date.getMinutes();
134 'second': function(date) {
135 return date.getSeconds();
137 'millisecond': function(date) {
138 return date.getMilliseconds();
142 // @private holds aggregate functions.
143 aggregateFn: (function() {
144 var etype = (function() {
145 var rgxp = /^\[object\s(.*)\]$/,
146 toString = Object.prototype.toString;
148 return toString.call(e).match(rgxp)[1];
152 'sum': function(list) {
153 var i = 0, l = list.length, acum = 0;
154 if (!list.length || etype(list[0]) != 'Number') {
157 for (; i < l; i++) {
162 'max': function(list) {
163 if (!list.length || etype(list[0]) != 'Number') {
166 return Math.max.apply(Math, list);
168 'min': function(list) {
169 if (!list.length || etype(list[0]) != 'Number') {
172 return Math.min.apply(Math, list);
174 'avg': function(list) {
175 var i = 0, l = list.length, acum = 0;
176 if (!list.length || etype(list[0]) != 'Number') {
179 for (; i < l; i++) {
187 // @private normalized the store to fill date gaps in the time interval.
188 constrainDates: function() {
189 var fromDate = Ext.Date.clone(this.fromDate),
190 toDate = Ext.Date.clone(this.toDate),
193 store = this.chart.store,
194 record, recObj, fieldNames = [],
195 newStore = Ext.create('Ext.data.Store', {
199 var getRecordByDate = (function() {
200 var index = 0, l = store.getCount();
201 return function(date) {
203 for (; index < l; index++) {
204 rec = store.getAt(index);
205 recDate = rec.get(field);
206 if (+recDate > +date) {
208 } else if (+recDate == +date) {
216 if (!this.constrain) {
217 this.chart.filteredStore = this.chart.store;
221 while(+fromDate <= +toDate) {
222 record = getRecordByDate(fromDate);
225 newStore.add(record.data);
227 newStore.model.prototype.fields.each(function(f) {
228 recObj[f.name] = false;
230 recObj.date = fromDate;
231 newStore.add(recObj);
233 fromDate = Ext.Date.add(fromDate, step[0], step[1]);
236 this.chart.filteredStore = newStore;
239 // @private aggregates values if multiple store elements belong to the same time step.
240 aggregate: function() {
242 aggKeys = [], key, value,
243 op = this.aggregateOp,
244 field = this.fields, i,
245 fields = this.groupBy.split(','),
253 dateMethods = this.dateMethods,
254 aggregateFn = this.aggregateFn,
255 store = this.chart.filteredStore || this.chart.store;
257 store.each(function(rec) {
258 //get all record field names in a simple array
259 if (!recFields.length) {
260 rec.fields.each(function(f) {
261 recFields.push(f.name);
263 recFieldsLen = recFields.length;
265 //get record date value
266 value = rec.get(field);
267 //generate key for grouping records
268 for (i = 0; i < l; i++) {
270 key = String(dateMethods[fields[i]](value));
272 key += '||' + dateMethods[fields[i]](value);
275 //get aggregation record from hash
276 if (key in aggStore) {
279 obj = aggStore[key] = {};
283 //append record values to an aggregation record
284 for (i = 0; i < recFieldsLen; i++) {
285 curField = recFields[i];
286 if (!obj[curField]) {
289 if (rec.get(curField) !== undefined) {
290 obj[curField].push(rec.get(curField));
294 //perform aggregation operations on fields
295 for (key in aggStore) {
297 for (i = 0; i < recFieldsLen; i++) {
298 curField = recFields[i];
299 obj[curField] = aggregateFn[op](obj[curField]);
303 this.chart.substore = Ext.create('Ext.data.JsonStore', {
311 // @private creates a label array to be used as the axis labels.
312 setLabels: function() {
313 var store = this.chart.substore,
314 fields = this.fields,
315 format = this.dateFormat,
316 labels, i, dates = this.dates,
317 formatFn = Ext.Date.format;
318 this.labels = labels = [];
319 store.each(function(record, i) {
321 labels.push(record.get(fields));
323 labels.push(formatFn(dates[i], format));
328 processView: function() {
329 //TODO(nico): fix this eventually...
330 if (this.constrain) {
331 this.constrainDates();
333 this.chart.substore = this.chart.filteredStore;
339 // @private modifies the store and creates the labels for the axes.
340 applyData: function() {
342 var count = this.chart.substore.getCount();
352 </pre></pre></body></html>