Skip to content

F
flot
Commit b637d67b authored by David Schnur's avatar David Schnur
Browse files
Options

Merge pull request #940 from dnschnur/better-examples 

Revamped the built-in examples.
parents a4ad4707 e08ec957
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3712 additions and 2832 deletions
examples/ajax.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
<p>The data is fetched over HTTP, in this case directly from text
files. Usually the URL would point to some web server handler
(e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
extracts it from a database and serializes it to JSON.</p>
<p>
<input class="fetchSeries" type="button" value="First dataset"> -
<a href="data-eu-gdp-growth.json">data</a> -
<span></span>
</p>
<p>
<input class="fetchSeries" type="button" value="Second dataset"> -
<a href="data-japan-gdp-growth.json">data</a> -
<span></span>
</p>
<p>
<input class="fetchSeries" type="button" value="Third dataset"> -
<a href="data-usa-gdp-growth.json">data</a> -
<span></span>
</p>
<p>If you combine AJAX with setTimeout, you can poll the server
for new data.</p>
<p>
<input class="dataUpdate" type="button" value="Poll for data">
</p>
<script type="text/javascript">
$(function () {
var options = {
lines: { show: true },
points: { show: true },
xaxis: { tickDecimals: 0, tickSize: 1 }
};
var data = [];
var placeholder = $("#placeholder");
$.plot(placeholder, data, options);
// fetch one series, adding to what we got
var alreadyFetched = {};
$("input.fetchSeries").click(function () {
var button = $(this);
// find the URL in the link right next to us
var dataurl = button.siblings('a').attr('href');
// then fetch the data with jQuery
function onDataReceived(series) {
// extract the first coordinate pair so you can see that
// data is now an ordinary Javascript object
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';
button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);
// let's add it to our current data
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
data.push(series);
}
// and plot all we got
$.plot(placeholder, data, options);
}
$.ajax({
url: dataurl,
type: 'GET',
dataType: 'json',
success: onDataReceived
});
});
// initiate a recurring data update
$("input.dataUpdate").click(function () {
// reset data
data = [];
alreadyFetched = {};
$.plot(placeholder, data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// we get all the data in one go, if we only got partial
// data, we could merge it with what we already got
data = [ series ];
$.plot($("#placeholder"), data, options);
}
$.ajax({
// usually, we'll just call the same URL, a script
// connected to a database, but in this case we only
// have static example files so we need to modify the
// URL
url: "data-eu-gdp-growth-" + iteration + ".json",
type: 'GET',
dataType: 'json',
success: onDataReceived
});
if (iteration < 5)
setTimeout(fetchData, 1000);
else {
data = [];
alreadyFetched = {};
}
}
setTimeout(fetchData, 1000);
});
});
</script>
</body>
</html>
examples/ajax/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
tickDecimals: 0,
tickSize: 1
}
};
var data = [];
$.plot("#placeholder", data, options);
// Fetch one series, adding to what we already have
var alreadyFetched = {};
$("button.fetchSeries").click(function () {
var button = $(this);
// Find the URL in the link right next to us, then fetch the data
var dataurl = button.siblings("a").attr("href");
function onDataReceived(series) {
// Extract the first coordinate pair; jQuery has parsed it, so
// the data is now just an ordinary JavaScript object
var firstcoordinate = "(" + series.data[0][0] + ", " + series.data[0][1] + ")";
button.siblings("span").text("Fetched " + series.label + ", first point: " + firstcoordinate);
// Push the new data onto our existing data array
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
data.push(series);
}
$.plot("#placeholder", data, options);
}
$.ajax({
url: dataurl,
type: "GET",
dataType: "json",
success: onDataReceived
});
});
// Initiate a recurring data update
$("button.dataUpdate").click(function () {
data = [];
alreadyFetched = {};
$.plot("#placeholder", data, options);
var iteration = 0;
function fetchData() {
++iteration;
function onDataReceived(series) {
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data = [ series ];
$.plot("#placeholder", data, options);
}
// Normally we call the same URL - a script connected to a
// database - but in this case we only have static example
// files, so we need to modify the URL.
$.ajax({
url: "data-eu-gdp-growth-" + iteration + ".json",
type: "GET",
dataType: "json",
success: onDataReceived
});
if (iteration < 5) {
setTimeout(fetchData, 1000);
} else {
data = [];
alreadyFetched = {};
}
}
setTimeout(fetchData, 1000);
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>AJAX</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below:</p>
<p>The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.</p>
<p>
<button class="fetchSeries">First dataset</button>
[ <a href="data-eu-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Second dataset</button>
[ <a href="data-japan-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>
<button class="fetchSeries">Third dataset</button>
[ <a href="data-usa-gdp-growth.json">see data</a> ]
<span></span>
</p>
<p>If you combine AJAX with setTimeout, you can poll the server for new data.</p>
<p>
<button class="dataUpdate">Poll for data</button>
</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/annotating.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Flot has support for simple background decorations such as
lines and rectangles. They can be useful for marking up certain
areas. You can easily add any HTML you need with standard DOM
manipulation, e.g. for labels. For drawing custom shapes there is
also direct access to the canvas.</p>
<script type="text/javascript">
$(function () {
// generate a dataset
var d1 = [];
for (var i = 0; i < 20; ++i)
d1.push([i, Math.sin(i)]);
var data = [{ data: d1, label: "Pressure", color: "#333" }];
// setup background areas
var markings = [
{ color: '#f6f6f6', yaxis: { from: 1 } },
{ color: '#f6f6f6', yaxis: { to: -1 } },
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
{ color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
];
var placeholder = $("#placeholder");
// plot it
var plot = $.plot(placeholder, data, {
bars: { show: true, barWidth: 0.5, fill: 0.9 },
xaxis: { ticks: [], autoscaleMargin: 0.02 },
yaxis: { min: -2, max: 2 },
grid: { markings: markings }
});
// add labels
var o;
o = plot.pointOffset({ x: 2, y: -1.2});
// we just append it to the placeholder which Flot already uses
// for positioning
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
o = plot.pointOffset({ x: 8, y: -1.2});
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
// draw a little arrow on top of the last label to demonstrate
// canvas drawing
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left += 4;
ctx.moveTo(o.left, o.top);
ctx.lineTo(o.left, o.top - 10);
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top);
ctx.fillStyle = "#000";
ctx.fill();
});
</script>
</body>
</html>
examples/annotating/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Adding Annotations</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var d1 = [];
for (var i = 0; i < 20; ++i) {
d1.push([i, Math.sin(i)]);
}
var data = [{ data: d1, label: "Pressure", color: "#333" }];
var markings = [
{ color: "#f6f6f6", yaxis: { from: 1 } },
{ color: "#f6f6f6", yaxis: { to: -1 } },
{ color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } },
{ color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } }
];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder, data, {
bars: { show: true, barWidth: 0.5, fill: 0.9 },
xaxis: { ticks: [], autoscaleMargin: 0.02 },
yaxis: { min: -2, max: 2 },
grid: { markings: markings }
});
var o = plot.pointOffset({ x: 2, y: -1.2});
// Append it to the placeholder that Flot already uses for positioning
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
o = plot.pointOffset({ x: 8, y: -1.2});
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
// Draw a little arrow on top of the last label to demonstrate canvas
// drawing
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left += 4;
ctx.moveTo(o.left, o.top);
ctx.lineTo(o.left, o.top - 10);
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top);
ctx.fillStyle = "#000";
ctx.fill();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Adding Annotations</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/axes-interacting/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Interacting with axes</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
function generate(start, end, fn) {
var res = [];
for (var i = 0; i <= 100; ++i) {
var x = start + i / 100 * (end - start);
res.push([x, fn(x)]);
}
return res;
}
var data = [
{ data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 },
{ data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 },
{ data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 },
{ data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 }
];
var plot = $.plot("#placeholder", data, {
xaxes: [
{ position: 'bottom' },
{ position: 'top'}
],
yaxes: [
{ position: 'left' },
{ position: 'left' },
{ position: 'right' },
{ position: 'left' }
]
});
// Create a div for each axis
$.each(plot.getAxes(), function (i, axis) {
if (!axis.show)
return;
var box = axis.box;
$("<div class='axisTarget' style='position:absolute; left:" + box.left + "px; top:" + box.top + "px; width:" + box.width + "px; height:" + box.height + "px'></div>")
.data("axis.direction", axis.direction)
.data("axis.n", axis.n)
.css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" })
.appendTo(plot.getPlaceholder())
.hover(
function () { $(this).css({ opacity: 0.10 }) },
function () { $(this).css({ opacity: 0 }) }
)
.click(function () {
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!")
});
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Interacting with axes</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.</p>
<p>Try clicking an axis.</p>
<p id="click"></p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/axes-multiple/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/axes-time-zones/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Time zones</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="date.js"></script>
<script type="text/javascript">
$(function() {
timezoneJS.timezone.zoneFileBasePath = "tz";
timezoneJS.timezone.defaultZoneFile = [];
timezoneJS.timezone.init();
var d = [
[Date.UTC(2011, 2, 12, 14, 0, 0), 28],
[Date.UTC(2011, 2, 12, 15, 0, 0), 27],
[Date.UTC(2011, 2, 12, 16, 0, 0), 25],
[Date.UTC(2011, 2, 12, 17, 0, 0), 19],
[Date.UTC(2011, 2, 12, 18, 0, 0), 16],
[Date.UTC(2011, 2, 12, 19, 0, 0), 14],
[Date.UTC(2011, 2, 12, 20, 0, 0), 11],
[Date.UTC(2011, 2, 12, 21, 0, 0), 9],
[Date.UTC(2011, 2, 12, 22, 0, 0), 7.5],
[Date.UTC(2011, 2, 12, 23, 0, 0), 6],
[Date.UTC(2011, 2, 13, 0, 0, 0), 5],
[Date.UTC(2011, 2, 13, 1, 0, 0), 6],
[Date.UTC(2011, 2, 13, 2, 0, 0), 7.5],
[Date.UTC(2011, 2, 13, 3, 0, 0), 9],
[Date.UTC(2011, 2, 13, 4, 0, 0), 11],
[Date.UTC(2011, 2, 13, 5, 0, 0), 14],
[Date.UTC(2011, 2, 13, 6, 0, 0), 16],
[Date.UTC(2011, 2, 13, 7, 0, 0), 19],
[Date.UTC(2011, 2, 13, 8, 0, 0), 25],
[Date.UTC(2011, 2, 13, 9, 0, 0), 27],
[Date.UTC(2011, 2, 13, 10, 0, 0), 28],
[Date.UTC(2011, 2, 13, 11, 0, 0), 29],
[Date.UTC(2011, 2, 13, 12, 0, 0), 29.5],
[Date.UTC(2011, 2, 13, 13, 0, 0), 29],
[Date.UTC(2011, 2, 13, 14, 0, 0), 28],
[Date.UTC(2011, 2, 13, 15, 0, 0), 27],
[Date.UTC(2011, 2, 13, 16, 0, 0), 25],
[Date.UTC(2011, 2, 13, 17, 0, 0), 19],
[Date.UTC(2011, 2, 13, 18, 0, 0), 16],
[Date.UTC(2011, 2, 13, 19, 0, 0), 14],
[Date.UTC(2011, 2, 13, 20, 0, 0), 11],
[Date.UTC(2011, 2, 13, 21, 0, 0), 9],
[Date.UTC(2011, 2, 13, 22, 0, 0), 7.5],
[Date.UTC(2011, 2, 13, 23, 0, 0), 6]
];
var plot = $.plot("#placeholderUTC", [d], {
xaxis: {
mode: "time"
}
});
var plot = $.plot("#placeholderLocal", [d], {
xaxis: {
mode: "time",
timezone: "browser"
}
});
var plot = $.plot("#placeholderChicago", [d], {
xaxis: {
mode: "time",
timezone: "America/Chicago"
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Time zones</h2>
</div>
<div id="content">
<h3>UTC</h3>
<div class="demo-container" style="height: 300px;">
<div id="placeholderUTC"></div>
</div>
<h3>Browser</h3>
<div class="demo-container" style="height: 300px;">
<div id="placeholderLocal"></div>
</div>
<h3>Chicago</h3>
<div class="demo-container" style="height: 300px;">
<div id="placeholderChicago"></div>
</div>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/axes-time/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/basic-options/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Basic Options</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25) {
d1.push([i, Math.sin(i)]);
}
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25) {
d2.push([i, Math.cos(i)]);
}
var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1) {
d3.push([i, Math.tan(i)]);
}
$.plot("#placeholder", [
{ label: "sin(x)", data: d1 },
{ label: "cos(x)", data: d2 },
{ label: "tan(x)", data: d3 }
], {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
ticks: [
0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ],
[ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ]
]
},
yaxis: {
ticks: 10,
min: -2,
max: 2,
tickDecimals: 3
},
grid: {
backgroundColor: { colors: [ "#fff", "#eee" ] },
borderWidth: {
top: 1,
right: 1,
bottom: 2,
left: 2
}
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Basic Options</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.</p>
<p>Flot goes to great lengths to provide sensible defaults so that you don't have to customize much for a good-looking result.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/basic-usage/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Basic Usage</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// A null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot("#placeholder", [ d1, d2, d3 ]);
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Basic Usage</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p>
<p>The axes are automatically scaled.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/basic.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Simple example. You don't need to specify much to get an
attractive look. Put in a placeholder, make sure you set its
dimensions (otherwise the plot library will barf) and call the
plot function with the data. The axes are automatically
scaled.</p>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>
</body>
</html>
examples/categories.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.categories.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>With the categories plugin you can plot categories/textual data
easily.</p>
<script type="text/javascript">
$(function () {
var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
$.plot($("#placeholder"), [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>
</body>
</html>
examples/categories/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Categories</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.categories.js"></script>
<script type="text/javascript">
$(function() {
var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
$.plot("#placeholder", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Categories</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>With the categories plugin you can plot categories/textual data easily.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/errorbars.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.errorbars.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:400px;"></div>
<p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p>
<script type="text/javascript" language="javascript">
$(function () {
function drawArrow(ctx, x, y, radius){
ctx.beginPath();
ctx.moveTo(x + radius, y + radius);
ctx.lineTo(x, y);
ctx.lineTo(x - radius, y + radius);
ctx.stroke();
}
function drawSemiCircle(ctx, x, y, radius){
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI, false);
ctx.moveTo(x - radius, y);
ctx.lineTo(x + radius, y);
ctx.stroke();
}
//data1
var data1 = [[1,1,.5,.1,.3], [2,2,.3,.5,.2], [3,3,.9,.5,.2],
[1.5,-.05,.5,.1,.3], [3.15,1.,.5,.1,.3],
[2.5,-1.,.5,.1,.3]];
var data1_points = {
show: true,
radius: 5,
fillColor: "blue",
errorbars: "xy",
xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"},
yerr: {show: true, color: "red", upperCap: "-"}
};
//data2
var data2 = [[.7,3,.2,.4], [1.5,2.2,.3,.4], [2.3,1,.5,.2]];
var data2_points = {
show: true,
radius: 5,
errorbars: "y",
yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle}
};
//data3
var data3 = [[1,2,.4], [2,0.5,.3], [2.7,2,.5]];
var data3_points = {
//do not show points
radius: 0,
errorbars: "y",
yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5}
};
//data4
var data4 = [[1.3, 1], [1.75, 2.5], [2.5, 0.5]];
var data4_errors = [0.1, 0.4, 0.2];
for (var i=0; i<data4.length; i++)
data4_errors[i] = data4[i].concat(data4_errors[i])
//plot
var data = [{color: "blue", points: data1_points, data: data1, label: "data1"},
{color: "red", points: data2_points, data: data2, label: "data2"},
{color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"},
// bars with errors
{color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"},
{color: "orange", points: data3_points, data: data4_errors}];
var options = {legend: {position: "sw", show: true}, series: {lines: {show: false}},
xaxis: {min: 0.6, max: 3.1}, yaxis: {min: 0, max: 3.5},
zoom: {interactive: true}, pan: {interactive: true}
};
$.plot($("#placeholder"), data , options);
});
</script>
</body>
</html>
examples/examples.css 0 → 100644
View file @ b637d67b
* { padding: 0; margin: 0; vertical-align: top; }
body {
background: url(background.png) repeat-x;
font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}
a { color: #069; }
a:hover { color: #28b; }
h2 {
margin-top: 15px;
font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
}
h3 {
margin-left: 10px;
font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
color: #666;
}
p {
margin-top: 10px;
}
button {
font-size: 18px;
padding: 1px 7px;
}
input {
font-size: 18px;
}
input[type=checkbox] {
margin: 7px;
}
#header {
position: relative;
width: 900px;
margin: auto;
}
#header h2 {
margin-left: 10px;
vertical-align: middle;
font-size: 48px;
font-weight: bold;
text-decoration: none;
color: #000;
}
#content {
width: 880px;
margin: 0 auto;
padding: 10px;
}
#footer {
margin-top: 25px;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
color: #999;
}
.demo-container {
box-sizing: border-box;
width: 900px;
height: 500px;
padding: 20px 15px 15px 15px;
margin: 15px auto 30px auto;
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 50px);
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
#placeholder, #overview {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 14px;
}
.legend table {
border-spacing: 5px;
}
\ No newline at end of file
examples/graph-types.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>Flot supports lines, points, filled areas, bars and any
combinations of these, in the same plot and even on the same data
series.</p>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d3 = [];
for (var i = 0; i < 14; i += 0.5)
d3.push([i, Math.cos(i)]);
var d4 = [];
for (var i = 0; i < 14; i += 0.1)
d4.push([i, Math.sqrt(i * 10)]);
var d5 = [];
for (var i = 0; i < 14; i += 0.5)
d5.push([i, Math.sqrt(i)]);
var d6 = [];
for (var i = 0; i < 14; i += 0.5 + Math.random())
d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
$.plot($("#placeholder"), [
{
data: d1,
lines: { show: true, fill: true }
},
{
data: d2,
bars: { show: true }
},
{
data: d3,
points: { show: true }
},
{
data: d4,
lines: { show: true }
},
{
data: d5,
lines: { show: true },
points: { show: true }
},
{
data: d6,
lines: { show: true, steps: true }
}
]);
});
</script>
</body>
</html>
examples/image.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:400px;height:400px;"></div>
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
<p>With the image plugin, you can plot images. This is for example
useful for getting ticks on complex prerendered visualizations.
Instead of inputting data points, you put in the images and where
their two opposite corners are supposed to be in plot space.</p>
<p>Images represent a little further complication because you need
to make sure they are loaded before you can use them (Flot skips
incomplete images). The plugin comes with a couple of helpers
for doing that.</p>
<script type="text/javascript">
$(function () {
var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
var options = {
series: { images: { show: true } },
xaxis: { min: -8, max: 4 },
yaxis: { min: -8, max: 4 }
};
$.plot.image.loadDataImages(data, options, function () {
$.plot($("#placeholder"), data, options);
});
});
</script>
</body>
</html>
examples/image/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Image Plots</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.image.js"></script>
<script type="text/javascript">
$(function() {
var data = [[["hs-2004-27-a-large-web.jpg", -10, -10, 10, 10]]];
var options = {
series: {
images: {
show: true
}
},
xaxis: {
min: -8,
max: 4
},
yaxis: {
min: -8,
max: 4
}
};
$.plot.image.loadDataImages(data, options, function () {
$.plot("#placeholder", data, options);
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Image Plots</h2>
</div>
<div id="content">
<div class="demo-container" style="width:600px;height:600px;">
<div id="placeholder"></div>
</div>
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
<p>With the image plugin, you can plot static images against a set of axes. This is for useful for adding ticks to complex prerendered visualizations. Instead of inputting data points, you specify the images and where their two opposite corners are supposed to be in plot space.</p>
<p>Images represent a little further complication because you need to make sure they are loaded before you can use them (Flot skips incomplete images). The plugin comes with a couple of helpers for doing that.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/index.html
View file @ b637d67b
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Flot Examples</h1>
<p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
<ul>
<li><a href="basic.html">Basic example</a></li>
<li><a href="graph-types.html">Different graph types</a> and <a href="categories.html">simple categories/textual data</a></li>
<li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
<li><a href="ajax.html">Updating graphs with AJAX</a> and <a href="realtime.html">real-time updates</a></li>
</ul>
<p>Being interactive:</p>
<ul>
<li><a href="turning-series.html">Turning series on/off</a></li>
<li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a> (both with selection plugin)</li>
<li><a href="interacting.html">Interacting with the data points</a></li>
<li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
<li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
</ul>
<p>Various features:</p>
<ul>
<li><a href="symbols.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
<li><a href="time.html">Plotting time series</a>, <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin) and <a href="timezones.html">time zone support</a></li>
<li><a href="multiple-axes.html">Multiple axes</a> and <a href="interacting-axes.html">interacting with the axes</a></li>
<li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
<li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
<li><a href="percentiles.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
<li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
<li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
<li><a href="errorbars.html">Plotting error bars</a> (with errorbars plugin)</li>
<li><a href="pie.html">Pie charts</a> (with pie plugin)</li>
</ul>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="examples.css" rel="stylesheet" type="text/css">
<style>
h3 {
margin-top: 30px;
margin-bottom: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Flot Examples</h2>
</div>
<div id="content">
<p>Here are some examples for <a href="http://www.flotcharts.org">Flot</a>, the Javascript charting library for jQuery:</p>
<h3>Basic Usage</h3>
<ul>
<li><a href="basic-usage/index.html">Basic example</a></li>
<li><a href="series-types/index.html">Different graph types</a> and <a href="categories/index.html">simple categories/textual data</a></li>
<li><a href="basic-options/index.html">Setting various options</a> and <a href="annotating/index.html">annotating a chart</a></li>
<li><a href="ajax/index.html">Updating graphs with AJAX</a> and <a href="realtime/index.html">real-time updates</a></li>
</ul>
<h3>Interactivity</h3>
<ul>
<li><a href="series-toggle/index.html">Turning series on/off</a></li>
<li><a href="selection/index.html">Rectangular selection support and zooming</a> and <a href="zooming/index.html">zooming with overview</a> (both with selection plugin)</li>
<li><a href="interacting/index.html">Interacting with the data points</a></li>
<li><a href="navigate/index.html">Panning and zooming</a> (with navigation plugin)</li>
<li><a href="resize/index.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
</ul>
<h3>Additional Features</h3>
<ul>
<li><a href="symbols/index.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
<li><a href="axes-time/index.html">Plotting time series</a>, <a href="visitors/index.html">visitors per day with zooming and weekends</a> (with selection plugin) and <a href="axes-time-zones/index.html">time zone support</a></li>
<li><a href="axes-multiple/index.html">Multiple axes</a> and <a href="axes-interacting/index.html">interacting with the axes</a></li>
<li><a href="threshold/index.html">Thresholding the data</a> (with threshold plugin)</li>
<li><a href="stacking/index.html">Stacked charts</a> (with stacking plugin)</li>
<li><a href="percentiles/index.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
<li><a href="tracking/index.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
<li><a href="image/index.html">Plotting prerendered images</a> (with image plugin)</li>
<li><a href="series-errorbars/index.html">Plotting error bars</a> (with errorbars plugin)</li>
<li><a href="series-pie/index.html">Pie charts</a> (with pie plugin)</li>
</ul>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/interacting-axes.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>With multiple axes, you sometimes need to interact with them. A
simple way to do this is to draw the plot, deduce the axis
placements and insert a couple of divs on top to catch events.
Try clicking an axis.</p>
<p id="click"></p>
<script type="text/javascript">
$(function () {
function generate(start, end, fn) {
var res = [];
for (var i = 0; i <= 100; ++i) {
var x = start + i / 100 * (end - start);
res.push([x, fn(x)]);
}
return res;
}
var data = [
{ data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 },
{ data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 },
{ data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 },
{ data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 }
];
var plot = $.plot($("#placeholder"),
data,
{
xaxes: [
{ position: 'bottom' },
{ position: 'top'}
],
yaxes: [
{ position: 'left' },
{ position: 'left' },
{ position: 'right' },
{ position: 'left' }
]
});
// now for each axis, create a div
$.each(plot.getAxes(), function (i, axis) {
if (!axis.show)
return;
var box = axis.box;
$('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>')
.data('axis.direction', axis.direction)
.data('axis.n', axis.n)
.css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" })
.appendTo(plot.getPlaceholder())
.hover(
function () { $(this).css({ opacity: 0.10 }) },
function () { $(this).css({ opacity: 0 }) }
)
.click(function () {
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!")
});
});
});
</script>
</body>
</html>
examples/interacting.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>One of the goals of Flot is to support user interactions. Try
pointing and clicking on the points.</p>
<p>
<label><input id="enablePosition" type="checkbox">Show mouse position</label>
<span id="hoverdata"></span>
<span id="clickdata"></span>
</p>
<p>A tooltip is easy to build with a bit of jQuery code and the
data returned from the plot.</p>
<p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>
<script type="text/javascript">
$(function () {
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot($("#placeholder"),
[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
yaxis: { min: -1.2, max: 1.2 }
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = " + y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
});
</script>
</body>
</html>
examples/interacting/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Interactivity</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot("#placeholder", [
{ data: sin, label: "sin(x)"},
{ data: cos, label: "cos(x)"}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: -1.2,
max: 1.2
}
});
function showTooltip(x, y, contents) {
$("<div id='tooltip'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = " + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Interactivity</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p>
<p>
<label><input id="enablePosition" type="checkbox"></input>Show mouse position</label>
<span id="hoverdata"></span>
<span id="clickdata"></span>
</p>
<p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p>
<p><label><input id="enableTooltip" type="checkbox"></input>Enable tooltip</label></p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/layout.css deleted 100644 → 0
View file @ a4ad4707
body {
font-family: sans-serif;
font-size: 16px;
margin: 50px;
max-width: 800px;
}
examples/multiple-axes.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/navigate.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
<style type="text/css">
#placeholder .button {
position: absolute;
cursor: pointer;
}
#placeholder div.button {
font-size: smaller;
color: #999;
background-color: #eee;
padding: 2px;
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p class="message"></p>
<p>With the navigate plugin it is easy to add panning and zooming.
Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
<p>The plugin fires events (useful for synchronizing several
plots) and adds a couple of public methods so you can easily build
a little user interface around it, like the little buttons at the
top right in the plot.</p>
<script type="text/javascript">
$(function () {
// generate data set from a parametric function with a fractal
// look
function sumf(f, t, m) {
var res = 0;
for (var i = 1; i < m; ++i)
res += f(i * i * t) / (i * i);
return res;
}
var d1 = [];
for (var t = 0; t <= 2 * Math.PI; t += 0.01)
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
var data = [ d1 ];
var placeholder = $("#placeholder");
var options = {
series: { lines: { show: true }, shadowSize: 0 },
xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
zoom: {
interactive: true
},
pan: {
interactive: true
}
};
var plot = $.plot(placeholder, data, options);
// show pan/zoom messages to illustrate events
placeholder.bind('plotpan', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2));
});
placeholder.bind('plotzoom', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2));
});
// add zoom out button
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.zoomOut();
});
// and add panning buttons
// little helper for taking the repetitive work out of placing
// panning arrows
function addArrow(dir, right, top, offset) {
$('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.pan(offset);
});
}
addArrow('left', 55, 60, { left: -100 });
addArrow('right', 25, 60, { left: 100 });
addArrow('up', 40, 45, { top: -100 });
addArrow('down', 40, 75, { top: 100 });
});
</script>
</body>
</html>
examples/navigate/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Navigation</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<style type="text/css">
#placeholder .button {
position: absolute;
cursor: pointer;
}
#placeholder div.button {
font-size: smaller;
color: #999;
background-color: #eee;
padding: 2px;
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
<script type="text/javascript">
$(function() {
// generate data set from a parametric function with a fractal look
function sumf(f, t, m) {
var res = 0;
for (var i = 1; i < m; ++i) {
res += f(i * i * t) / (i * i);
}
return res;
}
var d1 = [];
for (var t = 0; t <= 2 * Math.PI; t += 0.01) {
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
}
var data = [ d1 ],
placeholder = $("#placeholder");
var plot = $.plot(placeholder, data, {
series: {
lines: {
show: true
},
shadowSize: 0
},
xaxis: {
zoomRange: [0.1, 10],
panRange: [-10, 10]
},
yaxis: {
zoomRange: [0.1, 10],
panRange: [-10, 10]
},
zoom: {
interactive: true
},
pan: {
interactive: true
}
});
// show pan/zoom messages to illustrate events
placeholder.bind("plotpan", function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2));
});
placeholder.bind("plotzoom", function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2));
});
// add zoom out button
$("<div class='button' style='right:20px;top:20px'>zoom out</div>")
.appendTo(placeholder)
.click(function (event) {
event.preventDefault();
plot.zoomOut();
});
// and add panning buttons
// little helper for taking the repetitive work out of placing
// panning arrows
function addArrow(dir, right, top, offset) {
$("<img class='button' src='arrow-" + dir + ".gif' style='right:" + right + "px;top:" + top + "px'>")
.appendTo(placeholder)
.click(function (e) {
e.preventDefault();
plot.pan(offset);
});
}
addArrow("left", 55, 60, { left: -100 });
addArrow("right", 25, 60, { left: 100 });
addArrow("up", 40, 45, { top: -100 });
addArrow("down", 40, 75, { top: 100 });
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Navigation</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p class="message"></p>
<p>With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
<p>The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/percentiles.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.fillbetween.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:400px;"></div>
<p>Height in centimeters of individuals from the US (2003-2006) as function of
age in years (source: <a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>).
The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>
<p>For each point of a filled curve, you can specify an arbitrary
bottom. As this example illustrates, this can be useful for
plotting percentiles. If you have the data sets available without
appropriate fill bottoms, you can use the fillbetween plugin to
compute the data point bottoms automatically.</p>
<script type="text/javascript">
$(function () {
var males = {'15%': [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6], [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9], [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]], '90%': [[2, 96.8], [3, 105.2], [4, 113.9], [5, 120.8], [6, 127.0], [7, 133.1], [8, 139.1], [9, 143.9], [10, 151.3], [11, 161.1], [12, 164.8], [13, 173.5], [14, 179.0], [15, 182.0], [16, 186.9], [17, 185.2], [18, 186.3], [19, 186.6]], '25%': [[2, 89.2], [3, 94.9], [4, 104.4], [5, 111.4], [6, 117.5], [7, 120.2], [8, 127.1], [9, 132.9], [10, 136.8], [11, 144.4], [12, 149.5], [13, 154.1], [14, 163.1], [15, 169.2], [16, 170.4], [17, 171.2], [18, 172.4], [19, 170.8]], '10%': [[2, 86.9], [3, 92.6], [4, 99.9], [5, 107.0], [6, 114.0], [7, 113.5], [8, 123.6], [9, 129.2], [10, 133.0], [11, 140.6], [12, 145.2], [13, 149.7], [14, 158.4], [15, 163.5], [16, 166.9], [17, 167.5], [18, 167.1], [19, 165.3]], 'mean': [[2, 91.9], [3, 98.5], [4, 107.1], [5, 114.4], [6, 120.6], [7, 124.7], [8, 131.1], [9, 136.8], [10, 142.3], [11, 150.0], [12, 154.7], [13, 161.9], [14, 168.7], [15, 173.6], [16, 175.9], [17, 176.6], [18, 176.8], [19, 176.7]], '75%': [[2, 94.5], [3, 102.1], [4, 110.8], [5, 117.9], [6, 124.0], [7, 129.3], [8, 134.6], [9, 141.4], [10, 147.0], [11, 156.1], [12, 160.3], [13, 168.3], [14, 174.7], [15, 178.0], [16, 180.2], [17, 181.7], [18, 181.3], [19, 182.5]], '85%': [[2, 96.2], [3, 103.8], [4, 111.8], [5, 119.6], [6, 125.6], [7, 131.5], [8, 138.0], [9, 143.3], [10, 149.3], [11, 159.8], [12, 162.5], [13, 171.3], [14, 177.5], [15, 180.2], [16, 183.8], [17, 183.4], [18, 183.5], [19, 185.5]], '50%': [[2, 91.9], [3, 98.2], [4, 106.8], [5, 114.6], [6, 120.8], [7, 125.2], [8, 130.3], [9, 137.1], [10, 141.5], [11, 149.4], [12, 153.9], [13, 162.2], [14, 169.0], [15, 174.8], [16, 176.0], [17, 176.8], [18, 176.4], [19, 177.4]]};
var females = {'15%': [[2, 84.8], [3, 93.7], [4, 100.6], [5, 105.8], [6, 113.3], [7, 119.3], [8, 124.3], [9, 131.4], [10, 136.9], [11, 143.8], [12, 149.4], [13, 151.2], [14, 152.3], [15, 155.9], [16, 154.7], [17, 157.0], [18, 156.1], [19, 155.4]], '90%': [[2, 95.6], [3, 104.1], [4, 111.9], [5, 119.6], [6, 127.6], [7, 133.1], [8, 138.7], [9, 147.1], [10, 152.8], [11, 161.3], [12, 166.6], [13, 167.9], [14, 169.3], [15, 170.1], [16, 172.4], [17, 169.2], [18, 171.1], [19, 172.4]], '25%': [[2, 87.2], [3, 95.9], [4, 101.9], [5, 107.4], [6, 114.8], [7, 121.4], [8, 126.8], [9, 133.4], [10, 138.6], [11, 146.2], [12, 152.0], [13, 153.8], [14, 155.7], [15, 158.4], [16, 157.0], [17, 158.5], [18, 158.4], [19, 158.1]], '10%': [[2, 84.0], [3, 91.9], [4, 99.2], [5, 105.2], [6, 112.7], [7, 118.0], [8, 123.3], [9, 130.2], [10, 135.0], [11, 141.1], [12, 148.3], [13, 150.0], [14, 150.7], [15, 154.3], [16, 153.6], [17, 155.6], [18, 154.7], [19, 153.1]], 'mean': [[2, 90.2], [3, 98.3], [4, 105.2], [5, 112.2], [6, 119.0], [7, 125.8], [8, 131.3], [9, 138.6], [10, 144.2], [11, 151.3], [12, 156.7], [13, 158.6], [14, 160.5], [15, 162.1], [16, 162.9], [17, 162.2], [18, 163.0], [19, 163.1]], '75%': [[2, 93.2], [3, 101.5], [4, 107.9], [5, 116.6], [6, 122.8], [7, 129.3], [8, 135.2], [9, 143.7], [10, 148.7], [11, 156.9], [12, 160.8], [13, 163.0], [14, 165.0], [15, 165.8], [16, 168.7], [17, 166.2], [18, 167.6], [19, 168.0]], '85%': [[2, 94.5], [3, 102.8], [4, 110.4], [5, 119.0], [6, 125.7], [7, 131.5], [8, 137.9], [9, 146.0], [10, 151.3], [11, 159.9], [12, 164.0], [13, 166.5], [14, 167.5], [15, 168.5], [16, 171.5], [17, 168.0], [18, 169.8], [19, 170.3]], '50%': [[2, 90.2], [3, 98.1], [4, 105.2], [5, 111.7], [6, 118.2], [7, 125.6], [8, 130.5], [9, 138.3], [10, 143.7], [11, 151.4], [12, 156.7], [13, 157.7], [14, 161.0], [15, 162.0], [16, 162.8], [17, 162.2], [18, 162.8], [19, 163.3]]};
var dataset = [
{ label: 'Female mean', data: females['mean'], lines: { show: true }, color: "rgb(255,50,50)" },
{ id: 'f15%', data: females['15%'], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
{ id: 'f25%', data: females['25%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: 'f15%' },
{ id: 'f50%', data: females['50%'], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: 'f25%' },
{ id: 'f75%', data: females['75%'], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: 'f50%' },
{ id: 'f85%', data: females['85%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: 'f75%' },
{ label: 'Male mean', data: males['mean'], lines: { show: true }, color: "rgb(50,50,255)" },
{ id: 'm15%', data: males['15%'], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(50,50,255)" },
{ id: 'm25%', data: males['25%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: 'm15%' },
{ id: 'm50%', data: males['50%'], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: 'm25%' },
{ id: 'm75%', data: males['75%'], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(50,50,255)", fillBetween: 'm50%' },
{ id: 'm85%', data: males['85%'], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: 'm75%' }
]
$.plot($("#placeholder"), dataset, {
xaxis: { tickDecimals: 0 },
yaxis: { tickFormatter: function (v) { return v + " cm"; } },
legend: { position: 'se' }
});
});
</script>
</body>
</html>
examples/percentiles/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Percentiles</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.fillbetween.js"></script>
<script type="text/javascript">
$(function() {
var males = {"15%": [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6], [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9], [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]], "90%": [[2, 96.8], [3, 105.2], [4, 113.9], [5, 120.8], [6, 127.0], [7, 133.1], [8, 139.1], [9, 143.9], [10, 151.3], [11, 161.1], [12, 164.8], [13, 173.5], [14, 179.0], [15, 182.0], [16, 186.9], [17, 185.2], [18, 186.3], [19, 186.6]], "25%": [[2, 89.2], [3, 94.9], [4, 104.4], [5, 111.4], [6, 117.5], [7, 120.2], [8, 127.1], [9, 132.9], [10, 136.8], [11, 144.4], [12, 149.5], [13, 154.1], [14, 163.1], [15, 169.2], [16, 170.4], [17, 171.2], [18, 172.4], [19, 170.8]], "10%": [[2, 86.9], [3, 92.6], [4, 99.9], [5, 107.0], [6, 114.0], [7, 113.5], [8, 123.6], [9, 129.2], [10, 133.0], [11, 140.6], [12, 145.2], [13, 149.7], [14, 158.4], [15, 163.5], [16, 166.9], [17, 167.5], [18, 167.1], [19, 165.3]], "mean": [[2, 91.9], [3, 98.5], [4, 107.1], [5, 114.4], [6, 120.6], [7, 124.7], [8, 131.1], [9, 136.8], [10, 142.3], [11, 150.0], [12, 154.7], [13, 161.9], [14, 168.7], [15, 173.6], [16, 175.9], [17, 176.6], [18, 176.8], [19, 176.7]], "75%": [[2, 94.5], [3, 102.1], [4, 110.8], [5, 117.9], [6, 124.0], [7, 129.3], [8, 134.6], [9, 141.4], [10, 147.0], [11, 156.1], [12, 160.3], [13, 168.3], [14, 174.7], [15, 178.0], [16, 180.2], [17, 181.7], [18, 181.3], [19, 182.5]], "85%": [[2, 96.2], [3, 103.8], [4, 111.8], [5, 119.6], [6, 125.6], [7, 131.5], [8, 138.0], [9, 143.3], [10, 149.3], [11, 159.8], [12, 162.5], [13, 171.3], [14, 177.5], [15, 180.2], [16, 183.8], [17, 183.4], [18, 183.5], [19, 185.5]], "50%": [[2, 91.9], [3, 98.2], [4, 106.8], [5, 114.6], [6, 120.8], [7, 125.2], [8, 130.3], [9, 137.1], [10, 141.5], [11, 149.4], [12, 153.9], [13, 162.2], [14, 169.0], [15, 174.8], [16, 176.0], [17, 176.8], [18, 176.4], [19, 177.4]]};
var females = {"15%": [[2, 84.8], [3, 93.7], [4, 100.6], [5, 105.8], [6, 113.3], [7, 119.3], [8, 124.3], [9, 131.4], [10, 136.9], [11, 143.8], [12, 149.4], [13, 151.2], [14, 152.3], [15, 155.9], [16, 154.7], [17, 157.0], [18, 156.1], [19, 155.4]], "90%": [[2, 95.6], [3, 104.1], [4, 111.9], [5, 119.6], [6, 127.6], [7, 133.1], [8, 138.7], [9, 147.1], [10, 152.8], [11, 161.3], [12, 166.6], [13, 167.9], [14, 169.3], [15, 170.1], [16, 172.4], [17, 169.2], [18, 171.1], [19, 172.4]], "25%": [[2, 87.2], [3, 95.9], [4, 101.9], [5, 107.4], [6, 114.8], [7, 121.4], [8, 126.8], [9, 133.4], [10, 138.6], [11, 146.2], [12, 152.0], [13, 153.8], [14, 155.7], [15, 158.4], [16, 157.0], [17, 158.5], [18, 158.4], [19, 158.1]], "10%": [[2, 84.0], [3, 91.9], [4, 99.2], [5, 105.2], [6, 112.7], [7, 118.0], [8, 123.3], [9, 130.2], [10, 135.0], [11, 141.1], [12, 148.3], [13, 150.0], [14, 150.7], [15, 154.3], [16, 153.6], [17, 155.6], [18, 154.7], [19, 153.1]], "mean": [[2, 90.2], [3, 98.3], [4, 105.2], [5, 112.2], [6, 119.0], [7, 125.8], [8, 131.3], [9, 138.6], [10, 144.2], [11, 151.3], [12, 156.7], [13, 158.6], [14, 160.5], [15, 162.1], [16, 162.9], [17, 162.2], [18, 163.0], [19, 163.1]], "75%": [[2, 93.2], [3, 101.5], [4, 107.9], [5, 116.6], [6, 122.8], [7, 129.3], [8, 135.2], [9, 143.7], [10, 148.7], [11, 156.9], [12, 160.8], [13, 163.0], [14, 165.0], [15, 165.8], [16, 168.7], [17, 166.2], [18, 167.6], [19, 168.0]], "85%": [[2, 94.5], [3, 102.8], [4, 110.4], [5, 119.0], [6, 125.7], [7, 131.5], [8, 137.9], [9, 146.0], [10, 151.3], [11, 159.9], [12, 164.0], [13, 166.5], [14, 167.5], [15, 168.5], [16, 171.5], [17, 168.0], [18, 169.8], [19, 170.3]], "50%": [[2, 90.2], [3, 98.1], [4, 105.2], [5, 111.7], [6, 118.2], [7, 125.6], [8, 130.5], [9, 138.3], [10, 143.7], [11, 151.4], [12, 156.7], [13, 157.7], [14, 161.0], [15, 162.0], [16, 162.8], [17, 162.2], [18, 162.8], [19, 163.3]]};
var dataset = [
{ label: "Female mean", data: females["mean"], lines: { show: true }, color: "rgb(255,50,50)" },
{ id: "f15%", data: females["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" },
{ id: "f25%", data: females["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f15%" },
{ id: "f50%", data: females["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: "f25%" },
{ id: "f75%", data: females["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: "f50%" },
{ id: "f85%", data: females["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f75%" },
{ label: "Male mean", data: males["mean"], lines: { show: true }, color: "rgb(50,50,255)" },
{ id: "m15%", data: males["15%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(50,50,255)" },
{ id: "m25%", data: males["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m15%" },
{ id: "m50%", data: males["50%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: "m25%" },
{ id: "m75%", data: males["75%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(50,50,255)", fillBetween: "m50%" },
{ id: "m85%", data: males["85%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(50,50,255)", fillBetween: "m75%" }
];
$.plot($("#placeholder"), dataset, {
xaxis: {
tickDecimals: 0
},
yaxis: {
tickFormatter: function (v) {
return v + " cm";
}
},
legend: {
position: "se"
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Percentiles</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: <a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>
<p>For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can use the fillbetween plugin to compute the data point bottoms automatically.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/pie.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/realtime.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>You can update a chart periodically to get a real-time effect
by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
<script type="text/javascript">
$(function () {
// we use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0)
y = 0;
if (y > 100)
y = 100;
data.push(y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i)
res.push([i, data[i]])
return res;
}
// setup control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
// setup plot
var options = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0, max: 100 },
xaxis: { show: false }
};
var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
function update() {
plot.setData([ getRandomData() ]);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
</body>
</html>
examples/realtime/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
// Set up the control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Real-time updates</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/resize.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:80%;height:40%;"></div>
<p class="message"></p>
<p>Sometimes it makes more sense to just let the plot take up the
available space. In that case, we need to redraw the plot each
time the placeholder changes its size. If you include the resize
plugin, this is handled automatically.</p>
<p>Try resizing the window.</p>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder, [d1, d2, d3]);
// the plugin includes a jQuery plugin for adding resize events to
// any element, let's just add a callback so we can display the
// placeholder size
placeholder.resize(function () {
$(".message").text("Placeholder is now "
+ $(this).width() + "x" + $(this).height()
+ " pixels");
});
});
</script>
</body>
</html>
examples/resize/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Resizing</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
<script type="text/javascript">
$(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder, [d1, d2, d3]);
// The plugin includes a jQuery plugin for adding resize events to any
// element. Add a callback so we can display the placeholder size.
placeholder.resize(function () {
$(".message").text("Placeholder is now "
+ $(this).width() + "x" + $(this).height()
+ " pixels");
});
$(".demo-container").resizable({
maxWidth: 900,
maxHeight: 500,
minWidth: 450,
minHeight: 250,
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Resizing</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p class="message"></p>
<p>Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.</p>
<p>Drag the bottom and right sides of the plot to resize it.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/selection.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
<p>Flot supports selections through the selection plugin.
You can enable rectangular selection
or one-dimensional selection if the user should only be able to
select on one axis. Try left-click and drag on the plot above
where selection on the x axis is enabled.</p>
<p>You selected: <span id="selection"></span></p>
<p>The plot command returns a plot object you can use to control
the selection. Click the buttons below.</p>
<p><input id="clearSelection" type="button" value="Clear selection" />
<input id="setSelection" type="button" value="Select year 1994" /></p>
<p>Selections are really useful for zooming. Just replot the
chart with min and max values for the axes set to the values
in the "plotselected" event triggered. Enable the checkbox
below and select a region again.</p>
<p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>
<script type="text/javascript">
$(function () {
var data = [
{
label: "United States",
data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
},
{
label: "Russia",
data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
},
{
label: "United Kingdom",
data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
},
{
label: "Germany",
data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
},
{
label: "Denmark",
data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
},
{
label: "Sweden",
data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
},
{
label: "Norway",
data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
}
];
var options = {
series: {
lines: { show: true },
points: { show: true }
},
legend: { noColumns: 2 },
xaxis: { tickDecimals: 0 },
yaxis: { min: 0 },
selection: { mode: "x" }
};
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom)
plot = $.plot(placeholder, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
plot.clearSelection();
});
$("#setSelection").click(function () {
plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
});
});
</script>
</body>
</html>
examples/selection/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Selection</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
<script type="text/javascript">
$(function() {
var data = [{
label: "United States",
data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
}, {
label: "Russia",
data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
}, {
label: "United Kingdom",
data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
}, {
label: "Germany",
data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
}, {
label: "Denmark",
data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
}, {
label: "Sweden",
data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
}, {
label: "Norway",
data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
}];
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
legend: {
noColumns: 2
},
xaxis: {
tickDecimals: 0
},
yaxis: {
min: 0
},
selection: {
mode: "x"
}
};
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom) {
plot = $.plot(placeholder, data, $.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
}
}));
}
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
plot.clearSelection();
});
$("#setSelection").click(function () {
plot.setSelection({
xaxis: {
from: 1994,
to: 1995
}
});
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Selection</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
<p>Flot supports selections through the selection plugin. You can enable rectangular selection or one-dimensional selection if the user should only be able to select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.</p>
<p>You selected: <span id="selection"></span></p>
<p>The plot command returns a plot object you can use to control the selection. Click the buttons below.</p>
<p>
<button id="clearSelection">Clear selection</button>
<button id="setSelection">Select year 1994</button>
</p>
<p>Selections are really useful for zooming. Just replot the chart with min and max values for the axes set to the values in the "plotselected" event triggered. Enable the checkbox below and select a region again.</p>
<p><label><input id="zoom" type="checkbox"></input>Zoom to selection.</label></p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/series-errorbars/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Error Bars</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.errorbars.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
<script type="text/javascript">
$(function() {
function drawArrow(ctx, x, y, radius){
ctx.beginPath();
ctx.moveTo(x + radius, y + radius);
ctx.lineTo(x, y);
ctx.lineTo(x - radius, y + radius);
ctx.stroke();
}
function drawSemiCircle(ctx, x, y, radius){
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI, false);
ctx.moveTo(x - radius, y);
ctx.lineTo(x + radius, y);
ctx.stroke();
}
var data1 = [
[1,1,.5,.1,.3],
[2,2,.3,.5,.2],
[3,3,.9,.5,.2],
[1.5,-.05,.5,.1,.3],
[3.15,1.,.5,.1,.3],
[2.5,-1.,.5,.1,.3]
];
var data1_points = {
show: true,
radius: 5,
fillColor: "blue",
errorbars: "xy",
xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"},
yerr: {show: true, color: "red", upperCap: "-"}
};
var data2 = [
[.7,3,.2,.4],
[1.5,2.2,.3,.4],
[2.3,1,.5,.2]
];
var data2_points = {
show: true,
radius: 5,
errorbars: "y",
yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle}
};
var data3 = [
[1,2,.4],
[2,0.5,.3],
[2.7,2,.5]
];
var data3_points = {
//do not show points
radius: 0,
errorbars: "y",
yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5}
};
var data4 = [
[1.3, 1],
[1.75, 2.5],
[2.5, 0.5]
];
var data4_errors = [0.1, 0.4, 0.2];
for (var i = 0; i < data4.length; i++) {
data4_errors[i] = data4[i].concat(data4_errors[i])
}
var data = [
{color: "blue", points: data1_points, data: data1, label: "data1"},
{color: "red", points: data2_points, data: data2, label: "data2"},
{color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"},
// bars with errors
{color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"},
{color: "orange", points: data3_points, data: data4_errors}
];
$.plot($("#placeholder"), data , {
legend: {
position: "sw",
show: true
},
series: {
lines: {
show: false
}
},
xaxis: {
min: 0.6,
max: 3.1
},
yaxis: {
min: 0,
max: 3.5
},
zoom: {
interactive: true
},
pan: {
interactive: true
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Error Bars</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder"></div>
</div>
<p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/series-pie/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/series-toggle/index.html 0 → 100644
View file @ b637d67b
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Toggling Series</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var datasets = {
"usa": {
label: "USA",
data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
},
"russia": {
label: "Russia",
data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
},
"uk": {
label: "UK",
data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
},
"germany": {
label: "Germany",
data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
},
"denmark": {
label: "Denmark",
data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
},
"sweden": {
label: "Sweden",
data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
},
"norway": {
label: "Norway",
data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
}
};
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
choiceContainer.append("<br/><input type='checkbox' name='" + key +
"' checked='checked' id='id" + key + "'></input>" +
"<label for='id" + key + "'>"
+ val.label + "</label>");
});
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key]) {
data.push(datasets[key]);
}
});
if (data.length > 0) {
$.plot("#placeholder", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
}
});
}
}
plotAccordingToChoices();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
</script>
</head>
<body>
<div id="header">
<h2>Toggling Series</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" style="float:left; width:725px;"></div>
<p id="choices" style="float:right; width:135px;"></p>
</div>
<p>This example shows military budgets for various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
<p>Since all data is available client-side, it's pretty easy to make the plot interactive. Try turning countries on and off with the checkboxes next to the plot.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
examples/series-types/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/setting-options.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/shared/jquery-ui/jquery-ui.min.css 0 → 100644
View file @ b637d67b
/*! jQuery UI - v1.10.0 - 2013-01-26
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css
* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}
\ No newline at end of file
examples/shared/jquery-ui/jquery-ui.min.js 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/stacking.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/stacking/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/symbols.html deleted 100644 → 0
View file @ a4ad4707
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.symbol.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>Various point types. Circles are built-in. For other
point types, you can define a little callback function to draw the
symbol; some common ones are available in the symbol plugin.</p>
<script type="text/javascript">
$(function () {
function generate(offset, amplitude) {
var res = [];
var start = 0, end = 10;
for (var i = 0; i <= 50; ++i) {
var x = start + i / 50 * (end - start);
res.push([x, amplitude * Math.sin(x + offset)]);
}
return res;
}
var data = [
{ data: generate(2, 1.8), points: { symbol: "circle" } },
{ data: generate(3, 1.5), points: { symbol: "square" } },
{ data: generate(4, 0.9), points: { symbol: "diamond" } },
{ data: generate(6, 1.4), points: { symbol: "triangle" } },
{ data: generate(7, 1.1), points: { symbol: "cross" } }
];
$.plot($("#placeholder"), data, {
series: { points: { show: true, radius: 3 } },
grid: { hoverable: true }
});
});
</script>
</body>
</html>
examples/symbols/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/threshold/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/thresholding.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/time.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/timezones.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/tracking.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/tracking/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/turning-series.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/visitors.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/visitors/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
examples/zooming.html deleted 100644 → 0
View file @ a4ad4707
This diff is collapsed.
examples/zooming/index.html 0 → 100644
View file @ b637d67b
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment