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

added new examples, removed old examples and fixed two tests that still used old parameters

Browse Source
pull/27/head
Michael Zinsmaier 11 years ago
parent 44d37d7d12
commit 8c38167538
11 changed files with 206 additions and 119 deletions
Show Stats Download Patch File Download Diff File

18
example.js
Unescape Escape View File

@ -1,18 +0,0 @@
$(function () {
//<div id="flotOrig" style="width: 800px;height: 400px;"></div>
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);
});

22
exampleFillMultiAxis.js
Unescape Escape View File

@ -1,22 +0,0 @@
$(function () {
//<div id="fillAndMultiAxis" style="width: 800px;height: 400px;"></div>
var d1 = [[20,20], [42,60], [54, 20], [80,80]];
var d2 = [[20,700], [80,300]];
var options = { series: {
curvedLines: {
active: true
}
},
axis: { min:10, max: 100},
yaxes: [{ min:10, max: 90}, { position: 'right'}]
};
$.plot($("#fillAndMultiAxis"),
[
{data: d1, lines: { show: true, fill: true, fillColor: "#C3C3C3", 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);
});

49
exampleFillMultiAxis.txt
Unescape Escape View File

@ -0,0 +1,49 @@
### html ###
<h4>CurvedLines with multi axis and fill</h4>
<div id="flotContainer" class="chart-style"></div>
### css ###
.chart-style {
width: 500px;
height: 300px;
}
### javascript ###
//data
var d1 = [[20,20], [42,60], [54, 20], [80,80]];
var d2 = [[20,700], [80,300]];
//flot options
var options = {
series: {
curvedLines: {active: true}
},
yaxes: [{ min:10, max: 90}, {position: 'right'}]
};
//plotting
$.plot($("#flotContainer"),[
{
data: d1,
lines: { show: true, fill: true, fillColor: "#C3C3C3", lineWidth: 3},
//curve the line (old pre 1.0.0 plotting function)
curvedLines: {
apply: true,
legacyOverride: true // <- use legacy plotting function
}
}, {
data: d1,
points: { show: true }
}, {
data: d2,
yaxis: 2,
lines: { show: true, lineWidth: 3},
}, {
data: d2,
yaxis: 2,
points: { show: true }
}
], options);

17
exampleFit.js
Unescape Escape View File

@ -1,17 +0,0 @@
$(function () {
//<div id="flotFit" style="width: 800px;height: 400px;"></div>
var d1 = [[20,20], [42,60], [54, 30], [80,80]];
var options = { series: {
curvedLines: {
active: true
}
},
xaxis: { min:10, max: 100},
yaxis: { min:10, max: 90}
};
$.plot($("#flotFit"), [{data: d1, lines: { show: true, lineWidth: 3}, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}, {data: d1, points: { show: true }}], options);
});

50
exampleFit.txt
Unescape Escape View File

@ -0,0 +1,50 @@
### html ###
<h4>CurvedLines: with standard settings (shows effects of tension parameter)</h4>
<div id="flotContainer" class="chart-style"></div>
<h4>CurvedLines: with monotonicFit (no overshooting/wiggles) </h4>
<div id="flotContainer2" class="chart-style"></div>
### css ###
.chart-style {
width: 400px;
height: 240px;
}
### javascript ###
//data
var d1 = [[20, 20], [25, 50], [27.5, 35], [30, 20], [35, 20]];
//flot options
var options = {
series: {
curvedLines: {active: true}
}
};
//plotting
$.plot($("#flotContainer"),[
{
data: d1, color: '#2b8cbe',
lines: {show: true, lineWidth: 3},
//choose tension from [0,1] to see overshooting effects (0.5 is default)
curvedLines: {apply: true, tension: 1}
}, {
data: d1, color: '#f03b20',
points: {show: true}
}
], options);
$.plot($("#flotContainer2"),[
{
data: d1, color: '#2b8cbe',
lines: {show: true, lineWidth: 3},
//monotonicFit enforces monotonicity
curvedLines: {apply: true, monotonicFit: true}
}, {
data: d1, color: '#f03b20',
points: {show: true}
}
], options);

39
exampleFlotWithDates.js
Unescape Escape View File

@ -1,39 +0,0 @@
$(function() {
//<div id="exampleFlotWithDates" style="width: 800px;height: 400px;"></div>
var d1 = [[new Date(2000, 8, 1, 10), 20], [new Date(2000, 8, 1, 12), 60], [new Date(2000, 8, 1, 14), 30], [new Date(2000, 8, 1, 22), 80]];
var options = {
series : {
curvedLines : {
active : true
}
},
xaxis : {
mode : "time",
minTickSize : [1, "hour"],
min : (new Date(2000, 8, 1)),
max : (new Date(2000, 8, 2))
},
yaxis : {
min : 10,
max : 90
}
};
$.plot($("#exampleFlotWithDates"), [{
data : d1,
lines : {
show : true
},
curvedLines : {
apply : true,
}
}, {
data : d1,
points : {
show : true
}
}], options);
});

53
exampleHelperPoints.txt
Unescape Escape View File

@ -0,0 +1,53 @@
### html ###
<h4>CurvedLines: random data points </h4>
<div id="flotContainer" class="chart-style"></div>
<h4>CurvedLines: internally created helper points</h4>
<div id="flotContainer2" class="chart-style"></div>
### css ###
.chart-style {
width: 600px;
height: 260px;
}
### javascript ###
//random data
var d1 = []; var last = 0;
for (var i = 0; i <= 40; i += (2 + parseInt(Math.random() * 5))) {
last = last + ((Math.random() * 3) - 1.5)
d1.push([i, parseInt(last)]);
}
//flot options
var options = {
series: {
curvedLines: {
active: true,
nrSplinePoints: 20 // <- control nr of helper points
} // between two poins
}
};
//plotting
$.plot($("#flotContainer"),[
{ //curved line
data: d1,
lines: {show: true, lineWidth: 3},
curvedLines: {apply: true } // <- curve line
}, { //original data points
data: d1,
points: {show: true}
}
], options);
$.plot($("#flotContainer2"),[
{ // <- helper points that are used to curve the lines
data: d1,
color: '#CC0000',
points: {show: true},
curvedLines: {apply: true} //<- "curve" points
}
], options);

53
exampleStackedData.txt
Unescape Escape View File

@ -0,0 +1,53 @@
### html ###
<h4>CurvedLines: random stacked data</h4>
<div id="flotContainer" class="chart-style"></div>
<h4>CurvedLines: same data connected with curved lines</h4>
<div id="flotContainer2" class="chart-style"></div>
### css ###
.chart-style {
width: 600px;
height: 260px;
}
### javascript ###
//random data
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
//flot options
var options = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
}
}
};
//plotting
$.plot($("#flotContainer"), [
{data: d1, lines: { show: true, fill: true }, stack: true },
{data: d2, lines: { show: true, fill: true }, stack: true },
{data: d3, lines: { show: true, fill: true }, stack: true }
], {});
$.plot($("#flotContainer2"), [
{data: d1, lines: { show: true, fill: true }, stack: true },
{data: d2, lines: { show: true, fill: true }, stack: true },
{data: d3, lines: { show: true, fill: true }, stack: true }
], options);

19
exampleThreshold.js
Unescape Escape View File

@ -1,19 +0,0 @@
$(function () {
//<div id="flotOrig" style="width: 800px;height: 400px;"></div>
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);
});

1
tests/testSaddlePoint.htm
Unescape Escape View File

@ -23,7 +23,6 @@
series : {
curvedLines : {
active : true,
fit : true
}
},
axis : {

4
tests/testSinglePoint.htm
Unescape Escape View File

@ -22,9 +22,7 @@
var options = {
series : {
curvedLines : {
active : true,
fit : true
}
active : true }
}
};

Write Preview
Loading…
Cancel
Save