jquery.flot.time.js 11 KB

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