From 8c38167538dded915808c9864d1960add81db8ce Mon Sep 17 00:00:00 2001 From: Michael Zinsmaier Date: Sat, 6 Dec 2014 16:58:26 +0100 Subject: [PATCH] added new examples, removed old examples and fixed two tests that still used old parameters --- example.js | 18 ------------- exampleFillMultiAxis.js | 22 ---------------- exampleFillMultiAxis.txt | 49 ++++++++++++++++++++++++++++++++++++ exampleFit.js | 17 ------------- exampleFit.txt | 50 ++++++++++++++++++++++++++++++++++++ exampleFlotWithDates.js | 39 ---------------------------- exampleHelperPoints.txt | 53 +++++++++++++++++++++++++++++++++++++++ exampleStackedData.txt | 53 +++++++++++++++++++++++++++++++++++++++ exampleThreshold.js | 19 -------------- tests/testSaddlePoint.htm | 1 - tests/testSinglePoint.htm | 4 +-- 11 files changed, 206 insertions(+), 119 deletions(-) delete mode 100644 example.js delete mode 100644 exampleFillMultiAxis.js create mode 100644 exampleFillMultiAxis.txt delete mode 100644 exampleFit.js create mode 100644 exampleFit.txt delete mode 100644 exampleFlotWithDates.js create mode 100644 exampleHelperPoints.txt create mode 100644 exampleStackedData.txt delete mode 100644 exampleThreshold.js 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 } } };