Skip to content

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

Added new auto parameter testbox to all tests

parent 3db2c2ee
Hide whitespace changes
Inline Side-by-side
Showing with 739 additions and 405 deletions
curvedLines.js
View file @ aa088307
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
function calculateLegacyCurvePoints(datapoints, curvedLinesOptions, yPos) { function calculateLegacyCurvePoints(datapoints, curvedLinesOptions, yPos) {
var points = datapoints.points, ps = datapoints.pointsize; var points = datapoints.points, ps = datapoints.pointsize;
var num = curvedLinesOptions.curvePointFactor * (points.length / ps); var num = Number(curvedLinesOptions.curvePointFactor) * (points.length / ps);
var xdata = new Array; var xdata = new Array;
var ydata = new Array; var ydata = new Array;
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
//x range / (estimated pixel length of placeholder * factor) //x range / (estimated pixel length of placeholder * factor)
} else { } else {
//use user defined value //use user defined value
fpDist = curvedLinesOptions.fitPointDist; fpDist = Number(curvedLinesOptions.fitPointDist);
} }
for (var i = 0; i < points.length; i += ps) { for (var i = 0; i < points.length; i += ps) {
......
tests/Issue18.htm
View file @ aa088307
...@@ -2,163 +2,90 @@ ...@@ -2,163 +2,90 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.time.js"></script> <script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.time.js"></script>
<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.navigate.js"></script> <script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.navigate.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="placeholder" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function () { $(function() {
//data
var dataSet = [[1385490600000, 150], [1386009000000, 450], [1392834600000, 444], [1393266600000, 100], [1393353000000, 147], [1393439400000, 105], [1393525800000, 179.5], [1393612200000, 85], [1393871400000, 107.5]];
//general plot options
var options = { var options = {
series: { series : {
curvedLines: { curvedLines : {
active: true active : true
} }
}, },
xaxis: { xaxis : {
mode: "time", mode : "time",
tickSize: [1, "day"], tickSize : [1, "day"],
timezone: "browser", timezone : "browser",
timeformat: "%m/%d%a", timeformat : "%m/%d%a",
min: 1393396200000, min : 1393396200000,
max: 1394073000000, max : 1394073000000,
tickLength: 0, tickLength : 0,
panRange: [1378809000000, 1394505000000], panRange : [1378809000000, 1394505000000],
dayNames: ["S", "M", "T", "W", "T", "F", "S"] dayNames : ["S", "M", "T", "W", "T", "F", "S"]
},
yaxis: {
panRange: [0, 500],
ticks: ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength: 0,
tickDecimals: 0
}, },
pan: { yaxis : {
interactive: true panRange : [0, 500],
ticks : ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength : 0,
tickDecimals : 0
},
pan : {
interactive : true
} }
} }
var dataSet = [ //curved line paramters
[1385490600000, 150], var defaultParameters = {
[1386009000000, 450], apply : true,
[1392834600000, 444], legacyOverride : {
[1393266600000, 100], fitPointDist : 86400,
[1393353000000, 147], curvePointFactor : 40,
[1393439400000, 105], fit : true
[1393525800000, 179.5], }
[1393612200000, 85],
[1393871400000, 107.5]
];
//SUMMARY
//
//Depending on your data you might have to adjust the parameters curvePointFactor and (unlikely) fitPointDist.
//Use this example to learn:
//
// - how to track down such problems (activate/deactivate dataShowVirtualPoints line 147 to see the created virtual points)
// - more details about the curvePointFactor (important!)
// - more details about fitPointDist
//CURVE POINT FACTOR
// defines how many "virtual" points are used per "real" data point to
// emulate the curvedLines (points total = real points * curvePointFactor)
//
//For the current example we start with 9 data points that are extended by the default factor of 20 which leads to
//180 data points including 9 original data points and if fit is true further 16 inner min max helpers (2 * 9) - 2).
//These virtual data points are equally distributed on the x-Axis!
//
//This is a sensitive parameter. If curvePointFactor is choosen too large performance will degenerate because of the
//potentially thousands of additional points. But if it is choosen to low the curviness will not be achieved.
//
//In the current example 20 is to low. The problem is that the input data contains a huge gap on the xaxis and
//nearly all of the virtual data points end up on the straight line that bridges the gap. To less virtual points are
//placed between the original data points at the start and end of the plot and the bending does not work.
//
//Increase the curvePointFactor to e.g. 200 to solve the problem. To find an appropriate value for your data consider the
//maximum amount of data points that you will face as well as their distirbution.
//FIT POINT DIST:
// defines the x axis distance of the additional two points that are used
// to enforce the min max condition.
//
//Two points are placed near the original data point to get the min/max point of the curve at a real data point.
//These two virtual points should be close (less than one pixel) to the real data point.
//
//CurvedLines estimates the distance with the following formula: fpDist = (maxX - minX) / (500 * 100);
//The xrange of the plot is devided by a (wild guessed) plot width of 500 pixels and then subdevided by 100 to get
//below one pixel. I.e. for plots without panning and a div width of 500 we would get a fpDist of 1/100 pixels.
//
//Of course in reality these guesses might be far off. However the parameter is quite robust and the guessed value will
//often be good enough.
//
//In this plot the calculated value is 167.616 and values between 5.000.000 and 1 would still work.
//If you want to screw things up try something like 10.000.000 ...
//
//=> The fitPointDist should normally work for you however if you use a vast panning range or very large/very small numbers
// you might want to define it on your own.
//
// E.g. lets aim for 1/10 of a pixel for our current example plot:
// 1 day ~ 100 pixels = 86.400.000
// 1 pixel ~ 864000
// 1/10 pixel ~ 86400
var dataLinesArray = {
data: dataSet,
lines: {
show: true
},
curvedLines: {
apply: true,
legacyOverride: {
/*play with parameters (lines)*/
//fitPointDist: 86400,
//curvePointFactor: 200,
fit: true
}
},
clickable: false,
hoverable: false,
color: '#7D177A'
}; };
var dataShowVirtualPoints = { //plot function
data: dataSet, function replot(parameters) {
points: { $.plot($("#placeholder"), [{
show: true data : dataSet,
}, lines : {
curvedLines: { show : true,
apply: true, },
legacyOverride: { curvedLines : parameters
/*play with parameters (points)*/ }, {
//fitPointDist: 86400, data : dataSet,
//curvePointFactor: 200, points : {
fit: true show : true,
},
curvedLines : parameters
}, {
data : dataSet,
points : {
show : true
} }
}, }], options);
color:'#FF0000' }
};
var Data = [];
Data.push(dataLinesArray);
/*see virtual points*/
//Data.push(dataShowVirtualPoints);
$.plot("#placeholder", Data, options); //combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
}); });
</script> </script>
</body> </body>
</hmtl> </hmtl>
\ No newline at end of file
tests/Issue19.htm
View file @ aa088307
...@@ -9,17 +9,20 @@ ...@@ -9,17 +9,20 @@
<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.stack.js"></script> <script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.stack.js"></script>
<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.navigate.js"></script> <script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.navigate.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div class="demo-container">
<div id="placeholder" style="height: 200px; width: 400px;" class="demo-placeholder"></div> <div id="placeholder" style="height: 300px; width: 600px;"></div>
<div id="placeholder2" style="height: 200px; width: 400px;" class="demo-placeholder"></div> <div id="placeholder2" style="height: 300px; width: 600px;"></div>
</div> <div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function() { $(function() {
//data
var d1 = []; var d1 = [];
for (var i = 0; i <= 10; i += 1) { for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);} d1.push([i, parseInt(Math.random() * 30)]);}
...@@ -31,30 +34,38 @@ $(function() { ...@@ -31,30 +34,38 @@ $(function() {
var d3 = []; var d3 = [];
for (var i = 0; i <= 10; i += 1) { for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);} d3.push([i, parseInt(Math.random() * 30)]);}
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : {fit: true}
}
//plot function
$.plot("#placeholder", [ d1, d2, d3 ], { $.plot("#placeholder", [ d1, d2, d3 ], {
series: { stack: true, series: { stack: true,
lines: {show: true, fill: true, }, lines: {show: true, fill: true, },
} }
}); });
$.plot("#placeholder2", function replot(parameters) {
$.plot($("#placeholder2"),
[ [
{data: d1, lines: { show: true, fill: true }, stack: true, curvedLines: {apply: true}}, {data: d1, lines: { show: true, fill: true }, stack: true, curvedLines: parameters},
{data: d2, lines: { show: true, fill: true }, stack: true, curvedLines: {apply: true}}, {data: d2, lines: { show: true, fill: true }, stack: true, curvedLines: parameters},
{data: d3, lines: { show: true, fill: true }, stack: true, curvedLines: {apply: true}}, {data: d3, lines: { show: true, fill: true }, stack: true, curvedLines: parameters},
], ],
{ {
series: { series: {
curvedLines: { curvedLines: {
active: true, active: true
apply: true,
legacyOverride : { fit: true }
} }
} }
} });
); }
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
}); });
......
tests/_TestSetup.css 0 → 100644
View file @ aa088307
.parameterInput {
margin-left: 30px;
margin-right: 5px;
vertical-align: middle;
}
.parameterBox {
background-color: #BBBBBB;
padding-top: 5px;
padding-bottom: 5px;
}
tests/_TestSetup.js 0 → 100644
View file @ aa088307
!function() {
var TestSetup = function(div, lineParameter, replotFunctions) {
div.append("<div id='normalParameters' class='parameterBox'></div>");
$("#normalParameters").append("<input class='parameterInput' id='apply' type='checkbox' onchange='TestSetup.applyChanged()'>apply</input>");
div.append("<div id='legacyParameters' class='parameterBox'></div>");
$("#legacyParameters").append("<input class='parameterInput' id='useLegacy' type='checkbox' onchange='TestSetup.useLegacyChanged()'>use legacy options</input>");
$("#legacyParameters").append("<input class='parameterInput' id='legacyFit' type='checkbox' onchange='TestSetup.legacyFitChanged()'>fit</input>");
$("#legacyParameters").append("<input class='parameterInput' id='legacyPointFactor' type='text' onchange='TestSetup.legacyPointFactorChanged()'>point factor</input>");
$("#legacyParameters").append("<input class='parameterInput' id='legacyFitPointDist' type='text' onchange='TestSetup.legacyFitPointDistChanged()'>fit point dist</input>");
var parameter = lineParameter;
var changing = false;
function replotAll(parameter, replotFunctions) {
for (var i = 0; i < replotFunctions.length; i++) {
replotFunctions[i](parameter);
}
}
function init(parameter) {
if (changing) return;
changing = true;
{
var defaultParam = {
active : false,
apply : false,
monotonicFit : false,
tension : 0.0,
legacyOverride : undefined
};
var combinedParam = jQuery.extend(defaultParam, parameter);
if (combinedParam.legacyOverride == true) {
combinedParam.legacyOverride = {
fit : false,
curvePointFactor : 20,
fitPointDist : undefined
};
parameter.legacyOverride = {
fit : false,
curvePointFactor : 20,
fitPointDist : undefined
};
}
$("#apply").prop("checked", combinedParam.apply);
var withLegacy = (typeof combinedParam.legacyOverride != 'undefined' && combinedParam.legacyOverride != false);
var fit = withLegacy ? combinedParam.legacyOverride.fit : false;
var pointFactor = withLegacy ? combinedParam.legacyOverride.curvePointFactor : '20';
var fitDist = withLegacy ? combinedParam.legacyOverride.fitPointDist : '';
$("#useLegacy").prop("checked", withLegacy);
$("#legacyFit").prop("checked", fit);
$("#legacyPointFactor").val(pointFactor);
$("#legacyFitPointDist").val(fitDist);
replotAll(parameter, replotFunctions);
}
changing = false;
}
TestSetup.applyChanged = function() {
if (changing) return;
changing = true;
{
parameter.apply = $("#apply").prop("checked");
replotAll(parameter, replotFunctions);
}
changing = false;
};
TestSetup.useLegacyChanged = function() {
if (changing) return;
changing = true;
{
if ($("#useLegacy").prop("checked")) {
parameter.legacyOverride = {
fit : false,
curvePointFactor : 20,
fitPointDist : undefined
};
} else {
parameter.legacyOverride = undefined;
}
$("#legacyFit").prop("checked", false);
$("#legacyPointFactor").val(20);
$("#legacyFitPointDist").val('');
replotAll(parameter, replotFunctions);
}
changing = false;
};
TestSetup.legacyFitChanged = function() {
if (changing) return;
changing = true;
{
if ($("#useLegacy").prop("checked")) {
parameter.legacyOverride.fit = $("#legacyFit").prop("checked");
replotAll(parameter, replotFunctions);
}
}
changing = false;
};
TestSetup.legacyPointFactorChanged = function() {
if (changing) return;
changing = true;
{
if ($("#useLegacy").prop("checked")) {
parameter.legacyOverride.curvePointFactor = $("#legacyPointFactor").val();
replotAll(parameter, replotFunctions);
}
}
changing = false;
};
TestSetup.legacyFitPointDistChanged = function() {
if (changing) return;
changing = true;
{
if ($("#useLegacy").prop("checked")) {
var text = $("#legacyFitPointDist").val();
if (text == '') {
parameter.legacyOverride.fitPointDist = undefined;
} else {
parameter.legacyOverride.fitPointDist = text;
}
replotAll(parameter, replotFunctions);
}
}
changing = false;
};
init(parameter);
};
this.TestSetup = TestSetup;
}();
\ No newline at end of file
tests/testDate.htm
View file @ aa088307
<hmtl> <hmtl>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../flot/jquery.flot.time.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.time.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script> <script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
</head> <script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
<body> <link rel="stylesheet" type="text/css" href="_TestSetup.css">
<div id="placeholder" style="width: 800;height: 400;"></div> </link>
<div id="placeholder2" style="width: 800;height: 400;"></div> </head>
<body>
<script id="source" language="javascript" type="text/javascript"> <div id="placeholder" style="width: 800;height: 300;"></div>
var d1 = [[new Date(1360735200000), 2], [new Date(1360648800000), 21], [new Date(1360562400000), 3], [new Date(1360303200000), 3], [new Date(1360216800000), 3], [new Date(1360130400000), 5], [new Date(1360044000000), 0], [new Date(1359957600000), 0], [new Date(1359698400000), 0], [new Date(1359612000000), 1], [new Date(1359525600000), 2], [new Date(1359439200000), 3], [new Date(1359352800000), 1], [new Date(1359093600000), 2], [new Date(1359007200000), 1], [new Date(1358920800000), 5], [new Date(1358834400000), 13], [new Date(1358748000000), 12], [new Date(1358488800000), 10], [new Date(1358402400000), 11], [new Date(1358316000000), 5], [new Date(1358229600000), 4], [new Date(1358143200000), 3]]; <div id="placeholder2" style="width: 800;height: 300;"></div>
<div id="parameters" style="width: 800"></div>
d1.sort(sortfunction)
<script id="source" language="javascript" type="text/javascript">
function sortfunction(a, b){ //data
if (a[0] < b[0]) { var d1 = [[new Date(1358143200000), 3], [new Date(1358229600000), 4], [new Date(1358316000000), 5], [new Date(1358402400000), 11], [new Date(1358488800000), 10], [new Date(1358748000000), 12], [new Date(1358834400000), 13], [new Date(1358920800000), 5], [new Date(1359007200000), 1], [new Date(1359093600000), 2], [new Date(1359352800000), 1], [new Date(1359439200000), 3], [new Date(1359525600000), 2], [new Date(1359612000000), 1], [new Date(1359698400000), 0], [new Date(1359957600000), 0], [new Date(1360044000000), 0], [new Date(1360130400000), 5], [new Date(1360216800000), 3], [new Date(1360303200000), 3], [new Date(1360562400000), 3], [new Date(1360648800000), 21], [new Date(1360735200000), 2]];
return -1; var d2 = [[20, new Date(2000, 1, 1, 10)], [30, new Date(2000, 1, 1, 8)], [50, new Date(2000, 1, 1, 14)], [80, new Date(2000, 1, 1, 22)]];
}
if (a[0] > b[0]) { //general plot options
return 1; var options = {
} series : {
return 0; curvedLines : {
} active : true
}
var options = { },
series : { xaxis : {
curvedLines : { mode : "time",
active : true minTickSize : [1, "hour"]
} },
}, yaxis : {
xaxis : { min : -10,
mode : "time", max : 60
minTickSize : [1, "hour"] }
}, };
yaxis : { var options2 = {
min : -10, series : {
max : 60 curvedLines : {
} active : true
}; }
},
$.plot($("#placeholder"), [{ yaxis : {
data : d1, mode : "time",
lines : { minTickSize : [1, "hour"],
show : true min : (new Date(2000, 1, 1)),
}, max : (new Date(2000, 1, 2))
curvedLines : { },
apply : true, xaxis : {
legacyOverride: true min : 10,
} max : 90
}, { }
data : d1, };
points : {
show : true //curved line paramters
} var defaultParameters = {
}], options); apply : true,
</script> legacyOverride : true
}
<script id="source" language="javascript" type="text/javascript">
var d1 = [[20, new Date(2000, 1, 1, 10)], [30, new Date(2000, 1, 1, 8)], [50, new Date(2000, 1, 1, 14)], [80, new Date(2000, 1, 1, 22)]];
//plot function
var options = { function replot(parameters) {
series : { $.plot($("#placeholder"), [{
curvedLines : { data : d1,
active : true lines : {
} show : true
}, },
yaxis : { curvedLines : parameters
mode : "time", }, {
minTickSize : [1, "hour"], data : d1,
min : (new Date(2000, 1, 1)), points : {
max : (new Date(2000, 1, 2)) show : true
}, }
xaxis : { }], options);
min : 10, }
max : 90
} function replot2(parameters) {
}; $.plot($("#placeholder2"), [{
data : d2,
$.plot($("#placeholder2"), [{ lines : {
data : d1, show : true,
lines : { lineWidth : 3
show : true },
}, curvedLines : parameters
curvedLines : { }, {
apply : true, data : d2,
legacyOverride: true points : {
} show : true
}, { }
data : d1, }], options2);
points : { }
show : true
} //combine everything
}], options); TestSetup($("#parameters"), defaultParameters, [replot, replot2])
</script> </script>
</body>
</body>
</hmtl> </hmtl>
\ No newline at end of file
tests/testExample.htm
View file @ aa088307
...@@ -2,29 +2,64 @@ ...@@ -2,29 +2,64 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="flotOrig" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function () { $(function() {
//data
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var d1 = [[20,20], [42,60], [54, 20], [80,80]]; //general plot options
var options = {
series : {
curvedLines : {
active : true
}
},
axis : {
min : 10,
max : 100
},
yaxis : {
min : 10,
max : 90
}
};
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
var options = { series: { //plot function
curvedLines: { function replot(parameters) {
active: true $.plot($("#placeholder"), [{
} data : d1,
}, lines : {
axis: { min:10, max: 100}, show : true,
yaxis: { min:10, max: 90} lineWidth : 3
}; },
curvedLines : parameters
$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1, points: { show: true }}], options); }, {
data : d1,
points : {
show : true
}
}], options);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
}); });
</script> </script>
</body> </body>
......
tests/testExampleFillMultiAxis.htm
View file @ aa088307
...@@ -2,35 +2,81 @@ ...@@ -2,35 +2,81 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="fillAndMultiAxis" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function () { $(function() {
var d1 = [[20,20], [42,60], [54, 20], [80,80]]; //data
var d2 = [[20,700], [80,300]]; var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var d2 = [[20, 700], [80, 300]];
var options = { series: { //general plot options
curvedLines: { var options = {
active: true series : {
} curvedLines : {
}, active : true
yaxes: [{ min:10, max: 90}, { position: 'right'}] }
}; },
yaxes : [{
min : 10,
max : 90
}, {
position : 'right'
}]
};
$.plot($("#fillAndMultiAxis"), //curved line paramters
[ var defaultParameters = {
{data: d1, lines: { show: true, fill: true, fillColor: "rgba(195, 195, 195, 0.4)", lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1, points: { show: true }}, apply : true,
{data: d2, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}, yaxis:2}, {data: d2, points: { show: true }, yaxis:2} legacyOverride : true
], options); }
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true,
fill : true,
fillColor : "rgba(195, 195, 195, 0.4)",
lineWidth : 3
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}, {
data : d2,
lines : {
show : true,
lineWidth : 3
},
curvedLines : parameters,
yaxis : 2
}, {
data : d2,
points : {
show : true
},
yaxis : 2
}], options);
};
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot]);
}); });
</script> </script>
</body> </body>
</hmtl> </hmtl>
\ No newline at end of file
tests/testExampleFit.htm
View file @ aa088307
...@@ -2,18 +2,24 @@ ...@@ -2,18 +2,24 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="flotFit" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function() { $(function() {
//data
var d1 = [[20, 20], [42, 60], [54, 30], [80, 80]]; var d1 = [[20, 20], [42, 60], [54, 30], [80, 80]];
//general plot options
var options = { var options = {
series : { series : {
curvedLines : { curvedLines : {
...@@ -30,25 +36,33 @@ ...@@ -30,25 +36,33 @@
} }
}; };
$.plot($("#flotFit"), [{ //curved line paramters
data : d1, var defaultParameters = {
lines : { apply : true,
show : true, legacyOverride : {
lineWidth : 3 fit : true,
},
curvedLines:
{
apply: true,
legacyOverride: {
fit : true,
}
}
}, {
data : d1,
points : {
show : true
} }
}], options); }
//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> </script>
</body> </body>
......
tests/testSaddlePoint.htm
View file @ aa088307
...@@ -2,30 +2,65 @@ ...@@ -2,30 +2,65 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="flotOrig" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function () { $(function() {
//data
var d1 = [[20, 20], [25, 40], [27.5, 30], [30, 20], [40, 20]];
var d1 = [[20,20], [25,40], [27.5, 30], [30,20], [40, 20]]; //general plot options
var options = {
series : {
curvedLines : {
active : true,
fit : true
}
},
axis : {
min : 0,
max : 100
},
yaxis : {
min : 10,
max : 45
}
};
var options = { series: { //curved line paramters
curvedLines: { var defaultParameters = {
active: true, apply : true,
fit: true legacyOverride : { fit: true }
} }
},
axis: { min:0, max: 100},
yaxis: { min:10, max: 45}
};
$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1, points: { show: true }}], options); //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> </script>
</body> </body>
......
tests/testSinglePoint.htm
View file @ aa088307
...@@ -6,12 +6,19 @@ ...@@ -6,12 +6,19 @@
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="placeholder" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
//data
var d1 = [[4, 4]]; var d1 = [[4, 4]];
//general plot options
var options = { var options = {
series : { series : {
curvedLines : { curvedLines : {
...@@ -20,21 +27,31 @@ ...@@ -20,21 +27,31 @@
} }
} }
}; };
$.plot($("#placeholder"), [{
data : d1, //curved line paramters
lines : { var defaultParameters = {
show : true apply : true,
}, legacyOverride : true
curvedLines : { }
apply : true,
legacyOverride: true //plot function
} function replot(parameters) {
}, { $.plot($("#placeholder"), [{
data : d1, data : d1,
points : { lines : {
show : true show : true
} },
}], options); curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
</script> </script>
</body> </body>
......
tests/testThreshold.htm
View file @ aa088307
...@@ -2,54 +2,101 @@ ...@@ -2,54 +2,101 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../flot/jquery.flot.threshold.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.threshold.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="flotOrig" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]]; $(function() {
//data
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var options = { //general plot options
series : { var options = {
curvedLines : { series : {
active : true curvedLines : {
active : true
},
threshold : {
below : 40,
color : "rgb(0, 0, 0)"
}
}, },
threshold : { axis : {
below : 40, min : 10,
color : "rgb(0, 0, 0)" max : 100
},
yaxis : {
min : 10,
max : 90
} }
}, };
axis : {
min : 10, //curved line paramters
max : 100 var defaultParameters = {
},
yaxis : {
min : 10,
max : 90
}
};
$.plot($("#flotOrig"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : {
apply : true, apply : true,
legacyOverride: 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);
} }
}, {
data : d1, //combine everything
points : { TestSetup($("#parameters"), defaultParameters, [replot]);
show : true
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position : 'absolute',
display : 'none',
top : y - 32,
left : x,
border : 'none',
padding : '4px',
'background-color' : '#000',
'color' : '#fff',
opacity : 0.80
}).appendTo("body").fadeIn(20);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label[item.dataIndex]);
}
} else {
$("#tooltip").remove();
previousPoint = null;
} }
}], options); });
});
</script> </script>
</body> </body>
......
tests/testTooltip.htm
View file @ aa088307
...@@ -2,19 +2,21 @@ ...@@ -2,19 +2,21 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="placeholder" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
$(function () { $(function () {
//data
var data = [ var data = [
{ {
label: [["Label 1"], ["Label 2"], ["Label 3"]], label: [["Label 1"], ["Label 2"], ["Label 3"]],
...@@ -26,11 +28,31 @@ $(function () { ...@@ -26,11 +28,31 @@ $(function () {
} }
]; ];
var series = [ //general plot options
var options = {
series: {curvedLines : {
active : true,
},
lines: { lineWidth: 5},
points: { radius: 4 }
},
legend: { show: false },
grid: { borderWidth: 2, clickable: true, hoverable: true, autoHighlight: true}
};
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [
{ {
data: data[0].data, data: data[0].data,
label: data[0].label, label: data[0].label,
curvedLines: {apply: true}, curvedLines: defaultParameters,
clickable: false, clickable: false,
hoverable: false hoverable: false
}, },
...@@ -45,25 +67,15 @@ $(function () { ...@@ -45,25 +67,15 @@ $(function () {
lines: {show : true}, lines: {show : true},
points: {show : true} points: {show : true}
} }
]; ], options);
}
//general options
var options = {
series: {curvedLines : {
active : true,
legacyOverride: true
},
lines: { lineWidth: 5},
points: { radius: 4 }
},
legend: { show: false },
grid: { borderWidth: 2, clickable: true, hoverable: true, autoHighlight: true}
};
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot]);
var placeholder = $("#placeholder"); var placeholder = $("#placeholder");
var plot = $.plot(placeholder, series, options);
function showTooltip(x, y, contents) { function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( { $('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute', position: 'absolute',
......
tests/testZeroDrop.htm
View file @ aa088307
...@@ -2,31 +2,65 @@ ...@@ -2,31 +2,65 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title> <title>CurvedLines Plugin for flot</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <!--[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.js"></script> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.js"></script>
<script language="JavaScript" type="text/javascript" src="../curvedLines.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> </head>
<body> <body>
<div id="flotOrig" style="width: 800;height: 400;"></div> <div id="placeholder" style="width: 800;height: 400;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript"> <script id="source" language="javascript" type="text/javascript">
$(function () { $(function() {
//data
var d1 = [[10, 10], [20, -2], [30, -5], [40, 5], [50, -4]];
var d1 = [[10,10], [20,-2], [30, -5], [40,5], [50,-4]]; //general plot options
var options = {
series : {
curvedLines : {
active : true,
}
},
xaxis : {
min : 10,
max : 60
},
yaxis : {
min : 0,
max : 10
}
};
var options = { series: { //curved line paramters
curvedLines: { var defaultParameters = {
active: true, apply : true,
fit: true, legacyOverride : true
zmoothZero: true }
}
},
xaxis: { min:10, max: 60},
yaxis: { min:0, max: 10}
};
$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {data: d1, points: { show: true }}], options); //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> </script>
</body> </body>
......
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