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
Show 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
...@@ -8,157 +8,84 @@ ...@@ -8,157 +8,84 @@
<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: { yaxis : {
panRange: [0, 500], panRange : [0, 500],
ticks: ['0', '70', '130', '180', '200', '300', '400', '500'], ticks : ['0', '70', '130', '180', '200', '300', '400', '500'],
tickLength: 0, tickLength : 0,
tickDecimals: 0 tickDecimals : 0
}, },
pan: { pan : {
interactive: true 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 : {
show : true,
}, },
curvedLines: { curvedLines : parameters
apply: true, }, {
legacyOverride: { data : dataSet,
/*play with parameters (points)*/ points : {
//fitPointDist: 86400, show : true,
//curvePointFactor: 200,
fit: true
}
}, },
color:'#FF0000' curvedLines : parameters
}; }, {
data : dataSet,
var Data = []; points : {
Data.push(dataLinesArray); show : true
/*see virtual points*/ }
//Data.push(dataShowVirtualPoints); }], options);
}
$.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)]);}
...@@ -32,29 +35,37 @@ $(function() { ...@@ -32,29 +35,37 @@ $(function() {
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, },
} }
}); });
function replot(parameters) {
$.plot("#placeholder2", $.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
...@@ -7,26 +7,21 @@ ...@@ -7,26 +7,21 @@
<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>
<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: 300;"></div>
<div id="placeholder2" style="width: 800;height: 400;"></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"> <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]]; //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]];
d1.sort(sortfunction) 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)]];
function sortfunction(a, b){
if (a[0] < b[0]) {
return -1;
}
if (a[0] > b[0]) {
return 1;
}
return 0;
}
//general plot options
var options = { var options = {
series : { series : {
curvedLines : { curvedLines : {
...@@ -42,28 +37,7 @@ ...@@ -42,28 +37,7 @@
max : 60 max : 60
} }
}; };
var options2 = {
$.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 : { series : {
curvedLines : { curvedLines : {
active : true active : true
...@@ -81,23 +55,47 @@ ...@@ -81,23 +55,47 @@
} }
}; };
$.plot($("#placeholder2"), [{ //curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1, data : d1,
lines : { lines : {
show : true show : true
}, },
curvedLines : { curvedLines : parameters
apply : true,
legacyOverride: true
}
}, { }, {
data : d1, data : d1,
points : { points : {
show : true show : true
} }
}], options); }], options);
</script> }
</body> 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> </hmtl>
\ No newline at end of file
tests/testExample.htm
View file @ aa088307
...@@ -6,25 +6,60 @@ ...@@ -6,25 +6,60 @@
<!--[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 = {
var options = { series: { series : {
curvedLines: { curvedLines : {
active: true active : true
} }
}, },
axis: { min:10, max: 100}, axis : {
yaxis: { min:10, max: 90} 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); //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> </script>
</body> </body>
......
tests/testExampleFillMultiAxis.htm
View file @ aa088307
...@@ -6,31 +6,77 @@ ...@@ -6,31 +6,77 @@
<!--[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
...@@ -6,14 +6,20 @@ ...@@ -6,14 +6,20 @@
<!--[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
var defaultParameters = {
apply : true,
legacyOverride : {
fit : true,
}
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1, data : d1,
lines : { lines : {
show : true, show : true,
lineWidth : 3 lineWidth : 3
}, },
curvedLines: curvedLines : parameters
{
apply: true,
legacyOverride: {
fit : true,
}
}
}, { }, {
data : d1, data : d1,
points : { points : {
show : true show : true
} }
}], options); }], options);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
}); });
</script> </script>
</body> </body>
......
tests/testSaddlePoint.htm
View file @ aa088307
...@@ -6,26 +6,61 @@ ...@@ -6,26 +6,61 @@
<!--[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 }
} }
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
}, },
axis: { min:0, max: 100}, curvedLines: parameters
yaxis: { min:10, max: 45} }, {
data : d1,
points : {
show : true
}
}], options);
}; };
$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true, legacyOverride: true}}, {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 @@
} }
} }
}; };
//curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{ $.plot($("#placeholder"), [{
data : d1, data : d1,
lines : { lines : {
show : true show : true
}, },
curvedLines : { curvedLines : parameters
apply : true,
legacyOverride: true
}
}, { }, {
data : d1, data : d1,
points : { points : {
show : true show : true
} }
}], options); }], options);
}
//combine everything
TestSetup($("#parameters"), defaultParameters, [replot])
</script> </script>
</body> </body>
......
tests/testThreshold.htm
View file @ aa088307
...@@ -7,13 +7,19 @@ ...@@ -7,13 +7,19 @@
<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">
$(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 = { var options = {
series : { series : {
curvedLines : { curvedLines : {
...@@ -34,22 +40,63 @@ ...@@ -34,22 +40,63 @@
} }
}; };
$.plot($("#flotOrig"), [{ //curved line paramters
var defaultParameters = {
apply : true,
legacyOverride : true
}
//plot function
function replot(parameters) {
$.plot($("#placeholder"), [{
data : d1, data : d1,
lines : { lines : {
show : true, show : true,
lineWidth : 3 lineWidth : 3
}, },
curvedLines : { curvedLines : parameters
apply : true,
legacyOverride: true
}
}, { }, {
data : d1, data : d1,
points : { points : {
show : true show : true
} }
}], options); }], options);
}
//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;
}
});
});
</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,24 +67,14 @@ $(function () { ...@@ -45,24 +67,14 @@ $(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}
};
var placeholder = $("#placeholder"); //combine everything
TestSetup($("#parameters"), defaultParameters, [replot]);
var plot = $.plot(placeholder, series, options); var placeholder = $("#placeholder");
function showTooltip(x, y, contents) { function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( { $('<div id="tooltip">' + contents + '</div>').css( {
......
tests/testZeroDrop.htm
View file @ aa088307
...@@ -6,27 +6,61 @@ ...@@ -6,27 +6,61 @@
<!--[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 = {
var options = { series: { series : {
curvedLines: { curvedLines : {
active: true, active : true,
fit: true,
zmoothZero: true
} }
}, },
xaxis: { min:10, max: 60}, xaxis : {
yaxis: { min:0, max: 10} 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); //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> </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