jquery.flot.time.js 11 KB

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