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

Added first stab at time series support

Browse Source 
git-svn-id: https://flot.googlecode.com/svn/trunk@42 1e0a6537-2640-0410-bfb7-f154510ff394
pull/1/head
olau@iola.dk 18 years ago
parent c198ffb2b0
commit c97acff95e
3 changed files with 413 additions and 125 deletions
Show Stats Download Patch File Download Diff File

1
examples/index.html
Unescape Escape View File

@ -20,6 +20,7 @@
<li><a href="real-data.html">Real data with a bit of interactivity</a></li> <li><a href="real-data.html">Real data with a bit of interactivity</a></li>
<li><a href="selection.html">Selection support and zooming</a></li> <li><a href="selection.html">Selection support and zooming</a></li>
<li><a href="zooming.html">Zooming with overview</a></li> <li><a href="zooming.html">Zooming with overview</a></li>
<li><a href="time.html">Plotting time series</a></li>
<li><a href="interacting.html">Interacting with the data</a></li> <li><a href="interacting.html">Interacting with the data</a></li>
</ul> </ul>
</body> </body>

60
examples/time.html
View File

File diff suppressed because one or more lines are too long

285
jquery.flot.js
Unescape Escape View File

@ -27,10 +27,11 @@
backgroundOpacity: 0.85 // set to 0 to avoid background backgroundOpacity: 0.85 // set to 0 to avoid background
}, },
xaxis: { xaxis: {
ticks: null, // either [1, 3] or [[1, "a"], 3] ticks: null, // either [1, 3] or [[1, "a"], 3] or function that outputs this
noTicks: 5, // approximate number of ticks for auto-ticks noTicks: 5, // approximate number of ticks for auto-ticks
tickFormatter: defaultTickFormatter, // fn: number -> string tickFormatter: null, // fn: number -> string or format string if datatype is date
tickDecimals: null, // no. of decimals, null means auto tickDecimals: null, // no. of decimals, null means auto
datatype: "number", // one of "number", "time"
min: null, // min. value to show, null means set automatically min: null, // min. value to show, null means set automatically
max: null, // max. value to show, null means set automatically max: null, // max. value to show, null means set automatically
autoscaleMargin: null // margin in % to add if auto-setting min/max autoscaleMargin: null // margin in % to add if auto-setting min/max
@ -38,9 +39,7 @@
yaxis: { yaxis: {
noTicks: 5, noTicks: 5,
ticks: null, ticks: null,
tickFormatter: defaultTickFormatter, datatype: "number",
min: null,
max: null,
autoscaleMargin: 0.02 autoscaleMargin: 0.02
}, },
points: { points: {
@ -74,7 +73,10 @@
mode: null, // one of null, "x", "y" or "xy" mode: null, // one of null, "x", "y" or "xy"
color: "#e8cfac" color: "#e8cfac"
}, },
shadowSize: 4 shadowSize: 4,
date: {
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}
}; };
var canvas = null, overlay = null; var canvas = null, overlay = null;
var ctx = null, octx = null; var ctx = null, octx = null;
@ -92,6 +94,15 @@
var hozScale = 0; var hozScale = 0;
var vertScale = 0; var vertScale = 0;
// map of app. size of time units in milliseconds
var dateUnitSize = {
"second": 1000,
"minute": 60 * 1000,
"hour": 60 * 60 * 1000,
"day": 24 * 60 * 60 * 1000,
"month": 30 * 24 * 60 * 60 * 1000,
"year": 365.2425 * 24 * 60 * 60 * 1000
};
// initialize // initialize
series = parseData(data_); series = parseData(data_);
@ -250,31 +261,219 @@
function setTickSize(axis, axisOptions) { function setTickSize(axis, axisOptions) {
var delta = (axis.max - axis.min) / axisOptions.noTicks; var delta = (axis.max - axis.min) / axisOptions.noTicks;
var size, generator, unit = "", formatter, i;
if (axisOptions.datatype == "time") {
// pretty handling of time
// the allowed tick sizes, after 1 year we use
// an integer algorithm
var spec = [
[1, "second"], [2, "second"], [5, "second"], [10, "second"],
[30, "second"],
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"],
[30, "minute"],
[1, "hour"], [2, "hour"], [4, "hour"],
[8, "hour"], [12, "hour"],
[1, "day"], [2, "day"], [3, "day"],
[0.25, "month"], [0.5, "month"], [1, "month"],
[2, "month"], [3, "month"], [6, "month"],
[1, "year"]
];
// a generic tick generator for the well-behaved cases
// where it's simply matter of adding a fixed no. of seconds
var genericTimeGenerator = function(axis) {
var ticks = [];
var step = axis.tickSize * dateUnitSize[axis.tickSizeUnit];
var d = new Date(axis.min);
d.setMilliseconds(0);
if (axis.tickSizeUnit == "second")
d.setSeconds(floorInBase(d.getSeconds(), axis.tickSize));
else if (step >= dateUnitSize.minute)
d.setSeconds(0);
if (axis.tickSizeUnit == "minute")
d.setMinutes(floorInBase(d.getMinutes(), axis.tickSize));
else if (step >= dateUnitSize.hour)
d.setMinutes(0);
if (axis.tickSizeUnit == "hour")
d.setHours(floorInBase(d.getHours(), axis.tickSize));
else if (step >= dateUnitSize.day)
d.setHours(0);
do {
var v = d.getTime();
ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
//console.log(d, "generic", axis.tickSize, axis.tickSizeUnit)
d.setTime(v + step);
} while (v < axis.max);
return ticks;
};
var unitGenerator = {
"second": genericTimeGenerator,
"minute": genericTimeGenerator,
"hour": genericTimeGenerator,
"day": genericTimeGenerator,
"month": function(axis) {
var ticks = [];
var d = new Date(axis.min);
d.setMilliseconds(0);
d.setSeconds(0);
d.setMinutes(0);
d.setHours(0);
d.setDate(1);
d.setMonth(floorInBase(d.getMonth(), axis.tickSize));
do {
var v = d.getTime();
ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
//console.log(d, "month", axis.tickSize)
if (axis.tickSize < 1) {
d.setDate(1);
var start = d.getTime();
d.setMonth(d.getMonth() + 1);
var end = d.getTime();
d.setTime(v + (end - start) * axis.tickSize);
}
else
d.setMonth(d.getMonth() + axis.tickSize);
} while (v < axis.max);
return ticks;
},
"year": function(axis) {
var ticks = [];
var d = new Date(axis.min);
d.setMilliseconds(0);
d.setSeconds(0);
d.setMinutes(0);
d.setHours(0);
d.setDate(1);
d.setMonth(0);
d.setFullYear(floorInBase(d.getFullYear(), axis.tickSize));
do {
var v = d.getTime();
ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
//console.log(d, "year", axis.tickSize);
d.setFullYear(d.getFullYear() + axis.tickSize);
} while (v < axis.max);
return ticks;
}
}
for (i = 0; i < spec.length - 1; ++i)
if (delta < (spec[i][0] * dateUnitSize[spec[i][1]]
+ spec[i + 1][0] * dateUnitSize[spec[i + 1][1]]) / 2)
break;
size = spec[i][0];
unit = spec[i][1];
generator = unitGenerator[unit];
// special-case the possibility of several years
if (unit == "year") {
var magn = Math.pow(10, Math.floor(Math.log(delta / dateUnitSize.year) / Math.LN10));
var norm = (delta / dateUnitSize.year) / magn;
if (norm < 1.5)
size = 1;
else if (norm < 3)
size = 2;
else if (norm < 7.5)
size = 5;
else
size = 10;
size *= magn;
}
if (typeof axisOptions.tickFormatter == "string")
formatter = function (v, axis) {
return formatDate(new Date(v), axisOptions.tickFormatter);
};
else
formatter = function (v, axis) {
var d = new Date(v);
var t = axis.tickSize * dateUnitSize[axis.tickSizeUnit];
var span = axis.max - axis.min;
if (t < dateUnitSize.minute)
fmt = "%h:%M:%S";
else if (t < dateUnitSize.day) {
if (span < 2 * dateUnitSize.day)
fmt = "%h:%M";
else
fmt = "%b %d %h:%M";
}
else if (t < dateUnitSize.month)
fmt = "%b %d";
else if (t < dateUnitSize.year) {
if (span < dateUnitSize.year)
fmt = "%b";
else
fmt = "%b %y";
}
else
fmt = "%y";
return formatDate(d, fmt);
};
}
else {
// pretty rounding of base-10 numbers
var maxDec = axisOptions.tickDecimals; var maxDec = axisOptions.tickDecimals;
var dec = -Math.floor(Math.log(delta) / Math.LN10); var dec = -Math.floor(Math.log(delta) / Math.LN10);
if (maxDec != null && dec > maxDec) if (maxDec != null && dec > maxDec)
dec = maxDec; dec = maxDec;
var magn = Math.pow(10, -dec); var magn = Math.pow(10, -dec);
var norm = delta / magn; // norm is between 1.0 and 10.0 var norm = delta / magn; // norm is between 1.0 and 10.0
var tickSize = 1;
if (norm < 1.5) if (norm < 1.5)
tickSize = 1; size = 1;
else if (norm < 3) { else if (norm < 3) {
tickSize = 2; size = 2;
// special case for 2.5, requires an extra decimal // special case for 2.5, requires an extra decimal
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
tickSize = 2.5; size = 2.5;
++dec; ++dec;
} }
} }
else if (norm < 7.5) else if (norm < 7.5)
tickSize = 5; size = 5;
else else
tickSize = 10; size = 10;
axis.tickSize = tickSize * magn; size *= magn;
axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec); axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec);
generator = function (axis) {
var ticks = [];
var start = floorInBase(axis.min, axis.tickSize);
// then spew out all possible ticks
i = 0;
do {
v = start + i * axis.tickSize;
ticks.push({ v: v, label: axis.tickFormatter(v, axis) });
++i;
} while (v < axis.max);
return ticks;
};
formatter = function (v, axis) {
return v.toFixed(axis.tickDecimals);
};
}
axis.tickSize = size;
axis.tickGenerator = generator;
axis.tickSizeUnit = unit;
axis.datatype = axisOptions.datatype;
if ($.isFunction(axisOptions.tickFormatter))
axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };
else
axis.tickFormatter = formatter;
} }
function extendXRangeIfNeededByBar() { function extendXRangeIfNeededByBar() {
@ -289,10 +488,6 @@
} }
} }
function defaultTickFormatter(val, axis) {
return val.toFixed(axis.tickDecimals);
}
function setTicks(axis, axisOptions) { function setTicks(axis, axisOptions) {
var i, v; var i, v;
axis.ticks = []; axis.ticks = [];
@ -316,21 +511,12 @@
else else
v = t; v = t;
if (label == null) if (label == null)
label = "" + axisOptions.tickFormatter(v, axis); label = axis.tickFormatter(v, axis);
axis.ticks[i] = { v: v, label: label }; axis.ticks[i] = { v: v, label: label };
} }
} }
else { else
// round to nearest multiple of tick size axis.ticks = axis.tickGenerator(axis);
var start = axis.tickSize * Math.floor(axis.min / axis.tickSize);
// then spew out all possible ticks
i = 0;
do {
v = start + i * axis.tickSize;
axis.ticks.push({ v: v, label: "" + axisOptions.tickFormatter(v, axis) });
++i;
} while (v < axis.max);
}
if (axisOptions.autoscaleMargin != null) { if (axisOptions.autoscaleMargin != null) {
if (axisOptions.min == null) if (axisOptions.min == null)
@ -1196,6 +1382,42 @@
return Math.abs(selection.second.x - selection.first.x) >= minSize && return Math.abs(selection.second.x - selection.first.x) >= minSize &&
Math.abs(selection.second.y - selection.first.y) >= minSize; Math.abs(selection.second.y - selection.first.y) >= minSize;
} }
function formatDate(d, s) {
var leftPad = function(n) {
n = "" + n;
return n.length == 1 ? "0" + n : n;
};
var r = [];
var escape = false;
for (var i = 0; i < s.length; ++i) {
var c = s.charAt(i);
if (escape) {
switch (c) {
case 'h': c = "" + d.getHours(); break;
case 'H': c = leftPad(d.getHours()); 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 = "" + options.date.monthNames[d.getMonth()]; break;
default: c;
}
r.push(c);
escape = false;
}
else {
if (c == "%")
escape = true;
else
r.push(c);
}
}
return r.join("");
}
} }
$.plot = function(target, data, options) { $.plot = function(target, data, options) {
@ -1210,6 +1432,11 @@
return plot; return plot;
}; };
// round to nearby lower multiple of base
function floorInBase(n, base) {
return base * Math.floor(n / base);
}
// color helpers, inspiration from the jquery color animation // color helpers, inspiration from the jquery color animation
// plugin by John Resig // plugin by John Resig
function Color (r, g, b, a) { function Color (r, g, b, a) {

Write Preview
Loading…
Cancel
Save