github-mirrors
/
MichaelZinsmaier-CurvedLines
mirror of https://github.com/MichaelZinsmaier/CurvedLines.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

adding some simple test sites and flot.threshold.js

Browse Source
pull/13/merge
MichaelZinsmaier 13 years ago
parent 60aab762e5
commit 97c289137f
8 changed files with 445 additions and 0 deletions
Show Stats Download Patch File Download Diff File

103
flot/jquery.flot.threshold.js
Unescape Escape View File

@ -0,0 +1,103 @@
/*
Flot plugin for thresholding data. Controlled through the option
"threshold" in either the global series options
series: {
threshold: {
below: number
color: colorspec
}
}
or in a specific series
$.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
The data points below "below" are drawn with the specified color. This
makes it easy to mark points below 0, e.g. for budget data.
Internally, the plugin works by splitting the data into two series,
above and below the threshold. The extra series below the threshold
will have its label cleared and the special "originSeries" attribute
set to the original series. You may need to check for this in hover
events.
*/
(function ($) {
var options = {
series: { threshold: null } // or { below: number, color: color spec}
};
function init(plot) {
function thresholdData(plot, s, datapoints) {
if (!s.threshold)
return;
var ps = datapoints.pointsize, i, x, y, p, prevp,
thresholded = $.extend({}, s); // note: shallow copy
thresholded.datapoints = { points: [], pointsize: ps };
thresholded.label = null;
thresholded.color = s.threshold.color;
thresholded.threshold = null;
thresholded.originSeries = s;
thresholded.data = [];
var below = s.threshold.below,
origpoints = datapoints.points,
addCrossingPoints = s.lines.show;
threspoints = [];
newpoints = [];
for (i = 0; i < origpoints.length; i += ps) {
x = origpoints[i]
y = origpoints[i + 1];
prevp = p;
if (y < below)
p = threspoints;
else
p = newpoints;
if (addCrossingPoints && prevp != p && x != null
&& i > 0 && origpoints[i - ps] != null) {
var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
prevp.push(interx);
prevp.push(below);
for (m = 2; m < ps; ++m)
prevp.push(origpoints[i + m]);
p.push(null); // start new segment
p.push(null);
for (m = 2; m < ps; ++m)
p.push(origpoints[i + m]);
p.push(interx);
p.push(below);
for (m = 2; m < ps; ++m)
p.push(origpoints[i + m]);
}
p.push(x);
p.push(y);
}
datapoints.points = newpoints;
thresholded.datapoints.points = threspoints;
if (thresholded.datapoints.points.length > 0)
plot.getData().push(thresholded);
// FIXME: there are probably some edge cases left in bars
}
plot.hooks.processDatapoints.push(thresholdData);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'threshold',
version: '1.0'
});
})(jQuery);

100
tests/testDate.htm
Unescape Escape View File

@ -0,0 +1,100 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</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,
}
}, {
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,
}
}, {
data : d1,
points : {
show : true
}
}], options);
</script>
</body>
</hmtl>

32
tests/testExample.htm
Unescape Escape View File

@ -0,0 +1,32 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="flotOrig" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 = [[20,20], [42,60], [54, 20], [80,80]];
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}}, {data: d1, points: { show: true }}], options);
});
</script>
</body>
</hmtl>

36
tests/testExampleFillMultiAxis.htm
Unescape Escape View File

@ -0,0 +1,36 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="fillAndMultiAxis" style="width: 800;height: 400;"></div>
<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]];
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}}, {data: d1, points: { show: true }},
{data: d2, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}, yaxis:2}, {data: d2, points: { show: true }, yaxis:2}
], options);
});
</script>
</body>
</hmtl>

52
tests/testExampleFit.htm
Unescape Escape View File

@ -0,0 +1,52 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="flotFit" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function() {
var d1 = [[20, 20], [42, 60], [54, 30], [80, 80]];
var options = {
series : {
curvedLines : {
active : true
}
},
xaxis : {
min : 10,
max : 100
},
yaxis : {
min : -20,
max : 120
}
};
$.plot($("#flotFit"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines: {apply: true,
fit : true,
}
}, {
data : d1,
points : {
show : true
}
}], options);
});
</script>
</body>
</hmtl>

33
tests/testSaddlePoint.htm
Unescape Escape View File

@ -0,0 +1,33 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="flotOrig" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 = [[20,20], [25,40], [27.5, 30], [30,20], [40, 20]];
var options = { series: {
curvedLines: {
active: true,
fit: true
}
},
axis: { min:0, max: 100},
yaxis: { min:10, max: 45}
};
$.plot($("#flotOrig"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply: true}}, {data: d1, points: { show: true }}], options);
});
</script>
</body>
</hmtl>

55
tests/testThreshold.htm
Unescape Escape View File

@ -0,0 +1,55 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="flotOrig" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]];
var options = {
series : {
curvedLines : {
active : true
},
threshold : {
below : 40,
color : "rgb(0, 0, 0)"
}
},
axis : {
min : 10,
max : 100
},
yaxis : {
min : 10,
max : 90
}
};
$.plot($("#flotOrig"), [{
data : d1,
lines : {
show : true,
lineWidth : 3
},
curvedLines : {
apply : true
}
}, {
data : d1,
points : {
show : true
}
}], options);
</script>
</body>
</hmtl>

34
tests/testZeroDrop.htm
Unescape Escape View File

@ -0,0 +1,34 @@
<hmtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CurvedLines Plugin for flot</title>
<script type="text/javascript" src="../jquery-1.8.3.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>
</head>
<body>
<div id="flotOrig" style="width: 800;height: 400;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 = [[10,10], [20,-2], [30, -5], [40,5], [50,-4]];
var options = { series: {
curvedLines: {
active: true,
fit: 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}}, {data: d1, points: { show: true }}], options);
});
</script>
</body>
</hmtl>
Write Preview
Loading…
Cancel
Save