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

Added support for line segments and null/NaN values

Browse Source 
git-svn-id: https://flot.googlecode.com/svn/trunk@51 1e0a6537-2640-0410-bfb7-f154510ff394
pull/1/head
olau@iola.dk 18 years ago
parent bedf4fb2dc
commit 7a665a14f8
4 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File

16
API.txt
Unescape Escape View File

@ -16,8 +16,8 @@ options. The "plot" object returned has some members you can call.
These are documented separately below.
Note that in general Flot gives no guarantees if you change any of the
objects you pass in to the plot function or get out of it. The objects
may not be deep-copied.
objects you pass in to the plot function or get out of it since
they're not necessarily deep-copied.
Data Format
@ -38,10 +38,14 @@ E.g.
Note that to simplify the internal logic in Flot both the x and y
values must be numbers, even if specifying time series (see below for
how to do this). If you put in something else, e.g. a string, the plot
function fails with strange errors. This is a common problem because
you might accidentally retrieve data from the database as strings and
serialize them directly to JSON without noticing the wrong type.
how to do this). This is a common problem because you might
accidentally retrieve data from the database as strings and serialize
them directly to JSON without noticing the wrong type.
If a null is specified as a point or if one of the coordinates is null
or NaN, the point is ignored. As a special case, a null value for
lines is interpreted as a line segment end, i.e. the two points before
and after the null value are not connected.
The format of a single series object is as follows:

3
TODO
Unescape Escape View File

@ -34,9 +34,6 @@ interactive hover over
- fire event with value for points
- fire event with graph id for lines
support segmented lines
- put in null value to signify a break in the data set
error margin indicators
- for scientific/statistical purposes

5
examples/basic.html
Unescape Escape View File

@ -26,8 +26,11 @@ $(function () {
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2 ]);
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

94
jquery.flot.js
Unescape Escape View File

@ -200,11 +200,12 @@
if (data[j] == null)
continue;
var x = data[j][0];
var y = data[j][1];
var x = data[j][0], y = data[j][1];
if (x == null || isNaN(x) || y == null || isNaN(y))
if (x == null || isNaN(x) || y == null || isNaN(y)) {
data[j] = null; // mark this point as invalid
continue;
}
if (x < xaxis.datamin)
xaxis.datamin = x;
@ -841,17 +842,18 @@
function drawSeriesLines(series) {
function plotLine(data, offset) {
if (data.length < 2)
return;
var prevx = tHoz(data[0][0]),
prevy = tVert(data[0][1]) + offset;
var prev, cur = null, drawx = null, drawy = null;
ctx.beginPath();
ctx.moveTo(prevx, prevy);
for (var i = 0; i < data.length - 1; ++i) {
var x1 = data[i][0], y1 = data[i][1],
x2 = data[i+1][0], y2 = data[i+1][1];
for (var i = 0; i < data.length; ++i) {
prev = cur;
cur = data[i];
if (prev == null || cur == null)
continue;
var x1 = prev[0], y1 = prev[1],
x2 = cur[0], y2 = cur[1];
// clip with ymin
if (y1 <= y2 && y1 < yaxis.min) {
@ -910,29 +912,41 @@
x2 = xaxis.max;
}
if (prevx != tHoz(x1) || prevy != tVert(y1) + offset)
if (drawx != tHoz(x1) || drawy != tVert(y1) + offset)
ctx.moveTo(tHoz(x1), tVert(y1) + offset);
prevx = tHoz(x2);
prevy = tVert(y2) + offset;
ctx.lineTo(prevx, prevy);
drawx = tHoz(x2);
drawy = tVert(y2) + offset;
ctx.lineTo(drawx, drawy);
}
ctx.stroke();
}
function plotLineArea(data) {
if (data.length < 2)
return;
var prev, cur = null;
var bottom = Math.min(Math.max(0, yaxis.min), yaxis.max);
var top, lastX = 0;
var first = true;
var areaOpen = false;
ctx.beginPath();
for (var i = 0; i < data.length - 1; ++i) {
var x1 = data[i][0], y1 = data[i][1],
x2 = data[i+1][0], y2 = data[i+1][1];
for (var i = 0; i < data.length; ++i) {
prev = cur;
cur = data[i];
if (areaOpen && prev != null && cur == null) {
// close area
ctx.lineTo(tHoz(lastX), tVert(bottom));
ctx.fill();
areaOpen = false;
continue;
}
if (prev == null || cur == null)
continue;
var x1 = prev[0], y1 = prev[1],
x2 = cur[0], y2 = cur[1];
// clip x values
@ -964,9 +978,11 @@
x2 = xaxis.max;
}
if (first) {
if (!areaOpen) {
// open area
ctx.beginPath();
ctx.moveTo(tHoz(x1), tVert(bottom));
first = false;
areaOpen = true;
}
// now first check the case where both is outside
@ -1038,15 +1054,11 @@
lastX = Math.max(x2, x2old);
}
/*
ctx.beginPath();
ctx.moveTo(tHoz(data[0][0]), tVert(0));
for (var i = 0; i < data.length; i++) {
ctx.lineTo(tHoz(data[i][0]), tVert(data[i][1]));
if (areaOpen) {
ctx.lineTo(tHoz(lastX), tVert(bottom));
ctx.fill();
}
ctx.lineTo(tHoz(data[data.length - 1][0]), tVert(0));*/
ctx.lineTo(tHoz(lastX), tVert(bottom));
ctx.fill();
}
ctx.save();
@ -1081,6 +1093,9 @@
function drawSeriesPoints(series) {
function plotPoints(data, radius, fill) {
for (var i = 0; i < data.length; ++i) {
if (data[i] == null)
continue;
var x = data[i][0], y = data[i][1];
if (x < xaxis.min || x > xaxis.max || y < yaxis.min || y > yaxis.max)
continue;
@ -1095,6 +1110,9 @@
function plotPointShadows(data, offset, radius) {
for (var i = 0; i < data.length; ++i) {
if (data[i] == null)
continue;
var x = data[i][0], y = data[i][1];
if (x < xaxis.min || x > xaxis.max || y < yaxis.min || y > yaxis.max)
continue;
@ -1129,10 +1147,10 @@
function drawSeriesBars(series) {
function plotBars(data, barWidth, offset, fill) {
if (data.length < 1)
return;
for (var i = 0; i < data.length; i++) {
if (data[i] == null)
continue;
var x = data[i][0], y = data[i][1];
var drawLeft = true, drawTop = true, drawRight = true;
var left = x, right = x + barWidth, bottom = 0, top = y;

Write Preview
Loading…
Cancel
Save