added example html files
Ken Irwin
11 years ago
parent
3c4d8dd436
commit
d60f9303b1
@ -0,0 +1,61 @@
|
||||
<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="js/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../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,65 @@
|
||||
<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="js/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../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="js/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../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,63 @@
|
||||
<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="js/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../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,14 @@
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue