diff --git a/example.js b/example.js deleted file mode 100644 index 7caf215..0000000 --- a/example.js +++ /dev/null @@ -1,18 +0,0 @@ -$(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); -}); \ No newline at end of file diff --git a/exampleFillMultiAxis.js b/exampleFillMultiAxis.js deleted file mode 100644 index 54637bf..0000000 --- a/exampleFillMultiAxis.js +++ /dev/null @@ -1,22 +0,0 @@ - $(function () { - - //
- - 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 diff --git a/exampleFillMultiAxis.txt b/exampleFillMultiAxis.txt new file mode 100644 index 0000000..9156b25 --- /dev/null +++ b/exampleFillMultiAxis.txt @@ -0,0 +1,49 @@ +### html ### + +

CurvedLines with multi axis and fill

+
+ +### 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 diff --git a/exampleFit.js b/exampleFit.js deleted file mode 100644 index af1c371..0000000 --- a/exampleFit.js +++ /dev/null @@ -1,17 +0,0 @@ -$(function () { - - //
- - 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 diff --git a/exampleFit.txt b/exampleFit.txt new file mode 100644 index 0000000..687c50c --- /dev/null +++ b/exampleFit.txt @@ -0,0 +1,50 @@ +### html ### + +

CurvedLines: with standard settings (shows effects of tension parameter)

+
+ +

CurvedLines: with monotonicFit (no overshooting/wiggles)

+
+ +### 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 diff --git a/exampleFlotWithDates.js b/exampleFlotWithDates.js deleted file mode 100644 index 8772766..0000000 --- a/exampleFlotWithDates.js +++ /dev/null @@ -1,39 +0,0 @@ -$(function() { - - //
- - 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); -}); diff --git a/exampleHelperPoints.txt b/exampleHelperPoints.txt new file mode 100644 index 0000000..59f3cd9 --- /dev/null +++ b/exampleHelperPoints.txt @@ -0,0 +1,53 @@ +### html ### + +

CurvedLines: random data points

+
+ +

CurvedLines: internally created helper points

+
+ +### 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 diff --git a/exampleStackedData.txt b/exampleStackedData.txt new file mode 100644 index 0000000..b52c106 --- /dev/null +++ b/exampleStackedData.txt @@ -0,0 +1,53 @@ +### html ### + +

CurvedLines: random stacked data

+
+ +

CurvedLines: same data connected with curved lines

+
+ +### 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 diff --git a/exampleThreshold.js b/exampleThreshold.js deleted file mode 100644 index 0dbb9d6..0000000 --- a/exampleThreshold.js +++ /dev/null @@ -1,19 +0,0 @@ -$(function () { - - //
- - - 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 diff --git a/tests/testSaddlePoint.htm b/tests/testSaddlePoint.htm index 8520dde..fde44c4 100644 --- a/tests/testSaddlePoint.htm +++ b/tests/testSaddlePoint.htm @@ -23,7 +23,6 @@ series : { curvedLines : { active : true, - fit : true } }, axis : { diff --git a/tests/testSinglePoint.htm b/tests/testSinglePoint.htm index b2b2a98..68c2864 100644 --- a/tests/testSinglePoint.htm +++ b/tests/testSinglePoint.htm @@ -22,9 +22,7 @@ var options = { series : { curvedLines : { - active : true, - fit : true - } + active : true } } };