github-mirrors
/
thingsboard-flot
mirror of https://github.com/thingsboard/flot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Time format now a proper subset of strftime's.

Browse Source
pull/1/head
Mark Cote 14 years ago
parent fd80908918
commit a54ec4ad64
2 changed files with 73 additions and 41 deletions
Show Stats Download Patch File Download Diff File

48
examples/time.html
Unescape Escape View File

@ -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
}
});
});

66
jquery.flot.time.js
Unescape Escape View File

@ -12,51 +12,56 @@ 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) {
if (hours > 12) {
hours = hours - 12;
} else if (hours == 0) {
hours = 12;
}
var hours12;
if (hours > 12) {
hours12 = hours - 12;
} else if (hours == 0) {
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;
escape = false;
}
else {
if (c == "%")
@ -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;
};
}

Write Preview
Loading…
Cancel
Save