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 @@
<p>Zoom to: <button id="whole">Whole period</button>
<button id="nineties">1990-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
milliseconds since January 1, 1970 00:00. This is like Unix
......@@ -31,10 +33,10 @@
multiply with 1000!).</p>
<p>As an extra caveat, the timestamps are interpreted according to
UTC to avoid having the graph shift with each visitor's local
time zone. So you might have to add your local time zone offset
to the timestamps or simply pretend that the data was produced
in UTC instead of your local time zone.</p>
UTC and, by default, displayed as such. You can set the axis
"timezone" option to "browser" to display the timestamps in the
user's timezone, or, if you use timezoneJS, you can specify a
time zone.</p>
<script id="source">
$(function () {
......@@ -50,8 +52,8 @@ $(function () {
$.plot($("#placeholder"), [d], {
xaxis: {
mode: "time",
min: (new Date(1990, 1, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime()
min: (new Date(1990, 0, 1)).getTime(),
max: (new Date(2000, 0, 1)).getTime()
}
});
});
......@@ -61,8 +63,8 @@ $(function () {
xaxis: {
mode: "time",
minTickSize: [1, "year"],
min: (new Date(1996, 1, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime()
min: (new Date(1996, 0, 1)).getTime(),
max: (new Date(2000, 0, 1)).getTime()
}
});
});
......@@ -72,8 +74,32 @@ $(function () {
xaxis: {
mode: "time",
minTickSize: [1, "month"],
min: (new Date(1999, 1, 1)).getTime(),
max: (new Date(2000, 1, 1)).getTime()
min: (new Date(1999, 0, 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.
return base * Math.floor(n / base);
}
// returns a string with the date d formatted according to fmt
function formatDate(d, fmt, monthNames) {
var leftPad = function(n) {
// Returns a string with the date d formatted according to fmt.
// A subset of the Open Group's strftime format is supported.
function formatDate(d, fmt, monthNames, dayNames) {
var leftPad = function(n, pad) {
n = "" + n;
return n.length == 1 ? "0" + n : n;
pad = "" + (pad == null ? "0" : pad);
return n.length == 1 ? pad + n : n;
};
var r = [];
var escape = false, padNext = false;
var escape = false;
var hours = d.getHours();
var isAM = hours < 12;
if (monthNames == null)
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) {
hours = hours - 12;
hours12 = hours - 12;
} else if (hours == 0) {
hours = 12;
}
hours12 = 12;
} else {
hours12 = hours;
}
for (var i = 0; i < fmt.length; ++i) {
var c = fmt.charAt(i);
if (escape) {
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 'I': c = leftPad(hours12); break;
case 'm': c = leftPad(d.getMonth() + 1); break;
case 'M': c = leftPad(d.getMinutes()); break;
case 'S': c = leftPad(d.getSeconds()); break;
case 'd': c = "" + d.getDate(); break;
case 'm': c = "" + (d.getMonth() + 1); break;
case 'y': c = "" + d.getFullYear(); break;
case 'b': c = "" + monthNames[d.getMonth()]; break;
case 'y': c = leftPad(d.getFullYear() % 100); break;
case 'Y': c = "" + d.getFullYear(); break;
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
case '0': c = ""; padNext = true; break;
}
if (c && padNext) {
c = leftPad(c);
padNext = false;
case 'u': c = "" + (d.getDay() + 1); break;
case 'w': c = "" + d.getDay(); break;
}
r.push(c);
if (!padNext)
escape = false;
}
else {
......@@ -254,19 +259,20 @@ for details.
// first check global format
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 span = axis.max - axis.min;
var suffix = (opts.twelveHourClock) ? " %p" : "";
var hourCode = (opts.twelveHourClock) ? "%I" : "%H";
if (t < timeUnitSize.minute)
fmt = "%h:%M:%S" + suffix;
fmt = hourCode + ":%M:%S" + suffix;
else if (t < timeUnitSize.day) {
if (span < 2 * timeUnitSize.day)
fmt = "%h:%M" + suffix;
fmt = hourCode + ":%M" + suffix;
else
fmt = "%b %d %h:%M" + suffix;
fmt = "%b %d " + hourCode + ":%M" + suffix;
}
else if (t < timeUnitSize.month)
fmt = "%b %d";
......@@ -274,12 +280,12 @@ for details.
if (span < timeUnitSize.year)
fmt = "%b";
else
fmt = "%b %y";
fmt = "%b %Y";
}
else
fmt = "%y";
fmt = "%Y";
var rt = formatDate(d, fmt, opts.monthNames);
var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
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