Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Kuba wyrostek fix null values - slice wise #39

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Kuba wyrostek fix null values - slice wise #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d91a07
Do not add interpolated points between points with null values.
kuba-wyrostek Apr 19, 2016
eea438c
Merge branch 'master' into kuba-wyrostek-fix-null-values
MichaelZinsmaier Mar 19, 2018
b7cb4ed
Adding two test cases for null values
MichaelZinsmaier Mar 19, 2018
a495be5
Prepare for slicing the input array around nulls
MichaelZinsmaier Mar 19, 2018
6aed701
Adapted curved lines to process slice wise
MichaelZinsmaier Mar 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 57 additions & 27 deletions curvedLines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,38 +167,72 @@ ____________________________________________________
}
}

// split input data at datapoints with "null" values for x or y coordinate
function calculateCurvePoints(datapoints, curvedLinesOptions, yPos) {
var start = 0;
var slicing = false;
var points = datapoints.points;
var pointSize = datapoints.pointsize;
var result = [];

for (var i = 0; i < points.length; i += pointSize) {
if (typeof points[i] === 'number' && typeof points[i + yPos] === 'number') {
if (!slicing) {
slicing = true;
start = i;
}
} else {
if (slicing) {
// a slice ends
slicing = false;
var slice = points.slice(start, i);
result = result.concat(calculateCurvePointsSlice(slice, pointSize, curvedLinesOptions, yPos));
}

// ensure that even defective points are included => line segment rendering
result = result.concat(points.slice(i, i + pointSize))
}
}

// last slice ends
if (slicing) {
var slice = points.slice(start, points.length);
result = result.concat(calculateCurvePointsSlice(slice, pointSize, curvedLinesOptions, yPos));
}

return result;
}

function calculateCurvePointsSlice(points, pointSize, curvedLinesOptions, yPos) {
if ( typeof curvedLinesOptions.legacyOverride != 'undefined' && curvedLinesOptions.legacyOverride != false) {
var defaultOptions = {
fit : false,
curvePointFactor : 20,
fitPointDist : undefined
};
var legacyOptions = jQuery.extend(defaultOptions, curvedLinesOptions.legacyOverride);
return calculateLegacyCurvePoints(datapoints, legacyOptions, yPos);
return calculateLegacyCurvePoints(points, pointSize, legacyOptions, yPos);
}

return calculateSplineCurvePoints(datapoints, curvedLinesOptions, yPos);
return calculateSplineCurvePoints(points, pointSize, curvedLinesOptions, yPos);
}

function calculateSplineCurvePoints(datapoints, curvedLinesOptions, yPos) {
var points = datapoints.points;
var ps = datapoints.pointsize;


function calculateSplineCurvePoints(points, pointSize, curvedLinesOptions, yPos) {
//create interpolant fuction
var splines = createHermiteSplines(datapoints, curvedLinesOptions, yPos);
var splines = createHermiteSplines(points, pointSize, curvedLinesOptions, yPos);
var result = [];

//sample the function
// (the result is intependent from the input data =>
// it is ok to alter the input after this method)
var j = 0;
for (var i = 0; i < points.length - ps; i += ps) {
for (var i = 0; i < points.length - pointSize; i += pointSize) {
var curX = i;
var curY = i + yPos;

var xStart = points[curX];
var xEnd = points[curX + ps];
var xEnd = points[curX + pointSize];
var xStep = (xEnd - xStart) / Number(curvedLinesOptions.nrSplinePoints);

//add point
Expand All @@ -215,8 +249,8 @@ ____________________________________________________
}

//add last point
result.push(points[points.length - ps]);
result.push(points[points.length - ps + yPos]);
result.push(points[points.length - pointSize]);
result.push(points[points.length - pointSize + yPos]);

return result;
}
Expand All @@ -229,19 +263,17 @@ ____________________________________________________
// http://en.wikipedia.org/w/index.php?title=Monotone_cubic_interpolation&oldid=622341725 and the description of Fritsch-Carlson from
// http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation
// for a detailed description see https://github.com/MichaelZinsmaier/CurvedLines/docu
function createHermiteSplines(datapoints, curvedLinesOptions, yPos) {
var points = datapoints.points;
var ps = datapoints.pointsize;
function createHermiteSplines(points, pointSize, curvedLinesOptions, yPos) {

// preparation get length (x_{k+1} - x_k) and slope s=(p_{k+1} - p_k) / (x_{k+1} - x_k) of the segments
var segmentLengths = [];
var segmentSlopes = [];

for (var i = 0; i < points.length - ps; i += ps) {
for (var i = 0; i < points.length - pointSize; i += pointSize) {
var curX = i;
var curY = i + yPos;
var dx = points[curX + ps] - points[curX];
var dy = points[curY + ps] - points[curY];
var dx = points[curX + pointSize] - points[curX];
var dy = points[curY + pointSize] - points[curY];

segmentLengths.push(dx);
segmentSlopes.push(dy / dx);
Expand All @@ -268,10 +300,10 @@ ____________________________________________________
} else {
// Cardinal spline with t € [0,1]
// Catmull-Rom for t = 0
for (var i = ps; i < points.length - ps; i += ps) {
for (var i = pointSize; i < points.length - pointSize; i += pointSize) {
var curX = i;
var curY = i + yPos;
gradients.push(Number(curvedLinesOptions.tension) * (points[curY + ps] - points[curY - ps]) / (points[curX + ps] - points[curX - ps]));
gradients.push(Number(curvedLinesOptions.tension) * (points[curY + pointSize] - points[curY - pointSize]) / (points[curX + pointSize] - points[curX - pointSize]));
}
}
gradients.push(segmentSlopes[segmentSlopes.length - 1]);
Expand Down Expand Up @@ -302,19 +334,17 @@ ____________________________________________________
};
};

ret.push(spline(points[i * ps], coefs1[i], coefs2[i], gradients[i], points[i * ps + yPos]));
ret.push(spline(points[i * pointSize], coefs1[i], coefs2[i], gradients[i], points[i * pointSize + yPos]));
}

return ret;
};

//no real idea whats going on here code mainly from https://code.google.com/p/flot/issues/detail?id=226
//if fit option is selected additional datapoints get inserted before the curve calculations in nergal.dev s code.
function calculateLegacyCurvePoints(datapoints, curvedLinesOptions, yPos) {
function calculateLegacyCurvePoints(points, pointSize, curvedLinesOptions, yPos) {

var points = datapoints.points;
var ps = datapoints.pointsize;
var num = Number(curvedLinesOptions.curvePointFactor) * (points.length / ps);
var num = Number(curvedLinesOptions.curvePointFactor) * (points.length / pointSize);

var xdata = new Array;
var ydata = new Array;
Expand All @@ -331,15 +361,15 @@ ____________________________________________________
if ( typeof curvedLinesOptions.fitPointDist == 'undefined') {
//estimate it
var minX = points[0];
var maxX = points[points.length - ps];
var maxX = points[points.length - pointSize];
fpDist = (maxX - minX) / (500 * 100);
//x range / (estimated pixel length of placeholder * factor)
} else {
//use user defined value
fpDist = Number(curvedLinesOptions.fitPointDist);
}

for (var i = 0; i < points.length; i += ps) {
for (var i = 0; i < points.length; i += pointSize) {

var frontX;
var backX;
Expand Down Expand Up @@ -373,7 +403,7 @@ ____________________________________________________
}
} else {
//just use the datapoints
for (var i = 0; i < points.length; i += ps) {
for (var i = 0; i < points.length; i += pointSize) {
curX = i;
curY = i + yPos;

Expand Down
59 changes: 59 additions & 0 deletions tests/testNullFencepost.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<body>
<div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>

<script id="source" language="javascript" type="text/javascript">
$(function() {
//data fencepost
var d1 = [[null, 200], [40, 60], [50,30], [80, 80], [90, 80], [200, null]];

//general plot options
var options = {
series : {
curvedLines : {
active : true
}
}
};

//curved line paramters
var defaultParameters = {
apply: true,
legacyOverride: true
}

//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}

//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
});
</script>
</body>

</hmtl>
59 changes: 59 additions & 0 deletions tests/testNullSplit.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<body>
<div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>

<script id="source" language="javascript" type="text/javascript">
$(function() {
//data split
var d1 = [[10,10], [20, 20], [30, 80], [42, 60], [54, null], [80, 80], [90, 80]];

//general plot options
var options = {
series : {
curvedLines : {
active : true
}
}
};

//curved line paramters
var defaultParameters = {
apply: true,
legacyOverride: true
}

//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}

//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
});
</script>
</body>

</hmtl>
59 changes: 59 additions & 0 deletions tests/testPointSlices.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<body>
<div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>

<script id="source" language="javascript" type="text/javascript">
$(function() {
//data slices with two single points and a slice wiht two points
var d1 = [[20, 20], [42, null], [54, 54], [80, null], [90, 80], [100, 100]];

//general plot options
var options = {
series : {
curvedLines : {
active : true
}
}
};

//curved line paramters
var defaultParameters = {
apply: true,
legacyOverride: true
}

//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}

//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
});
</script>
</body>

</hmtl>