OLD | NEW |
(Empty) | |
| 1 /* Pretty handling of time axes. |
| 2 |
| 3 Copyright (c) 2007-2014 IOLA and Ole Laursen. |
| 4 Licensed under the MIT license. |
| 5 |
| 6 Set axis.mode to "time" to enable. See the section "Time series data" in |
| 7 API.txt for details. |
| 8 |
| 9 */ |
| 10 |
| 11 (function($) { |
| 12 |
| 13 var options = { |
| 14 xaxis: { |
| 15 timezone: null, // "browser" for local to the cl
ient or timezone for timezone-js |
| 16 timeformat: null, // format string to use |
| 17 twelveHourClock: false, // 12 or 24 time in time mode |
| 18 monthNames: null // list of names of months |
| 19 } |
| 20 }; |
| 21 |
| 22 // round to nearby lower multiple of base |
| 23 |
| 24 function floorInBase(n, base) { |
| 25 return base * Math.floor(n / base); |
| 26 } |
| 27 |
| 28 // Returns a string with the date d formatted according to fmt. |
| 29 // A subset of the Open Group's strftime format is supported. |
| 30 |
| 31 function formatDate(d, fmt, monthNames, dayNames) { |
| 32 |
| 33 if (typeof d.strftime == "function") { |
| 34 return d.strftime(fmt); |
| 35 } |
| 36 |
| 37 var leftPad = function(n, pad) { |
| 38 n = "" + n; |
| 39 pad = "" + (pad == null ? "0" : pad); |
| 40 return n.length == 1 ? pad + n : n; |
| 41 }; |
| 42 |
| 43 var r = []; |
| 44 var escape = false; |
| 45 var hours = d.getHours(); |
| 46 var isAM = hours < 12; |
| 47 |
| 48 if (monthNames == null) { |
| 49 monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; |
| 50 } |
| 51 |
| 52 if (dayNames == null) { |
| 53 dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "S
at"]; |
| 54 } |
| 55 |
| 56 var hours12; |
| 57 |
| 58 if (hours > 12) { |
| 59 hours12 = hours - 12; |
| 60 } else if (hours == 0) { |
| 61 hours12 = 12; |
| 62 } else { |
| 63 hours12 = hours; |
| 64 } |
| 65 |
| 66 for (var i = 0; i < fmt.length; ++i) { |
| 67 |
| 68 var c = fmt.charAt(i); |
| 69 |
| 70 if (escape) { |
| 71 switch (c) { |
| 72 case 'a': c = "" + dayNames[d.getDay()];
break; |
| 73 case 'b': c = "" + monthNames[d.getMonth
()]; break; |
| 74 case 'd': c = leftPad(d.getDate()); brea
k; |
| 75 case 'e': c = leftPad(d.getDate(), " ");
break; |
| 76 case 'h': // For back-compat with
0.7; remove in 1.0 |
| 77 case 'H': c = leftPad(hours); break; |
| 78 case 'I': c = leftPad(hours12); break; |
| 79 case 'l': c = leftPad(hours12, " "); bre
ak; |
| 80 case 'm': c = leftPad(d.getMonth() + 1);
break; |
| 81 case 'M': c = leftPad(d.getMinutes()); b
reak; |
| 82 // quarters not in Open Group's strftime
specification |
| 83 case 'q': |
| 84 c = "" + (Math.floor(d.getMonth(
) / 3) + 1); break; |
| 85 case 'S': c = leftPad(d.getSeconds()); b
reak; |
| 86 case 'y': c = leftPad(d.getFullYear() %
100); break; |
| 87 case 'Y': c = "" + d.getFullYear(); brea
k; |
| 88 case 'p': c = (isAM) ? ("" + "am") : (""
+ "pm"); break; |
| 89 case 'P': c = (isAM) ? ("" + "AM") : (""
+ "PM"); break; |
| 90 case 'w': c = "" + d.getDay(); break; |
| 91 } |
| 92 r.push(c); |
| 93 escape = false; |
| 94 } else { |
| 95 if (c == "%") { |
| 96 escape = true; |
| 97 } else { |
| 98 r.push(c); |
| 99 } |
| 100 } |
| 101 } |
| 102 |
| 103 return r.join(""); |
| 104 } |
| 105 |
| 106 // To have a consistent view of time-based data independent of which tim
e |
| 107 // zone the client happens to be in we need a date-like object independe
nt |
| 108 // of time zones. This is done through a wrapper that only calls the UT
C |
| 109 // versions of the accessor methods. |
| 110 |
| 111 function makeUtcWrapper(d) { |
| 112 |
| 113 function addProxyMethod(sourceObj, sourceMethod, targetObj, targ
etMethod) { |
| 114 sourceObj[sourceMethod] = function() { |
| 115 return targetObj[targetMethod].apply(targetObj,
arguments); |
| 116 }; |
| 117 }; |
| 118 |
| 119 var utc = { |
| 120 date: d |
| 121 }; |
| 122 |
| 123 // support strftime, if found |
| 124 |
| 125 if (d.strftime != undefined) { |
| 126 addProxyMethod(utc, "strftime", d, "strftime"); |
| 127 } |
| 128 |
| 129 addProxyMethod(utc, "getTime", d, "getTime"); |
| 130 addProxyMethod(utc, "setTime", d, "setTime"); |
| 131 |
| 132 var props = ["Date", "Day", "FullYear", "Hours", "Milliseconds",
"Minutes", "Month", "Seconds"]; |
| 133 |
| 134 for (var p = 0; p < props.length; p++) { |
| 135 addProxyMethod(utc, "get" + props[p], d, "getUTC" + prop
s[p]); |
| 136 addProxyMethod(utc, "set" + props[p], d, "setUTC" + prop
s[p]); |
| 137 } |
| 138 |
| 139 return utc; |
| 140 }; |
| 141 |
| 142 // select time zone strategy. This returns a date-like object tied to t
he |
| 143 // desired timezone |
| 144 |
| 145 function dateGenerator(ts, opts) { |
| 146 if (opts.timezone == "browser") { |
| 147 return new Date(ts); |
| 148 } else if (!opts.timezone || opts.timezone == "utc") { |
| 149 return makeUtcWrapper(new Date(ts)); |
| 150 } else if (typeof timezoneJS != "undefined" && typeof timezoneJS
.Date != "undefined") { |
| 151 var d = new timezoneJS.Date(); |
| 152 // timezone-js is fickle, so be sure to set the time zon
e before |
| 153 // setting the time. |
| 154 d.setTimezone(opts.timezone); |
| 155 d.setTime(ts); |
| 156 return d; |
| 157 } else { |
| 158 return makeUtcWrapper(new Date(ts)); |
| 159 } |
| 160 } |
| 161 |
| 162 // map of app. size of time units in milliseconds |
| 163 |
| 164 var timeUnitSize = { |
| 165 "second": 1000, |
| 166 "minute": 60 * 1000, |
| 167 "hour": 60 * 60 * 1000, |
| 168 "day": 24 * 60 * 60 * 1000, |
| 169 "month": 30 * 24 * 60 * 60 * 1000, |
| 170 "quarter": 3 * 30 * 24 * 60 * 60 * 1000, |
| 171 "year": 365.2425 * 24 * 60 * 60 * 1000 |
| 172 }; |
| 173 |
| 174 // the allowed tick sizes, after 1 year we use |
| 175 // an integer algorithm |
| 176 |
| 177 var baseSpec = [ |
| 178 [1, "second"], [2, "second"], [5, "second"], [10, "second"], |
| 179 [30, "second"], |
| 180 [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], |
| 181 [30, "minute"], |
| 182 [1, "hour"], [2, "hour"], [4, "hour"], |
| 183 [8, "hour"], [12, "hour"], |
| 184 [1, "day"], [2, "day"], [3, "day"], |
| 185 [0.25, "month"], [0.5, "month"], [1, "month"], |
| 186 [2, "month"] |
| 187 ]; |
| 188 |
| 189 // we don't know which variant(s) we'll need yet, but generating both is |
| 190 // cheap |
| 191 |
| 192 var specMonths = baseSpec.concat([[3, "month"], [6, "month"], |
| 193 [1, "year"]]); |
| 194 var specQuarters = baseSpec.concat([[1, "quarter"], [2, "quarter"], |
| 195 [1, "year"]]); |
| 196 |
| 197 function init(plot) { |
| 198 plot.hooks.processOptions.push(function (plot, options) { |
| 199 $.each(plot.getAxes(), function(axisName, axis) { |
| 200 |
| 201 var opts = axis.options; |
| 202 |
| 203 if (opts.mode == "time") { |
| 204 axis.tickGenerator = function(axis) { |
| 205 |
| 206 var ticks = []; |
| 207 var d = dateGenerator(axis.min,
opts); |
| 208 var minSize = 0; |
| 209 |
| 210 // make quarter use a possibilit
y if quarters are |
| 211 // mentioned in either of these
options |
| 212 |
| 213 var spec = (opts.tickSize && opt
s.tickSize[1] === |
| 214 "quarter") || |
| 215 (opts.minTickSize && opt
s.minTickSize[1] === |
| 216 "quarter") ? specQuarter
s : specMonths; |
| 217 |
| 218 if (opts.minTickSize != null) { |
| 219 if (typeof opts.tickSize
== "number") { |
| 220 minSize = opts.t
ickSize; |
| 221 } else { |
| 222 minSize = opts.m
inTickSize[0] * timeUnitSize[opts.minTickSize[1]]; |
| 223 } |
| 224 } |
| 225 |
| 226 for (var i = 0; i < spec.length
- 1; ++i) { |
| 227 if (axis.delta < (spec[i
][0] * timeUnitSize[spec[i][1]] |
| 228
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 |
| 229 && spec[i][0] *
timeUnitSize[spec[i][1]] >= minSize) { |
| 230 break; |
| 231 } |
| 232 } |
| 233 |
| 234 var size = spec[i][0]; |
| 235 var unit = spec[i][1]; |
| 236 |
| 237 // special-case the possibility
of several years |
| 238 |
| 239 if (unit == "year") { |
| 240 |
| 241 // if given a minTickSiz
e in years, just use it, |
| 242 // ensuring that it's an
integer |
| 243 |
| 244 if (opts.minTickSize !=
null && opts.minTickSize[1] == "year") { |
| 245 size = Math.floo
r(opts.minTickSize[0]); |
| 246 } else { |
| 247 |
| 248 var magn = Math.
pow(10, Math.floor(Math.log(axis.delta / timeUnitSize.year) / Math.LN10)); |
| 249 var norm = (axis
.delta / timeUnitSize.year) / magn; |
| 250 |
| 251 if (norm < 1.5)
{ |
| 252 size = 1
; |
| 253 } else if (norm
< 3) { |
| 254 size = 2
; |
| 255 } else if (norm
< 7.5) { |
| 256 size = 5
; |
| 257 } else { |
| 258 size = 1
0; |
| 259 } |
| 260 |
| 261 size *= magn; |
| 262 } |
| 263 |
| 264 // minimum size for year
s is 1 |
| 265 |
| 266 if (size < 1) { |
| 267 size = 1; |
| 268 } |
| 269 } |
| 270 |
| 271 axis.tickSize = opts.tickSize ||
[size, unit]; |
| 272 var tickSize = axis.tickSize[0]; |
| 273 unit = axis.tickSize[1]; |
| 274 |
| 275 var step = tickSize * timeUnitSi
ze[unit]; |
| 276 |
| 277 if (unit == "second") { |
| 278 d.setSeconds(floorInBase
(d.getSeconds(), tickSize)); |
| 279 } else if (unit == "minute") { |
| 280 d.setMinutes(floorInBase
(d.getMinutes(), tickSize)); |
| 281 } else if (unit == "hour") { |
| 282 d.setHours(floorInBase(d
.getHours(), tickSize)); |
| 283 } else if (unit == "month") { |
| 284 d.setMonth(floorInBase(d
.getMonth(), tickSize)); |
| 285 } else if (unit == "quarter") { |
| 286 d.setMonth(3 * floorInBa
se(d.getMonth() / 3, |
| 287 tickSize)); |
| 288 } else if (unit == "year") { |
| 289 d.setFullYear(floorInBas
e(d.getFullYear(), tickSize)); |
| 290 } |
| 291 |
| 292 // reset smaller components |
| 293 |
| 294 d.setMilliseconds(0); |
| 295 |
| 296 if (step >= timeUnitSize.minute)
{ |
| 297 d.setSeconds(0); |
| 298 } |
| 299 if (step >= timeUnitSize.hour) { |
| 300 d.setMinutes(0); |
| 301 } |
| 302 if (step >= timeUnitSize.day) { |
| 303 d.setHours(0); |
| 304 } |
| 305 if (step >= timeUnitSize.day * 4
) { |
| 306 d.setDate(1); |
| 307 } |
| 308 if (step >= timeUnitSize.month *
2) { |
| 309 d.setMonth(floorInBase(d
.getMonth(), 3)); |
| 310 } |
| 311 if (step >= timeUnitSize.quarter
* 2) { |
| 312 d.setMonth(floorInBase(d
.getMonth(), 6)); |
| 313 } |
| 314 if (step >= timeUnitSize.year) { |
| 315 d.setMonth(0); |
| 316 } |
| 317 |
| 318 var carry = 0; |
| 319 var v = Number.NaN; |
| 320 var prev; |
| 321 |
| 322 do { |
| 323 |
| 324 prev = v; |
| 325 v = d.getTime(); |
| 326 ticks.push(v); |
| 327 |
| 328 if (unit == "month" || u
nit == "quarter") { |
| 329 if (tickSize < 1
) { |
| 330 |
| 331 // a bit
complicated - we'll divide the |
| 332 // month
/quarter up but we need to take |
| 333 // care
of fractions so we don't end up in |
| 334 // the m
iddle of a day |
| 335 |
| 336 d.setDat
e(1); |
| 337 var star
t = d.getTime(); |
| 338 d.setMon
th(d.getMonth() + |
| 339
(unit == "quarter" ? 3 : 1)); |
| 340 var end
= d.getTime(); |
| 341 d.setTim
e(v + carry * timeUnitSize.hour + (end - start) * tickSize); |
| 342 carry =
d.getHours(); |
| 343 d.setHou
rs(0); |
| 344 } else { |
| 345 d.setMon
th(d.getMonth() + |
| 346
tickSize * (unit == "quarter" ? 3 : 1)); |
| 347 } |
| 348 } else if (unit == "year
") { |
| 349 d.setFullYear(d.
getFullYear() + tickSize); |
| 350 } else { |
| 351 d.setTime(v + st
ep); |
| 352 } |
| 353 } while (v < axis.max && v != pr
ev); |
| 354 |
| 355 return ticks; |
| 356 }; |
| 357 |
| 358 axis.tickFormatter = function (v, axis)
{ |
| 359 |
| 360 var d = dateGenerator(v, axis.op
tions); |
| 361 |
| 362 // first check global format |
| 363 |
| 364 if (opts.timeformat != null) { |
| 365 return formatDate(d, opt
s.timeformat, opts.monthNames, opts.dayNames); |
| 366 } |
| 367 |
| 368 // possibly use quarters if quar
ters are mentioned in |
| 369 // any of these places |
| 370 |
| 371 var useQuarters = (axis.options.
tickSize && |
| 372 axis.options.tic
kSize[1] == "quarter") || |
| 373 (axis.options.minTickSiz
e && |
| 374 axis.options.min
TickSize[1] == "quarter"); |
| 375 |
| 376 var t = axis.tickSize[0] * timeU
nitSize[axis.tickSize[1]]; |
| 377 var span = axis.max - axis.min; |
| 378 var suffix = (opts.twelveHourClo
ck) ? " %p" : ""; |
| 379 var hourCode = (opts.twelveHourC
lock) ? "%I" : "%H"; |
| 380 var fmt; |
| 381 |
| 382 if (t < timeUnitSize.minute) { |
| 383 fmt = hourCode + ":%M:%S
" + suffix; |
| 384 } else if (t < timeUnitSize.day)
{ |
| 385 if (span < 2 * timeUnitS
ize.day) { |
| 386 fmt = hourCode +
":%M" + suffix; |
| 387 } else { |
| 388 fmt = "%b %d " +
hourCode + ":%M" + suffix; |
| 389 } |
| 390 } else if (t < timeUnitSize.mont
h) { |
| 391 fmt = "%b %d"; |
| 392 } else if ((useQuarters && t < t
imeUnitSize.quarter) || |
| 393 (!useQuarters && t < tim
eUnitSize.year)) { |
| 394 if (span < timeUnitSize.
year) { |
| 395 fmt = "%b"; |
| 396 } else { |
| 397 fmt = "%b %Y"; |
| 398 } |
| 399 } else if (useQuarters && t < ti
meUnitSize.year) { |
| 400 if (span < timeUnitSize.
year) { |
| 401 fmt = "Q%q"; |
| 402 } else { |
| 403 fmt = "Q%q %Y"; |
| 404 } |
| 405 } else { |
| 406 fmt = "%Y"; |
| 407 } |
| 408 |
| 409 var rt = formatDate(d, fmt, opts
.monthNames, opts.dayNames); |
| 410 |
| 411 return rt; |
| 412 }; |
| 413 } |
| 414 }); |
| 415 }); |
| 416 } |
| 417 |
| 418 $.plot.plugins.push({ |
| 419 init: init, |
| 420 options: options, |
| 421 name: 'time', |
| 422 version: '1.0' |
| 423 }); |
| 424 |
| 425 // Time-axis support used to be in Flot core, which exposed the |
| 426 // formatDate function on the plot object. Various plugins depend |
| 427 // on the function, so we need to re-expose it here. |
| 428 |
| 429 $.plot.formatDate = formatDate; |
| 430 $.plot.dateGenerator = dateGenerator; |
| 431 |
| 432 })(jQuery); |
OLD | NEW |