Skip to content

C
CurvedLines
Commit a495be54 authored by Michael Zinsmaier's avatar Michael Zinsmaier
Browse files
Options

Prepare for slicing the input array around nulls

parent b7cb4ed9
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 35 deletions
curvedLines.js
View file @ a495be54
......@@ -167,7 +167,13 @@ ____________________________________________________
}
}
function calculateCurvePoints(datapoints, curvedLinesOptions, yPos) {
// typeof points[curX] === 'number'
return calculateCurvePointsSlice(datapoints.points, datapoints.pointsize, curvedLinesOptions, yPos)
}
function calculateCurvePointsSlice(points, pointSize, curvedLinesOptions, yPos) {
if ( typeof curvedLinesOptions.legacyOverride != 'undefined' && curvedLinesOptions.legacyOverride != false) {
var defaultOptions = {
fit : false,
......@@ -175,51 +181,46 @@ ____________________________________________________
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
result.push(points[curX]);
result.push(points[curY]);
//add curve point; skip between nulls
if (typeof points[curX] === 'number' && typeof points[curY] === 'number'
&& typeof points[curX + ps] === 'number' && typeof points[curY + ps] === 'number') {
for (var x = (xStart += xStep); x < xEnd; x += xStep) {
result.push(x);
result.push(splines[j](x));
}
//add curve point
for (var x = (xStart += xStep); x < xEnd; x += xStep) {
result.push(x);
result.push(splines[j](x));
}
j++;
}
//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;
}
......@@ -232,19 +233,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);
......@@ -271,10 +270,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]);
......@@ -305,7 +304,7 @@ ____________________________________________________
};
};
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;
......@@ -313,11 +312,9 @@ ____________________________________________________
//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;
......@@ -334,7 +331,7 @@ ____________________________________________________
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 {
......@@ -342,7 +339,7 @@ ____________________________________________________
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;
......@@ -376,7 +373,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;
......
tests/testNullSplit.htm
View file @ a495be54
......@@ -16,7 +16,7 @@
<script id="source" language="javascript" type="text/javascript">
$(function() {
//data split
var d1 = [[20, 20], [42, 60], [54, null], [80, 80], [90, 80]];
var d1 = [[20, 20], [30, 80], [42, 60], [54, null], [80, 80], [90, 80]];
//general plot options
var options = {
......@@ -42,6 +42,11 @@
lineWidth : 3
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}
......
tests/testPointSlices.htm 0 → 100644
View file @ a495be54
<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: false
}
//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>
\ No newline at end of file
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