Compare commits
No commits in common. 'master' and '1.1.1' have entirely different histories.
@ -1 +0,0 @@
|
||||
*~
|
||||
@ -1,70 +0,0 @@
|
||||
### 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: - / -")
|
||||
}
|
||||
});
|
||||
@ -1,87 +0,0 @@
|
||||
<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>
|
||||
@ -1,62 +0,0 @@
|
||||
<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>
|
||||
@ -1,66 +0,0 @@
|
||||
<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>
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
<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>
|
||||
@ -1,65 +0,0 @@
|
||||
<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>
|
||||
@ -1,16 +0,0 @@
|
||||
<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>
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"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…
Reference in New Issue