Skip to content

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

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

parent 44d37d7d
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 119 deletions
example.js deleted 100644 → 0
View file @ 44d37d7d
$(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);
});
\ No newline at end of file
exampleFillMultiAxis.js deleted 100644 → 0
View file @ 44d37d7d
$(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);
});
\ No newline at end of file
exampleFillMultiAxis.txt 0 → 100644
View file @ 8c381675
### 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);
\ No newline at end of file
exampleFit.js deleted 100644 → 0
View file @ 44d37d7d
$(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);
});
\ No newline at end of file
exampleFit.txt 0 → 100644
View file @ 8c381675
### 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);
\ No newline at end of file
exampleFlotWithDates.js deleted 100644 → 0
View file @ 44d37d7d
$(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);
});
exampleHelperPoints.txt 0 → 100644
View file @ 8c381675
### 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);
\ No newline at end of file
exampleStackedData.txt 0 → 100644
View file @ 8c381675
### 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);
\ No newline at end of file
exampleThreshold.js deleted 100644 → 0
View file @ 44d37d7d
$(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);
});
\ No newline at end of file
tests/testSaddlePoint.htm
View file @ 8c381675
......@@ -23,7 +23,6 @@
series : {
curvedLines : {
active : true,
fit : true
}
},
axis : {
......
tests/testSinglePoint.htm
View file @ 8c381675
......@@ -22,9 +22,7 @@
var options = {
series : {
curvedLines : {
active : true,
fit : true
}
active : true }
}
};
......
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