Compare commits

...

13 Commits

Author SHA1 Message Date
Michael 22ed1fc2a6 Addapted package.json
there are a view tests but only with manual verification (-:
9 years ago
Michael 4b026c2e15 Merge pull request #36 from foaly-nr1/patch-package-json
Add package.json
9 years ago
foaly-nr1 e735e4155f Add package.json 9 years ago
Michael ca1f21371f Update README.md
added fallback script to the readme
10 years ago
Michael a6ece05f5d Updated Readme
including some notes about CDNs and versions
10 years ago
Michael Zinsmaier 2fb652f823 changed the examples to depend on online scripts. Before it was a mixture of offline and online. 11 years ago
Michael Zinsmaier 958e2b240c added one new example (mixed series / settings / styles) to the project 11 years ago
Michael fc094c039e Update README.md
added a new example
11 years ago
Michael e8fd1fc8e3 Merge pull request #27 from kenirwin/examples
Added examples directory with html files for the jsfiddle examples
11 years ago
Michael 1f1c84374c Update README.md
added the requirement for ordered data to the readme
11 years ago
Ken Irwin d60f9303b1 added example html files 11 years ago
Ken Irwin 3c4d8dd436 added flot (0.8.3) to examples/js directory 11 years ago
Ken Irwin 2bff8d3cb5 added gitignore file 11 years ago

1
.gitignore vendored

@ -0,0 +1 @@
*~

@ -24,11 +24,17 @@ The old fit option has been replaced with monotonicFit, which if set, enforces t
http://jsfiddle.net/p55d7bk8/2/ <- random data example <br>
http://jsfiddle.net/yqsb8mdc/2/ <- nrSplinePoints parameter <br>
http://jsfiddle.net/jd9q53fw/2/ <- fit parameters <br>
https://jsfiddle.net/L0kgfytv/ <- advanced usage <br>
http://jsfiddle.net/n0600qo4/2/ <- legacy example <br>
* * * * * * * * * * * * * * * * * * * * * * * *
how to use it:
* * * * * * * * * * * * * * * * * * * * * * * *
##### Data: #####
CurvedLines assumes x<sub>i</sub> < x<sub>i+1</sub> that is x values must be ordered from smallest to largest and must be unique.
##### Config: ######
```
... lines: { show: true},
curvedLines: {
@ -47,6 +53,22 @@ The old fit option has been replaced with monotonicFit, which if set, enforces t
| tension | double | [0,1] defines the tension parameter of the hermite spline interpolation (only if monotonicFit = false) |
| nrSplinePoints | int | defines the number of sample points (of the spline) in between two consecutive points |
##### Versioning and Linking #####
CurvedLines is listed at [bower.io](http://bower.io/search/?q=flot.curvedlines). Releases are marked in GitHub
The following snippet uses RawGit as CDN to include CurvedLines and loads a local copy as fallback.
**Before copy pasting this please check the terms and conditions at [RawGit](https://rawgit.com/)!**
````
<script src="https://cdn.rawgit.com/MichaelZinsmaier/CurvedLines/1.1.1/curvedLines.js"></script>
<script>
$.plot.plugins.find(function(element){return element.name == "curvedLines"}) ||
document.write('<script src="[server_local_copy]"><\/script>');
</script>
````
### deprecated pre 1.0.0 plotting ###
* * * * * * * * * * * * * * * * * * * * * * * *

@ -0,0 +1,70 @@
### html ###
<h4>CurvedLines: customizing and mixing</h4>
<div class="text-block"> <span id="hoverText">point at: - / -</span>
</div>
<div id="flotContainer" class="chart-style"></div>
<div class="text-block">The example shows two datasets (d1, d2) plotted using different styles (curved line, points, bigger points). The points are hoverable, the curved line is not.</div>
<div class="text-block">To achieve such mixed plots you have to define some settings on a per series level. In the example the curved line plugin is generally set to active (as default in the options object) but will be applied only to the first series. Similarly hovering is deactivated for the first series. The combination of "replotting" (series 1 and 2 both origin form dataset d1) and per series settings allows you to mix different plotting styles and settings in one canvas.</div>
### css ###
.chart-style {
width: 600px;
height: 340px;
margin-bottom: 15px;
}
.text-block {
margin-bottom: 15px;
}
### javascript ###
//some 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)]);
}
var d2 = [];
for (var i = 2; i <= $(d1).get(-1)[0]; i += (2 + parseInt(Math.random() * 5))) {
d2.push([i, parseInt(Math.random() * 8)]);
}
//default flot options
var options = {
series: { curvedLines: { active: true } },
grid: { hoverable: true } // <- generally activate hover
};
//plotting with per series adjustments
$.plot($("#flotContainer"), [
{ //series 1
data: d1,
lines: { show: true, lineWidth: 3 },
hoverable: false, // <- overwrite hoverable with false
curvedLines: {
apply: true // <- set apply <- curve only this data series
}
}, { //series 2
data: d1,
points: { show: true }
}, { //series 3
data: d2,
points: { show: true, radius: 5 }
}], options);
//adding hover text
$("#flotContainer").bind("plothover", function (event, pos, item) {
if (item) {
$("#hoverText").text("point at: " + pos.x.toFixed(2) + " / " + pos.y.toFixed(2))
} else {
$("#hoverText").text("point at: - / -")
}
});

@ -0,0 +1,87 @@
<html>
<head>
<title>Shows how different settings and styles can be mixed in one canvas</title>
<style>
.chart-style {
width: 600px;
height: 340px;
margin-bottom: 15px;
}
.text-block {
margin-bottom: 15px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script type="text/javascript">
$(function() {
//some 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)]);
}
var d2 = [];
for (var i = 2; i <= $(d1).get(-1)[0]; i += (2 + parseInt(Math.random() * 5))) {
d2.push([i, parseInt(Math.random() * 8)]);
}
//default flot options
var options = {
series: { curvedLines: { active: true } },
grid: { hoverable: true } // <- generally activate hover
};
//plotting with per series adjustments
$.plot($("#flotContainer"), [
{ //series 1
data: d1,
lines: { show: true, lineWidth: 3 },
hoverable: false, // <- overwrite hoverable with false
curvedLines: {
apply: true // <- set apply <- curve only this data series
}
}, { //series 2
data: d1,
points: { show: true }
}, { //series 3
data: d2,
points: { show: true, radius: 5 }
}], options);
//adding hover text
$("#flotContainer").bind("plothover", function (event, pos, item) {
if (item) {
$("#hoverText").text("point at: " + pos.x.toFixed(2) + " / " + pos.y.toFixed(2))
} else {
$("#hoverText").text("point at: - / -")
}
});
});
</script>
</head>
<h4>CurvedLines: customizing and mixing</h4>
<div class="text-block"> <span id="hoverText">point at: - / -</span>
</div>
<div id="flotContainer" class="chart-style"></div>
<div class="text-block">The example shows two datasets (d1, d2) plotted using different styles (curved line, points, bigger points). The points are hoverable, the curved line is not.</div>
<div class="text-block">To achieve such mixed plots you have to define some settings on a per series level. In the example the curved line plugin is generally set to active (as default in the options object) but will be applied only to the first series. Similarly hovering is deactivated for the first series. The combination of "replotting" (series 1 and 2 both origin form dataset d1) and per series settings allows you to mix different plotting styles and settings in one canvas.</div>
<a href="index.html">Return to CurvedLines Examples list</a>
</body>
</html>

@ -0,0 +1,62 @@
<html>
<head>
<title>Basic example with multi axis and fill | CurvedLines</title>
<style>
.chart-style {
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script type="text/javascript">
$(function() {
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);
});
</script>
</head>
<body>
<h4>CurvedLines Basic example with multi axis and fill</h4>
<div id="flotContainer" class="chart-style"></div>
<a href="index.html">Return to CurvedLines Examples list</a>
</body>
</html>

@ -0,0 +1,66 @@
<html>
<head>
<title>Examples of Fit (Tension vs. Monotonic) | CurvedLines</title>
<style>
.chart-style {
width: 400px;
height: 240px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script type="text/javascript">
$(function() {
//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);
});
</script>
</head>
<body>
<h3>Examples of Fit (Tension vs. Monotonic)</h3>
<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>
<a href="index.html">Return to CurvedLines Examples list</a>
</body>
</html>

@ -0,0 +1,70 @@
<html>
<head>
<title>Demonstration of how CurvedLines creates additional 'Helper Points' to plot line | CurvedLines</title>
<style>
.chart-style {
width: 600px;
height: 260px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script type="text/javascript">
$(function() {
//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);
});
</script>
</head>
<h3>Demonstration of how CurvedLines creates additional 'Helper Points' to plot line</h3>
<body>
<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>
<a href="index.html">Return to CurvedLines Examples list</a>
</body>
</html>

@ -0,0 +1,65 @@
<html>
<head>
<title>Stacked Data Example | CurvedLines</title>
<style>
.chart-style {
width: 600px;
height: 260px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/flot/flot/v0.8.3/jquery.flot.stack.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script type="text/javascript">
$(function() {
//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);
});
</script>
<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>
<a href="index.html">Return to CurvedLines Examples list</a>
</body>
</html>

@ -0,0 +1,16 @@
<html>
<head>
<title>CurvedLines Examples</title>
</head>
<body>
<h1>CurvedLines Examples</h1>
<li><a href="exampleFillMultiAxis.html">Basic Example with Multi-Axis and Fill</a></li>
<li><a href="exampleFit.html">Examples of Fit (Tension vs Monotonic)</a></li>
<li><a href="exampleHelperPoints.html">Demo of how CurvedLines creates additional 'Helper Points' to plot line</a></li>
<li><a href="exampleStackedData.html">Stacked Data Example</a></li>
<li><a href="exampleCustomizing.html">Shows how different settings and styles can be mixed in one canvas</a></li>
</body>
</html>

@ -0,0 +1,23 @@
{
"name": "flot.curvedlines",
"version": "1.1.1",
"description": "CurvedLines is a plugin for flot, which displays lines in a smooth curved way",
"main": "curvedLines.js",
"directories": {
"example": "examples",
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no automated test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MichaelZinsmaier/CurvedLines.git"
},
"author": "Michael Zinsmaier",
"license": "MIT",
"bugs": {
"url": "https://github.com/MichaelZinsmaier/CurvedLines/issues"
},
"homepage": "https://github.com/MichaelZinsmaier/CurvedLines#readme"
}
Loading…
Cancel
Save