Skip to content

F
flot
Commit a54ec4ad authored by Mark Cote's avatar Mark Cote
Browse files
Options

Time format now a proper subset of strftime's.

parent fd809089
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 41 deletions
examples/time.html
View file @ a54ec4ad
...@@ -23,7 +23,9 @@ ...@@ -23,7 +23,9 @@
<p>Zoom to: <button id="whole">Whole period</button> <p>Zoom to: <button id="whole">Whole period</button>
<button id="nineties">1990-2000</button> <button id="nineties">1990-2000</button>
<button id="latenineties">1996-2000</button> <button id="latenineties">1996-2000</button>
<button id="ninetynine">1999</button></p> <button id="ninetynine">1999</button>
<button id="lastweekninetynine">end of 1999</button>
<button id="lastdayninetynine">very end of 1999</button></p>
<p>The timestamps must be specified as Javascript timestamps, as <p>The timestamps must be specified as Javascript timestamps, as
milliseconds since January 1, 1970 00:00. This is like Unix milliseconds since January 1, 1970 00:00. This is like Unix
...@@ -31,10 +33,10 @@ ...@@ -31,10 +33,10 @@
multiply with 1000!).</p> multiply with 1000!).</p>
<p>As an extra caveat, the timestamps are interpreted according to <p>As an extra caveat, the timestamps are interpreted according to
UTC to avoid having the graph shift with each visitor's local UTC and, by default, displayed as such. You can set the axis
time zone. So you might have to add your local time zone offset "timezone" option to "browser" to display the timestamps in the
to the timestamps or simply pretend that the data was produced user's timezone, or, if you use timezoneJS, you can specify a
in UTC instead of your local time zone.</p> time zone.</p>
<script id="source"> <script id="source">
$(function () { $(function () {
...@@ -50,8 +52,8 @@ $(function () { ...@@ -50,8 +52,8 @@ $(function () {
$.plot($("#placeholder"), [d], { $.plot($("#placeholder"), [d], {
xaxis: { xaxis: {
mode: "time", mode: "time",
min: (new Date(1990, 1, 1)).getTime(), min: (new Date(1990, 0, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime() max: (new Date(2000, 0, 1)).getTime()
} }
}); });
}); });
...@@ -61,8 +63,8 @@ $(function () { ...@@ -61,8 +63,8 @@ $(function () {
xaxis: { xaxis: {
mode: "time", mode: "time",
minTickSize: [1, "year"], minTickSize: [1, "year"],
min: (new Date(1996, 1, 1)).getTime(), min: (new Date(1996, 0, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime() max: (new Date(2000, 0, 1)).getTime()
} }
}); });
}); });
...@@ -72,8 +74,32 @@ $(function () { ...@@ -72,8 +74,32 @@ $(function () {
xaxis: { xaxis: {
mode: "time", mode: "time",
minTickSize: [1, "month"], minTickSize: [1, "month"],
min: (new Date(1999, 1, 1)).getTime(), min: (new Date(1999, 0, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime() max: (new Date(2000, 0, 1)).getTime()
}
});
});
$("#lastweekninetynine").click(function () {
$.plot($("#placeholder"), [d], {
xaxis: {
mode: "time",
minTickSize: [1, "day"],
min: (new Date(1999, 11, 25)).getTime(),
max: (new Date(2000, 0, 1)).getTime(),
timeformat: "%a"
}
});
});
$("#lastdayninetynine").click(function () {
$.plot($("#placeholder"), [d], {
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
min: (new Date(1999, 11, 31)).getTime(),
max: (new Date(2000, 0, 1)).getTime(),
twelveHourClock: true
} }
}); });
}); });
......
jquery.flot.time.js
View file @ a54ec4ad
...@@ -12,50 +12,55 @@ for details. ...@@ -12,50 +12,55 @@ for details.
return base * Math.floor(n / base); return base * Math.floor(n / base);
} }
// returns a string with the date d formatted according to fmt // Returns a string with the date d formatted according to fmt.
function formatDate(d, fmt, monthNames) { // A subset of the Open Group's strftime format is supported.
var leftPad = function(n) { function formatDate(d, fmt, monthNames, dayNames) {
var leftPad = function(n, pad) {
n = "" + n; n = "" + n;
return n.length == 1 ? "0" + n : n; pad = "" + (pad == null ? "0" : pad);
return n.length == 1 ? pad + n : n;
}; };
var r = []; var r = [];
var escape = false, padNext = false; var escape = false;
var hours = d.getHours(); var hours = d.getHours();
var isAM = hours < 12; var isAM = hours < 12;
if (monthNames == null) if (monthNames == null)
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
if (dayNames == null)
dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
if (fmt.search(/%p|%P/) != -1) { var hours12;
if (hours > 12) { if (hours > 12) {
hours = hours - 12; hours12 = hours - 12;
} else if (hours == 0) { } else if (hours == 0) {
hours = 12; hours12 = 12;
} } else {
hours12 = hours;
} }
for (var i = 0; i < fmt.length; ++i) { for (var i = 0; i < fmt.length; ++i) {
var c = fmt.charAt(i); var c = fmt.charAt(i);
if (escape) { if (escape) {
switch (c) { switch (c) {
case 'h': c = "" + hours; break; case 'a': c = "" + dayNames[d.getDay()]; break;
case 'b': c = "" + monthNames[d.getMonth()]; break;
case 'd': c = leftPad(d.getDate()); break;
case 'e': c = leftPad(d.getDate(), " "); break;
case 'H': c = leftPad(hours); break; case 'H': c = leftPad(hours); break;
case 'I': c = leftPad(hours12); break;
case 'm': c = leftPad(d.getMonth() + 1); break;
case 'M': c = leftPad(d.getMinutes()); break; case 'M': c = leftPad(d.getMinutes()); break;
case 'S': c = leftPad(d.getSeconds()); break; case 'S': c = leftPad(d.getSeconds()); break;
case 'd': c = "" + d.getDate(); break; case 'y': c = leftPad(d.getFullYear() % 100); break;
case 'm': c = "" + (d.getMonth() + 1); break; case 'Y': c = "" + d.getFullYear(); break;
case 'y': c = "" + d.getFullYear(); break;
case 'b': c = "" + monthNames[d.getMonth()]; break;
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
case '0': c = ""; padNext = true; break; case 'u': c = "" + (d.getDay() + 1); break;
} case 'w': c = "" + d.getDay(); break;
if (c && padNext) {
c = leftPad(c);
padNext = false;
} }
r.push(c); r.push(c);
if (!padNext)
escape = false; escape = false;
} }
else { else {
...@@ -254,19 +259,20 @@ for details. ...@@ -254,19 +259,20 @@ for details.
// first check global format // first check global format
if (opts.timeformat != null) if (opts.timeformat != null)
return formatDate(d, opts.timeformat, opts.monthNames); return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames);
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
var span = axis.max - axis.min; var span = axis.max - axis.min;
var suffix = (opts.twelveHourClock) ? " %p" : ""; var suffix = (opts.twelveHourClock) ? " %p" : "";
var hourCode = (opts.twelveHourClock) ? "%I" : "%H";
if (t < timeUnitSize.minute) if (t < timeUnitSize.minute)
fmt = "%h:%M:%S" + suffix; fmt = hourCode + ":%M:%S" + suffix;
else if (t < timeUnitSize.day) { else if (t < timeUnitSize.day) {
if (span < 2 * timeUnitSize.day) if (span < 2 * timeUnitSize.day)
fmt = "%h:%M" + suffix; fmt = hourCode + ":%M" + suffix;
else else
fmt = "%b %d %h:%M" + suffix; fmt = "%b %d " + hourCode + ":%M" + suffix;
} }
else if (t < timeUnitSize.month) else if (t < timeUnitSize.month)
fmt = "%b %d"; fmt = "%b %d";
...@@ -274,12 +280,12 @@ for details. ...@@ -274,12 +280,12 @@ for details.
if (span < timeUnitSize.year) if (span < timeUnitSize.year)
fmt = "%b"; fmt = "%b";
else else
fmt = "%b %y"; fmt = "%b %Y";
} }
else else
fmt = "%y"; fmt = "%Y";
var rt = formatDate(d, fmt, opts.monthNames); var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
return rt; return rt;
}; };
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment