Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Time format now a proper subset of strftime's.

  • Loading branch information...
commit a54ec4ad64311f13e4d75cd67f4d77c4906456d1 1 parent fd80908
Mark Côté authored June 15, 2012
48  examples/time.html
@@ -23,7 +23,9 @@
23 23
     <p>Zoom to: <button id="whole">Whole period</button>
24 24
       <button id="nineties">1990-2000</button>
25 25
       <button id="latenineties">1996-2000</button>
26  
-      <button id="ninetynine">1999</button></p>
  26
+      <button id="ninetynine">1999</button>
  27
+      <button id="lastweekninetynine">end of 1999</button>
  28
+      <button id="lastdayninetynine">very end of 1999</button></p>
27 29
 
28 30
     <p>The timestamps must be specified as Javascript timestamps, as
29 31
       milliseconds since January 1, 1970 00:00. This is like Unix
@@ -31,10 +33,10 @@
31 33
       multiply with 1000!).</p>
32 34
 
33 35
     <p>As an extra caveat, the timestamps are interpreted according to
34  
-      UTC to avoid having the graph shift with each visitor's local
35  
-      time zone. So you might have to add your local time zone offset
36  
-      to the timestamps or simply pretend that the data was produced
37  
-      in UTC instead of your local time zone.</p>
  36
+      UTC and, by default, displayed as such. You can set the axis
  37
+      "timezone" option to "browser" to display the timestamps in the
  38
+      user's timezone, or, if you use timezoneJS, you can specify a
  39
+      time zone.</p>
38 40
 
39 41
 <script id="source">
40 42
 $(function () {
@@ -50,8 +52,8 @@
50 52
         $.plot($("#placeholder"), [d], {
51 53
             xaxis: {
52 54
                 mode: "time",
53  
-                min: (new Date(1990, 1, 1)).getTime(),
54  
-                max: (new Date(2000, 1, 1)).getTime()
  55
+                min: (new Date(1990, 0, 1)).getTime(),
  56
+                max: (new Date(2000, 0, 1)).getTime()
55 57
             }
56 58
         });
57 59
     });
@@ -61,8 +63,8 @@
61 63
             xaxis: {
62 64
                 mode: "time",
63 65
                 minTickSize: [1, "year"],
64  
-                min: (new Date(1996, 1, 1)).getTime(),
65  
-                max: (new Date(2000, 1, 1)).getTime()
  66
+                min: (new Date(1996, 0, 1)).getTime(),
  67
+                max: (new Date(2000, 0, 1)).getTime()
66 68
             }
67 69
         });
68 70
     });
@@ -72,8 +74,32 @@
72 74
             xaxis: {
73 75
                 mode: "time",
74 76
                 minTickSize: [1, "month"],
75  
-                min: (new Date(1999, 1, 1)).getTime(),
76  
-                max: (new Date(2000, 1, 1)).getTime()
  77
+                min: (new Date(1999, 0, 1)).getTime(),
  78
+                max: (new Date(2000, 0, 1)).getTime()
  79
+            }
  80
+        });
  81
+    });
  82
+
  83
+    $("#lastweekninetynine").click(function () {
  84
+        $.plot($("#placeholder"), [d], {
  85
+            xaxis: {
  86
+                mode: "time",
  87
+                minTickSize: [1, "day"],
  88
+                min: (new Date(1999, 11, 25)).getTime(),
  89
+                max: (new Date(2000, 0, 1)).getTime(),
  90
+                timeformat: "%a"
  91
+            }
  92
+        });
  93
+    });
  94
+
  95
+    $("#lastdayninetynine").click(function () {
  96
+        $.plot($("#placeholder"), [d], {
  97
+            xaxis: {
  98
+                mode: "time",
  99
+                minTickSize: [1, "hour"],
  100
+                min: (new Date(1999, 11, 31)).getTime(),
  101
+                max: (new Date(2000, 0, 1)).getTime(),
  102
+                twelveHourClock: true
77 103
             }
78 104
         });
79 105
     });
66  jquery.flot.time.js
@@ -12,51 +12,56 @@ for details.
12 12
         return base * Math.floor(n / base);
13 13
     }
14 14
 
15  
-    // returns a string with the date d formatted according to fmt
16  
-    function formatDate(d, fmt, monthNames) {
17  
-        var leftPad = function(n) {
  15
+    // Returns a string with the date d formatted according to fmt.
  16
+    // A subset of the Open Group's strftime format is supported.
  17
+    function formatDate(d, fmt, monthNames, dayNames) {
  18
+        var leftPad = function(n, pad) {
18 19
             n = "" + n;
19  
-            return n.length == 1 ? "0" + n : n;
  20
+            pad = "" + (pad == null ? "0" : pad);
  21
+            return n.length == 1 ? pad + n : n;
20 22
         };
21 23
         
22 24
         var r = [];
23  
-        var escape = false, padNext = false;
  25
+        var escape = false;
24 26
         var hours = d.getHours();
25 27
         var isAM = hours < 12;
26 28
         if (monthNames == null)
27 29
             monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  30
+        if (dayNames == null)
  31
+            dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
28 32
 
29  
-        if (fmt.search(/%p|%P/) != -1) {
30  
-            if (hours > 12) {
31  
-                hours = hours - 12;
32  
-            } else if (hours == 0) {
33  
-                hours = 12;
34  
-            }
  33
+        var hours12;
  34
+        if (hours > 12) {
  35
+            hours12 = hours - 12;
  36
+        } else if (hours == 0) {
  37
+            hours12 = 12;
  38
+        } else {
  39
+            hours12 = hours;
35 40
         }
  41
+
36 42
         for (var i = 0; i < fmt.length; ++i) {
37 43
             var c = fmt.charAt(i);
38 44
             
39 45
             if (escape) {
40 46
                 switch (c) {
41  
-                case 'h': c = "" + hours; break;
  47
+                case 'a': c = "" + dayNames[d.getDay()]; break;
  48
+                case 'b': c = "" + monthNames[d.getMonth()]; break;
  49
+                case 'd': c = leftPad(d.getDate()); break;
  50
+                case 'e': c = leftPad(d.getDate(), " "); break;
42 51
                 case 'H': c = leftPad(hours); break;
  52
+                case 'I': c = leftPad(hours12); break;
  53
+                case 'm': c = leftPad(d.getMonth() + 1); break;
43 54
                 case 'M': c = leftPad(d.getMinutes()); break;
44 55
                 case 'S': c = leftPad(d.getSeconds()); break;
45  
-                case 'd': c = "" + d.getDate(); break;
46  
-                case 'm': c = "" + (d.getMonth() + 1); break;
47  
-                case 'y': c = "" + d.getFullYear(); break;
48  
-                case 'b': c = "" + monthNames[d.getMonth()]; break;
  56
+                case 'y': c = leftPad(d.getFullYear() % 100); break;
  57
+                case 'Y': c = "" + d.getFullYear(); break;
49 58
                 case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
50 59
                 case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
51  
-                case '0': c = ""; padNext = true; break;
52  
-                }
53  
-                if (c && padNext) {
54  
-                    c = leftPad(c);
55  
-                    padNext = false;
  60
+                case 'u': c = "" + (d.getDay() + 1); break;
  61
+                case 'w': c = "" + d.getDay(); break;
56 62
                 }
57 63
                 r.push(c);
58  
-                if (!padNext)
59  
-                    escape = false;
  64
+                escape = false;
60 65
             }
61 66
             else {
62 67
                 if (c == "%")
@@ -254,19 +259,20 @@ for details.
254 259
 
255 260
                         // first check global format
256 261
                         if (opts.timeformat != null)
257  
-                            return formatDate(d, opts.timeformat, opts.monthNames);
  262
+                            return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames);
258 263
                         
259 264
                         var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
260 265
                         var span = axis.max - axis.min;
261 266
                         var suffix = (opts.twelveHourClock) ? " %p" : "";
  267
+                        var hourCode = (opts.twelveHourClock) ? "%I" : "%H";
262 268
                         
263 269
                         if (t < timeUnitSize.minute)
264  
-                            fmt = "%h:%M:%S" + suffix;
  270
+                            fmt = hourCode + ":%M:%S" + suffix;
265 271
                         else if (t < timeUnitSize.day) {
266 272
                             if (span < 2 * timeUnitSize.day)
267  
-                                fmt = "%h:%M" + suffix;
  273
+                                fmt = hourCode + ":%M" + suffix;
268 274
                             else
269  
-                                fmt = "%b %d %h:%M" + suffix;
  275
+                                fmt = "%b %d " + hourCode + ":%M" + suffix;
270 276
                         }
271 277
                         else if (t < timeUnitSize.month)
272 278
                             fmt = "%b %d";
@@ -274,12 +280,12 @@ for details.
274 280
                             if (span < timeUnitSize.year)
275 281
                                 fmt = "%b";
276 282
                             else
277  
-                                fmt = "%b %y";
  283
+                                fmt = "%b %Y";
278 284
                         }
279 285
                         else
280  
-                            fmt = "%y";
  286
+                            fmt = "%Y";
281 287
                         
282  
-                        var rt = formatDate(d, fmt, opts.monthNames);
  288
+                        var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
283 289
                         return rt;
284 290
                     };
285 291
                 }

0 notes on commit a54ec4a

Please sign in to comment.
Something went wrong with that request. Please try again.