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 @@
function calculateLegacyCurvePoints(datapoints, curvedLinesOptions, yPos) {
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 ydata = new Array;
......@@ -200,7 +200,7 @@
//x range / (estimated pixel length of placeholder * factor)
} else {
//use user defined value
fpDist = curvedLinesOptions.fitPointDist;
fpDist = Number(curvedLinesOptions.fitPointDist);
}
for (var i = 0; i < points.length; i += ps) {
......
tests/Issue18.htm
View file @ aa088307
......@@ -2,163 +2,90 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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.navigate.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 () {
$(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 = {
series: {
curvedLines: {
active: true
series : {
curvedLines : {
active : true
}
},
xaxis: {
mode: "time",
tickSize: [1, "day"],
timezone: "browser",
timeformat: "%m/%d%a",
min: 1393396200000,
max: 1394073000000,
tickLength: 0,
panRange: [1378809000000, 1394505000000],
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
xaxis : {
mode : "time",
tickSize : [1, "day"],
timezone : "browser",
timeformat : "%m/%d%a",
min : 1393396200000,
max : 1394073000000,
tickLength : 0,
panRange : [1378809000000, 1394505000000],
dayNames : ["S", "M", "T", "W", "T", "F", "S"]
},
pan: {
interactive: true
yaxis : {
panRange : [0, 500],
ticks : ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength : 0,
tickDecimals : 0
},
pan : {
interactive : true
}
}
var dataSet = [
[1385490600000, 150],
[1386009000000, 450],
[1392834600000, 444],
[1393266600000, 100],
[1393353000000, 147],
[1393439400000, 105],
[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'
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : {
fitPointDist : 86400,
curvePointFactor : 40,
fit : true
}
};
var dataShowVirtualPoints = {
data: dataSet,
points: {
show: true
},
curvedLines: {
apply: true,
legacyOverride: {
/*play with parameters (points)*/
//fitPointDist: 86400,
//curvePointFactor: 200,
fit: true
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : dataSet,
lines : {
show : true,
},
curvedLines : parameters
}, {
data : dataSet,
points : {
show : true,
},
curvedLines : parameters
}, {
data : dataSet,
points : {
show : true
}
},
color:'#FF0000'
};
var Data = [];
Data.push(dataLinesArray);
/*see virtual points*/
//Data.push(dataShowVirtualPoints);
}], options);
}
$.plot("#placeholder", Data, options);
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
});
</script>
</body>
</hmtl>
\ No newline at end of file
tests/Issue19.htm
View file @ aa088307
......@@ -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.navigate.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 class="demo-container">
<div id="placeholder" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
<div id="placeholder2" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
</div>
<div id="placeholder" style="height: 300px; width: 600px;"></div>
<div id="placeholder2" style="height: 300px; width: 600px;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript">
$(function() {
//data
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);}
......@@ -31,30 +34,38 @@ $(function() {
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);}
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : {fit: true}
}
//plot function
$.plot("#placeholder", [ d1, d2, d3 ], {
series: { stack: 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: d2, lines: { show: true, fill: true }, stack: true, curvedLines: {apply: true}},
{data: d3, 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: parameters},
{data: d3, lines: { show: true, fill: true }, stack: true, curvedLines: parameters},
],
{
{
series: {
curvedLines: {
active: true,
apply: true,
legacyOverride : { fit: true }
curvedLines: {
active: 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<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]-->
<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="../curvedLines.js"></script>
</head>
<body>
<div id="placeholder" style="width: 800;height: 400;"></div>
<div id="placeholder2" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
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]];
d1.sort(sortfunction)
function sortfunction(a, b){
if (a[0] < b[0]) {
return -1;
}
if (a[0] > b[0]) {
return 1;
}
return 0;
}
var options = {
series : {
curvedLines : {
active : true
}
},
xaxis : {
mode : "time",
minTickSize : [1, "hour"]
},
yaxis : {
min : -10,
max : 60
}
};
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true
},
curvedLines : {
apply : true,
legacyOverride: true
}
}, {
data : d1,
points : {
show : true
}
}], options);
</script>
<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)]];
var options = {
series : {
curvedLines : {
active : true
}
},
yaxis : {
mode : "time",
minTickSize : [1, "hour"],
min : (new Date(2000, 1, 1)),
max : (new Date(2000, 1, 2))
},
xaxis : {
min : 10,
max : 90
}
};
$.plot($("#placeholder2"), [{
data : d1,
lines : {
show : true
},
curvedLines : {
apply : true,
legacyOverride: true
}
}, {
data : d1,
points : {
show : true
}
}], options);
</script>
</body>
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<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]-->
<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="../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: 300;"></div>
<div id="placeholder2" style="width: 800;height: 300;"></div>
<div id="parameters" style="width: 800"></div>
<script id="source" language="javascript" type="text/javascript">
//data
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]];
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)]];
//general plot options
var options = {
series : {
curvedLines : {
active : true
}
},
xaxis : {
mode : "time",
minTickSize : [1, "hour"]
},
yaxis : {
min : -10,
max : 60
}
};
var options2 = {
series : {
curvedLines : {
active : true
}
},
yaxis : {
mode : "time",
minTickSize : [1, "hour"],
min : (new Date(2000, 1, 1)),
max : (new Date(2000, 1, 2))
},
xaxis : {
min : 10,
max : 90
}
};
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}
function replot2(parameters) {
$.plot($("#placeholder2"), [{
data : d2,
lines : {
show : true,
lineWidth : 3
},
curvedLines : parameters
}, {
data : d2,
points : {
show : true
}
}], options2);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot, replot2])
</script>
</body>
</hmtl>
\ No newline at end of file
tests/testExample.htm
View file @ aa088307
......@@ -2,29 +2,64 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<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">
$(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: {
curvedLines: {
active: true
}
},
axis: { min:10, max: 100},
yaxis: { min:10, max: 90}
};
$.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>
</body>
......
tests/testExampleFillMultiAxis.htm
View file @ aa088307
......@@ -2,35 +2,81 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<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">
$(function () {
<script id="source" language="javascript" type="text/javascript">
$(function() {
var d1 = [[20,20], [42,60], [54, 20], [80,80]];
var d2 = [[20,700], [80,300]];
//data
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var d2 = [[20, 700], [80, 300]];
var options = { series: {
curvedLines: {
active: true
}
},
yaxes: [{ min:10, max: 90}, { position: 'right'}]
};
//general plot options
var options = {
series : {
curvedLines : {
active : true
}
},
yaxes : [{
min : 10,
max : 90
}, {
position : 'right'
}]
};
$.plot($("#fillAndMultiAxis"),
[
{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 }},
{data: d2, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}, yaxis:2}, {data: d2, points: { show: true }, yaxis:2}
], options);
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//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>
</body>
</hmtl>
\ No newline at end of file
tests/testExampleFit.htm
View file @ aa088307
......@@ -2,18 +2,24 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css">
</link>
</head>
<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">
$(function() {
//data
var d1 = [[20, 20], [42, 60], [54, 30], [80, 80]];
//general plot options
var options = {
series : {
curvedLines : {
......@@ -30,25 +36,33 @@
}
};
$.plot($("#flotFit"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines:
{
apply: true,
legacyOverride: {
fit : true,
}
}
}, {
data : d1,
points : {
show : true
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : {
fit : 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>
</body>
......
tests/testSaddlePoint.htm
View file @ aa088307
......@@ -2,30 +2,65 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
</head>
<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">
$(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: {
curvedLines: {
active: true,
fit: true
}
},
axis: { min:0, max: 100},
yaxis: { min:10, max: 45}
};
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : { fit: true }
}
$.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>
</body>
......
tests/testSinglePoint.htm
View file @ aa088307
......@@ -6,12 +6,19 @@
<!--[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="../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">
//data
var d1 = [[4, 4]];
//general plot options
var options = {
series : {
curvedLines : {
......@@ -20,21 +27,31 @@
}
}
};
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true
},
curvedLines : {
apply : true,
legacyOverride: true
}
}, {
data : d1,
points : {
show : true
}
}], options);
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true
},
curvedLines : parameters
}, {
data : d1,
points : {
show : true
}
}], options);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
</script>
</body>
......
tests/testThreshold.htm
View file @ aa088307
......@@ -2,54 +2,101 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="../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="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">
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
$(function() {
//data
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var options = {
series : {
curvedLines : {
active : true
//general plot options
var options = {
series : {
curvedLines : {
active : true
},
threshold : {
below : 40,
color : "rgb(0, 0, 0)"
}
},
threshold : {
below : 40,
color : "rgb(0, 0, 0)"
axis : {
min : 10,
max : 100
},
yaxis : {
min : 10,
max : 90
}
},
axis : {
min : 10,
max : 100
},
yaxis : {
min : 10,
max : 90
}
};
$.plot($("#flotOrig"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : {
};
//curved line paramters
var defaultParameters = {
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,
points : {
show : true
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot]);
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>
</body>
......
tests/testTooltip.htm
View file @ aa088307
......@@ -2,19 +2,21 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.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]-->
<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="_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 language="javascript" type="text/javascript">
$(function () {
//data
var data = [
{
label: [["Label 1"], ["Label 2"], ["Label 3"]],
......@@ -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,
label: data[0].label,
curvedLines: {apply: true},
curvedLines: defaultParameters,
clickable: false,
hoverable: false
},
......@@ -45,25 +67,15 @@ $(function () {
lines: {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 plot = $.plot(placeholder, series, options);
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
......
tests/testZeroDrop.htm
View file @ aa088307
......@@ -2,31 +2,65 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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]-->
<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="_TestSetup.js"></script>
<link rel="stylesheet" type="text/css" href="_TestSetup.css">
</link>
</head>
<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">
$(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: {
curvedLines: {
active: true,
fit: true,
zmoothZero: true
}
},
xaxis: { min:10, max: 60},
yaxis: { min:0, max: 10}
};
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
$.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>
</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