Skip to content

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

Re-styled and cleaned up all the examples.

parent 8e8327f5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3281 additions and 2686 deletions
examples/ajax/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: AJAX</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> var options = {
lines: {
<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> show: true
},
<p>The data is fetched over HTTP, in this case directly from text points: {
files. Usually the URL would point to some web server handler show: true
(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> xaxis: {
tickDecimals: 0,
<p> tickSize: 1
<input class="fetchSeries" type="button" value="First dataset"> - }
<a href="data-eu-gdp-growth.json">data</a> - };
<span></span>
</p> var data = [];
<p> $.plot("#placeholder", data, options);
<input class="fetchSeries" type="button" value="Second dataset"> -
<a href="data-japan-gdp-growth.json">data</a> - // Fetch one series, adding to what we already have
<span></span>
</p> var alreadyFetched = {};
<p> $("button.fetchSeries").click(function () {
<input class="fetchSeries" type="button" value="Third dataset"> -
<a href="data-usa-gdp-growth.json">data</a> - var button = $(this);
<span></span>
</p> // Find the URL in the link right next to us, then fetch the data
<p>If you combine AJAX with setTimeout, you can poll the server var dataurl = button.siblings('a').attr('href');
for new data.</p>
function onDataReceived(series) {
<p>
<input class="dataUpdate" type="button" value="Poll for data"> // Extract the first coordinate pair; jQuery has parsed it, so
</p> // the data is now just an ordinary JavaScript object
<script type="text/javascript"> var firstcoordinate = "(" + series.data[0][0] + ", " + series.data[0][1] + ")";
$(function () { button.siblings("span").text("Fetched " + series.label + ", first point: " + firstcoordinate);
var options = {
lines: { show: true }, // Push the new data onto our existing data array
points: { show: true },
xaxis: { tickDecimals: 0, tickSize: 1 } if (!alreadyFetched[series.label]) {
}; alreadyFetched[series.label] = true;
var data = []; data.push(series);
var placeholder = $("#placeholder"); }
$.plot(placeholder, data, options); $.plot("#placeholder", data, options);
}
// fetch one series, adding to what we got $.ajax({
var alreadyFetched = {}; url: dataurl,
type: "GET",
$("input.fetchSeries").click(function () { dataType: "json",
var button = $(this); success: onDataReceived
});
// find the URL in the link right next to us });
var dataurl = button.siblings('a').attr('href');
// Initiate a recurring data update
// then fetch the data with jQuery
function onDataReceived(series) { $("button.dataUpdate").click(function () {
// extract the first coordinate pair so you can see that
// data is now an ordinary Javascript object data = [];
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')'; alreadyFetched = {};
button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate); $.plot("#placeholder", data, options);
// let's add it to our current data var iteration = 0;
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true; function fetchData() {
data.push(series);
} ++iteration;
// and plot all we got function onDataReceived(series) {
$.plot(placeholder, data, options);
} // Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
$.ajax({
url: dataurl, data = [ series ];
type: 'GET', $.plot("#placeholder", data, options);
dataType: 'json', }
success: onDataReceived
}); // 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.
// initiate a recurring data update $.ajax({
$("input.dataUpdate").click(function () { url: "data-eu-gdp-growth-" + iteration + ".json",
// reset data type: "GET",
data = []; dataType: "json",
alreadyFetched = {}; success: onDataReceived
});
$.plot(placeholder, data, options);
if (iteration < 5) {
var iteration = 0; setTimeout(fetchData, 1000);
} else {
function fetchData() { data = [];
++iteration; alreadyFetched = {};
}
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 setTimeout(fetchData, 1000);
data = [ series ]; });
});
$.plot($("#placeholder"), data, options);
} </script>
</head>
$.ajax({ <body>
// usually, we'll just call the same URL, a script
// connected to a database, but in this case we only <div id="header">
// have static example files so we need to modify the <h2>AJAX</h2>
// URL </div>
url: "data-eu-gdp-growth-" + iteration + ".json",
type: 'GET', <div id="content">
dataType: 'json',
success: onDataReceived <div class="demo-container">
}); <div id="placeholder"></div>
</div>
if (iteration < 5)
setTimeout(fetchData, 1000); <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>
else {
data = []; <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>
alreadyFetched = {};
} <p>
} <button class="fetchSeries">First dataset</button>
[ <a href="data-eu-gdp-growth.json">see data</a> ]
setTimeout(fetchData, 1000); <span></span>
}); </p>
});
</script> <p>
<button class="fetchSeries">Second dataset</button>
</body> [ <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> </html>
examples/annotating/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Adding Annotations</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> var d1 = [];
for (var i = 0; i < 20; ++i) {
<p>Flot has support for simple background decorations such as d1.push([i, Math.sin(i)]);
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 var data = [{ data: d1, label: "Pressure", color: "#333" }];
also direct access to the canvas.</p>
var markings = [
<script type="text/javascript"> { color: "#f6f6f6", yaxis: { from: 1 } },
$(function () { { color: "#f6f6f6", yaxis: { to: -1 } },
// generate a dataset { color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } },
var d1 = []; { color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } }
for (var i = 0; i < 20; ++i) ];
d1.push([i, Math.sin(i)]);
var placeholder = $("#placeholder");
var data = [{ data: d1, label: "Pressure", color: "#333" }];
var plot = $.plot(placeholder, data, {
// setup background areas bars: { show: true, barWidth: 0.5, fill: 0.9 },
var markings = [ xaxis: { ticks: [], autoscaleMargin: 0.02 },
{ color: '#f6f6f6', yaxis: { from: 1 } }, yaxis: { min: -2, max: 2 },
{ color: '#f6f6f6', yaxis: { to: -1 } }, grid: { markings: markings }
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } }, });
{ color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
]; var o = plot.pointOffset({ x: 2, y: -1.2});
var placeholder = $("#placeholder"); // Append it to the placeholder that Flot already uses for positioning
// plot it placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
var plot = $.plot(placeholder, data, {
bars: { show: true, barWidth: 0.5, fill: 0.9 }, o = plot.pointOffset({ x: 8, y: -1.2});
xaxis: { ticks: [], autoscaleMargin: 0.02 }, placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
yaxis: { min: -2, max: 2 },
grid: { markings: markings } // Draw a little arrow on top of the last label to demonstrate canvas
}); // drawing
// add labels var ctx = plot.getCanvas().getContext("2d");
var o; ctx.beginPath();
o.left += 4;
o = plot.pointOffset({ x: 2, y: -1.2}); ctx.moveTo(o.left, o.top);
// we just append it to the placeholder which Flot already uses ctx.lineTo(o.left, o.top - 10);
// for positioning ctx.lineTo(o.left + 10, o.top - 5);
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>'); ctx.lineTo(o.left, o.top);
ctx.fillStyle = "#000";
o = plot.pointOffset({ x: 8, y: -1.2}); ctx.fill();
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 </script>
// canvas drawing </head>
var ctx = plot.getCanvas().getContext("2d"); <body>
ctx.beginPath();
o.left += 4; <div id="header">
ctx.moveTo(o.left, o.top); <h2>Adding Annotations</h2>
ctx.lineTo(o.left, o.top - 10); </div>
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top); <div id="content">
ctx.fillStyle = "#000";
ctx.fill(); <div class="demo-container">
}); <div id="placeholder"></div>
</script> </div>
</body> <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> </html>
examples/axes-interacting/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Interacting with axes</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> function generate(start, end, fn) {
var res = [];
<p>With multiple axes, you sometimes need to interact with them. A for (var i = 0; i <= 100; ++i) {
simple way to do this is to draw the plot, deduce the axis var x = start + i / 100 * (end - start);
placements and insert a couple of divs on top to catch events. res.push([x, fn(x)]);
Try clicking an axis.</p> }
return res;
<p id="click"></p> }
<script type="text/javascript"> var data = [
$(function () { { data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 },
function generate(start, end, fn) { { data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 },
var res = []; { data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 },
for (var i = 0; i <= 100; ++i) { { data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 }
var x = start + i / 100 * (end - start); ];
res.push([x, fn(x)]);
} var plot = $.plot($("#placeholder"), data, {
return res; xaxes: [
} { position: 'bottom' },
{ position: 'top'}
var data = [ ],
{ data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 }, yaxes: [
{ data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 }, { position: 'left' },
{ data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 }, { position: 'left' },
{ data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 } { position: 'right' },
]; { position: 'left' }
]
var plot = $.plot($("#placeholder"), });
data,
{ // now for each axis, create a div
xaxes: [ $.each(plot.getAxes(), function (i, axis) {
{ position: 'bottom' }, if (!axis.show)
{ position: 'top'} return;
],
yaxes: [ var box = axis.box;
{ position: 'left' },
{ position: 'left' }, $('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>')
{ position: 'right' }, .data('axis.direction', axis.direction)
{ position: 'left' } .data('axis.n', axis.n)
] .css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" })
}); .appendTo(plot.getPlaceholder())
.hover(
// now for each axis, create a div function () { $(this).css({ opacity: 0.10 }) },
$.each(plot.getAxes(), function (i, axis) { function () { $(this).css({ opacity: 0 }) }
if (!axis.show) )
return; .click(function () {
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!")
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) </script>
.css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" }) </head>
.appendTo(plot.getPlaceholder()) <body>
.hover(
function () { $(this).css({ opacity: 0.10 }) }, <div id="header">
function () { $(this).css({ opacity: 0 }) } <h2>Interacting with axes</h2>
) </div>
.click(function () {
$("#click").text("You clicked the " + axis.direction + axis.n + "axis!") <div id="content">
});
}); <div class="demo-container">
}); <div id="placeholder"></div>
</script> </div>
</body>
<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> </html>
examples/axes-multiple/index.html
View file @ ed791745
This diff is collapsed.
examples/axes-time-zones/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Example</title> <title>Flot Examples: Time zones</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link> <link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> <!--[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.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">
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> $(function() {
<script language="javascript" type="text/javascript" src="../jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
</head>
<body>
<h1>Timezone Examples</h1>
<table>
<tr><td>UTC</td><td><div id="placeholderUTC" style="width:600px;height:100px;"></div></td></tr>
<tr><td>Browser</td><td><div id="placeholderLocal" style="width:600px;height:100px;"></div></td></tr>
<tr><td>Chicago</td><td><div id="placeholderChicago" style="width:600px;height:100px;"></div></td></tr>
</table>
<script language="javascript" type="text/javascript" src="date.js"></script>
<script id="source">
$(function () {
timezoneJS.timezone.zoneFileBasePath = "tz"; timezoneJS.timezone.zoneFileBasePath = "tz";
timezoneJS.timezone.defaultZoneFile = [ ]; timezoneJS.timezone.defaultZoneFile = [];
timezoneJS.timezone.init(); 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 d = [ var plot = $.plot("#placeholderUTC", [d], {
[Date.UTC(2011, 2, 12, 14, 0, 0), 28], xaxis: {
[Date.UTC(2011, 2, 12, 15, 0, 0), 27], mode: "time"
[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], {
var plot = $.plot($("#placeholderLocal"), [d], { xaxis: { mode: "time", timezone: "browser" } }); xaxis: {
var plot = $.plot($("#placeholderChicago"), [d], { xaxis: { mode: "time", timezone: "America/Chicago" } }); mode: "time",
timezone: "browser"
}); }
</script> });
</body> var plot = $.plot("#placeholderChicago", [d], {
xaxis: {
mode: "time",
timezone: "America/Chicago"
}
});
});
</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> </html>
examples/axes-time/index.html
View file @ ed791745
This diff is collapsed.
examples/basic-options/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Basic Options</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function () {
<div id="placeholder" style="width:600px;height:300px"></div> var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25) {
d1.push([i, Math.sin(i)]);
}
<p>There are plenty of options you can set to control the precise looks of var d2 = [];
your plot. You can control the ticks on the axes, the legend, the graph for (var i = 0; i < Math.PI * 2; i += 0.25) {
type, etc. The idea is that Flot goes to great lengths to provide sensible d2.push([i, Math.cos(i)]);
defaults so that you don't have to customize much for a good result.</p> }
<script type="text/javascript"> var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1) {
d3.push([i, Math.tan(i)]);
}
$(function () { $.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
}
}
});
});
var d1 = []; </script>
for ( var i = 0; i < Math.PI * 2; i += 0.25 ) { </head>
d1.push([ i, Math.sin( i ) ]); <body>
}
var d2 = []; <div id="header">
for (var i = 0; i < Math.PI * 2; i += 0.25) { <h2>Basic Options</h2>
d2.push([ i, Math.cos( i ) ]); </div>
}
var d3 = []; <div id="content">
for (var i = 0; i < Math.PI * 2; i += 0.1) {
d3.push([ i, Math.tan( i ) ]);
}
$.plot( $("#placeholder"), [ <div class="demo-container">
{ label: "sin(x)", data: d1 }, <div id="placeholder"></div>
{ label: "cos(x)", data: d2 }, </div>
{ label: "tan(x)", data: d3 }
], { <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>
series: {
lines: { show: true }, <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>
points: { show: true }
}, </div>
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
}
}
});
});
</script> <div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body> </body>
</html> </html>
examples/basic-usage/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Basic Usage</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
var d1 = [];
<div id="placeholder" style="width:600px;height:300px;"></div> for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
<p>Simple example. You don't need to specify much to get an
attractive look. Put in a placeholder, make sure you set its var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
dimensions (otherwise the plot library will barf) and call the
plot function with the data. The axes are automatically // a null signifies separate line segments
scaled.</p> var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
<script type="text/javascript"> $.plot("#placeholder", [ d1, d2, d3 ]);
$(function () { });
var d1 = [];
for (var i = 0; i < 14; i += 0.5) </script>
d1.push([i, Math.sin(i)]); </head>
<body>
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
<div id="header">
// a null signifies separate line segments <h2>Basic Usage</h2>
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; </div>
$.plot($("#placeholder"), [ d1, d2, d3 ]); <div id="content">
});
</script> <div class="demo-container">
<div id="placeholder"></div>
</body> </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> </html>
examples/categories/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Categories</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.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 language="javascript" type="text/javascript" src="../../jquery.flot.categories.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
<p>With the categories plugin you can plot categories/textual data $.plot($("#placeholder"), [ data ], {
easily.</p> series: {
bars: {
<script type="text/javascript"> show: true,
$(function () { barWidth: 0.6,
var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ]; align: "center"
}
$.plot($("#placeholder"), [ data ], { },
series: { xaxis: {
bars: { mode: "categories",
show: true, tickLength: 0
barWidth: 0.6, }
align: "center" } });
},
xaxis: { });
mode: "categories",
tickLength: 0 </script>
} </head>
}); <body>
});
</script> <div id="header">
<h2>Categories</h2>
</body> </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> </html>
examples/image/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Image Plots</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.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 language="javascript" type="text/javascript" src="../../jquery.flot.image.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:400px;height:400px;"></div> var data = [[["hs-2004-27-a-large-web.jpg", -10, -10, 10, 10]]];
<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p> var options = {
series: {
<p>With the image plugin, you can plot images. This is for example images: {
useful for getting ticks on complex prerendered visualizations. show: true
Instead of inputting data points, you put in the images and where }
their two opposite corners are supposed to be in plot space.</p> },
xaxis: {
<p>Images represent a little further complication because you need min: -8,
to make sure they are loaded before you can use them (Flot skips max: 4
incomplete images). The plugin comes with a couple of helpers },
for doing that.</p> yaxis: {
min: -8,
<script type="text/javascript"> max: 4
$(function () { }
var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ]; };
var options = {
series: { images: { show: true } }, $.plot.image.loadDataImages(data, options, function () {
xaxis: { min: -8, max: 4 }, $.plot($("#placeholder"), data, options);
yaxis: { min: -8, max: 4 } });
}; });
$.plot.image.loadDataImages(data, options, function () { </script>
$.plot($("#placeholder"), data, options); </head>
}); <body>
});
</script> <div id="header">
<h2>Image Plots</h2>
</body> </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> </html>
examples/interacting/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Interactivity</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px"></div> var sin = [],
cos = [];
<p>One of the goals of Flot is to support user interactions. Try
pointing and clicking on the points.</p> for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
<p> cos.push([i, Math.cos(i)]);
<label><input id="enablePosition" type="checkbox">Show mouse position</label> }
<span id="hoverdata"></span>
<span id="clickdata"></span> var plot = $.plot($("#placeholder"), [
</p> { data: sin, label: "sin(x)"},
{ data: cos, label: "cos(x)"}
<p>A tooltip is easy to build with a bit of jQuery code and the ], {
data returned from the plot.</p> series: {
lines: {
<p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p> show: true
},
<script type="text/javascript"> points: {
$(function () { show: true
var sin = [], cos = []; }
for (var i = 0; i < 14; i += 0.5) { },
sin.push([i, Math.sin(i)]); grid: {
cos.push([i, Math.cos(i)]); hoverable: true,
} clickable: true
},
var plot = $.plot($("#placeholder"), yaxis: {
[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], { min: -1.2,
series: { max: 1.2
lines: { show: true }, }
points: { show: true } });
},
grid: { hoverable: true, clickable: true }, function showTooltip(x, y, contents) {
yaxis: { min: -1.2, max: 1.2 } $("<div id='tooltip'>" + contents + "</div>").css({
}); position: "absolute",
display: "none",
function showTooltip(x, y, contents) { top: y + 5,
$('<div id="tooltip">' + contents + '</div>').css( { left: x + 5,
position: 'absolute', border: "1px solid #fdd",
display: 'none', padding: "2px",
top: y + 5, "background-color": "#fee",
left: x + 5, opacity: 0.80
border: '1px solid #fdd', }).appendTo("body").fadeIn(200);
padding: '2px', }
'background-color': '#fee',
opacity: 0.80 var previousPoint = null;
}).appendTo("body").fadeIn(200); $("#placeholder").bind("plothover", function (event, pos, item) {
}
if ($("#enablePosition:checked").length > 0) {
var previousPoint = null; var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#placeholder").bind("plothover", function (event, pos, item) { $("#hoverdata").text(str);
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) {
if ($("#enableTooltip:checked").length > 0) {
if (item) { previousPoint = item.dataIndex;
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex; $("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
$("#tooltip").remove(); y = item.datapoint[1].toFixed(2);
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = " + y);
showTooltip(item.pageX, item.pageY, }
item.series.label + " of " + x + " = " + y); } else {
} $("#tooltip").remove();
} previousPoint = null;
else { }
$("#tooltip").remove(); }
previousPoint = null; });
}
} $("#placeholder").bind("plotclick", function (event, pos, item) {
}); if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
$("#placeholder").bind("plotclick", function (event, pos, item) { plot.highlight(item.series, item.datapoint);
if (item) { }
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label); });
plot.highlight(item.series, item.datapoint); });
}
}); </script>
}); </head>
</script> <body>
</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> </html>
examples/navigate/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Navigation</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <style type="text/css">
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> #placeholder .button {
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script> position: absolute;
<style type="text/css"> cursor: pointer;
#placeholder .button { }
position: absolute;
cursor: pointer; #placeholder div.button {
} font-size: smaller;
#placeholder div.button { color: #999;
font-size: smaller; background-color: #eee;
color: #999; padding: 2px;
background-color: #eee; }
padding: 2px; .message {
} padding-left: 50px;
.message { font-size: smaller;
padding-left: 50px; }
font-size: smaller;
} </style>
</style> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
</head> <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<body> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<h1>Flot Examples</h1> <script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
<script type="text/javascript">
<div id="placeholder" style="width:600px;height:300px;"></div>
$(function() {
<p class="message"></p>
// generate data set from a parametric function with a fractal look
<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> function sumf(f, t, m) {
var res = 0;
<p>The plugin fires events (useful for synchronizing several for (var i = 1; i < m; ++i) {
plots) and adds a couple of public methods so you can easily build res += f(i * i * t) / (i * i);
a little user interface around it, like the little buttons at the }
top right in the plot.</p> return res;
}
<script type="text/javascript"> var d1 = [];
$(function () { for (var t = 0; t <= 2 * Math.PI; t += 0.01) {
// generate data set from a parametric function with a fractal d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
// look }
function sumf(f, t, m) {
var res = 0; var data = [ d1 ],
for (var i = 1; i < m; ++i) placeholder = $("#placeholder");
res += f(i * i * t) / (i * i);
return res; var plot = $.plot(placeholder, data, {
} series: {
lines: {
var d1 = []; show: true
for (var t = 0; t <= 2 * Math.PI; t += 0.01) },
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]); shadowSize: 0
var data = [ d1 ]; },
xaxis: {
zoomRange: [0.1, 10],
var placeholder = $("#placeholder"); panRange: [-10, 10]
var options = { },
series: { lines: { show: true }, shadowSize: 0 }, yaxis: {
xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, zoomRange: [0.1, 10],
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, panRange: [-10, 10]
zoom: { },
interactive: true zoom: {
}, interactive: true
pan: { },
interactive: true pan: {
} interactive: true
}; }
});
var plot = $.plot(placeholder, data, options);
// show pan/zoom messages to illustrate events
// show pan/zoom messages to illustrate events
placeholder.bind('plotpan', function (event, plot) { placeholder.bind("plotpan", function (event, plot) {
var axes = plot.getAxes(); var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2) $(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2) + " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2) + " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2)); + " &ndash; " + axes.yaxis.max.toFixed(2));
}); });
placeholder.bind('plotzoom', function (event, plot) { placeholder.bind("plotzoom", function (event, plot) {
var axes = plot.getAxes(); var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2) $(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " &ndash; " + axes.xaxis.max.toFixed(2) + " &ndash; " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2) + " and y: " + axes.yaxis.min.toFixed(2)
+ " &ndash; " + axes.yaxis.max.toFixed(2)); + " &ndash; " + axes.yaxis.max.toFixed(2));
}); });
// add zoom out button // add zoom out button
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
e.preventDefault(); $("<div class='button' style='right:20px;top:20px'>zoom out</div>")
plot.zoomOut(); .appendTo(placeholder)
}); .click(function (event) {
event.preventDefault();
// and add panning buttons plot.zoomOut();
});
// little helper for taking the repetitive work out of placing
// panning arrows // and add panning buttons
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) { // little helper for taking the repetitive work out of placing
e.preventDefault(); // panning arrows
plot.pan(offset);
}); function addArrow(dir, right, top, offset) {
} $("<img class='button' src='arrow-" + dir + ".gif' style='right:" + right + "px;top:" + top + "px'>")
.appendTo(placeholder)
addArrow('left', 55, 60, { left: -100 }); .click(function (e) {
addArrow('right', 25, 60, { left: 100 }); e.preventDefault();
addArrow('up', 40, 45, { top: -100 }); plot.pan(offset);
addArrow('down', 40, 75, { top: 100 }); });
}); }
</script>
addArrow("left", 55, 60, { left: -100 });
</body> addArrow("right", 25, 60, { left: 100 });
addArrow("up", 40, 45, { top: -100 });
addArrow("down", 40, 75, { top: 100 });
});
</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> </html>
examples/percentiles/index.html
View file @ ed791745
This diff is collapsed.
examples/realtime/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Real-time updates</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> // We use an inline data source in the example, usually data would
// be fetched from a server
<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> var data = [],
totalPoints = 300;
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
function getRandomData() {
<script type="text/javascript">
$(function () { if (data.length > 0)
// we use an inline data source in the example, usually data would data = data.slice(1);
// be fetched from a server
var data = [], totalPoints = 300; // Do a random walk
function getRandomData() {
if (data.length > 0) while (data.length < totalPoints) {
data = data.slice(1);
var prev = data.length > 0 ? data[data.length - 1] : 50,
// do a random walk y = prev + Math.random() * 10 - 5;
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50; if (y < 0) {
var y = prev + Math.random() * 10 - 5; y = 0;
if (y < 0) } else if (y > 100) {
y = 0; y = 100;
if (y > 100) }
y = 100;
data.push(y); data.push(y);
} }
// zip the generated y values with the x values // Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) var res = [];
res.push([i, data[i]]) for (var i = 0; i < data.length; ++i) {
return res; res.push([i, data[i]])
} }
// setup control widget return res;
var updateInterval = 30; }
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val(); // Set up the control widget
if (v && !isNaN(+v)) {
updateInterval = +v; var updateInterval = 30;
if (updateInterval < 1) $("#updateInterval").val(updateInterval).change(function () {
updateInterval = 1; var v = $(this).val();
if (updateInterval > 2000) if (v && !isNaN(+v)) {
updateInterval = 2000; updateInterval = +v;
$(this).val("" + updateInterval); if (updateInterval < 1) {
} updateInterval = 1;
}); } else if (updateInterval > 2000) {
updateInterval = 2000;
// setup plot }
var options = { $(this).val("" + updateInterval);
series: { shadowSize: 0 }, // drawing is faster without shadows }
yaxis: { min: 0, max: 100 }, });
xaxis: { show: false }
}; var plot = $.plot($("#placeholder"), [ getRandomData() ], {
var plot = $.plot($("#placeholder"), [ getRandomData() ], options); series: {
shadowSize: 0 // drawing is faster without shadows
function update() { },
plot.setData([ getRandomData() ]); yaxis: {
// since the axes don't change, we don't need to call plot.setupGrid() min: 0,
plot.draw(); max: 100
},
setTimeout(update, updateInterval); xaxis: {
} show: false
}
update(); });
});
</script> function update() {
plot.setData([ getRandomData() ]);
</body> // Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</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> </html>
examples/resize/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Resizing</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <style type="text/css">
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> .message {
<script language="javascript" type="text/javascript" src="../jquery.flot.resize.js"></script> padding-left: 50px;
<style type="text/css"> font-size: smaller;
html, body { }
height: 100%; /* make the percentage height on placeholder work */
} </style>
.message { <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
padding-left: 50px; <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
font-size: smaller; <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
} <script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
</style> <script type="text/javascript">
</head>
<body> $(function() {
<h1>Flot Examples</h1>
var d1 = [];
<div id="placeholder" style="width:80%;height:40%;"></div> for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
<p class="message"></p> }
<p>Sometimes it makes more sense to just let the plot take up the var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
available space. In that case, we need to redraw the plot each var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
time the placeholder changes its size. If you include the resize
plugin, this is handled automatically.</p> var placeholder = $("#placeholder");
var plot = $.plot(placeholder, [d1, d2, d3]);
<p>Try resizing the window.</p>
// The plugin includes a jQuery plugin for adding resize events to any
// element. Add a callback so we can display the placeholder size.
<script type="text/javascript">
$(function () { placeholder.resize(function () {
var d1 = []; $(".message").text("Placeholder is now "
for (var i = 0; i < 14; i += 0.5) + $(this).width() + "x" + $(this).height()
d1.push([i, Math.sin(i)]); + " pixels");
});
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; });
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
</script>
var placeholder = $("#placeholder"); </head>
<body>
var plot = $.plot(placeholder, [d1, d2, d3]);
<div id="header">
// the plugin includes a jQuery plugin for adding resize events to <h2>Resizing</h2>
// any element, let's just add a callback so we can display the </div>
// placeholder size
placeholder.resize(function () { <div id="content" style="width:100%;">
$(".message").text("Placeholder is now "
+ $(this).width() + "x" + $(this).height() <div class="demo-container" style="width:100%;">
+ " pixels"); <div id="placeholder"></div>
}); </div>
});
</script> <p class="message"></p>
</body> <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 handles at the bottom and right of the plot to resize it.</p>-->
<p>Try resizing the window.</p>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html> </html>
examples/selection/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Selection</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.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 language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px"></div> var data = [{
label: "United States",
<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> 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]]
}, {
<p>Flot supports selections through the selection plugin. label: "Russia",
You can enable rectangular selection 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]]
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 label: "United Kingdom",
where selection on the x axis is enabled.</p> 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]]
}, {
<p>You selected: <span id="selection"></span></p> 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]]
<p>The plot command returns a plot object you can use to control }, {
the selection. Click the buttons below.</p> 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]]
<p><input id="clearSelection" type="button" value="Clear selection" /> }, {
<input id="setSelection" type="button" value="Select year 1994" /></p> 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]]
<p>Selections are really useful for zooming. Just replot the }, {
chart with min and max values for the axes set to the values label: "Norway",
in the "plotselected" event triggered. Enable the checkbox 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]]
below and select a region again.</p> }];
<p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p> var options = {
series: {
<script type="text/javascript"> lines: {
$(function () { show: true
var data = [ },
{ points: {
label: "United States", show: true
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]] }
}, },
{ legend: {
label: "Russia", noColumns: 2
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]] },
}, xaxis: {
{ tickDecimals: 0
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]] yaxis: {
}, min: 0
{ },
label: "Germany", selection: {
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]] mode: "x"
}, }
{ };
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]] var placeholder = $("#placeholder");
},
{ placeholder.bind("plotselected", function (event, ranges) {
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]] $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
},
{ var zoom = $("#zoom").attr("checked");
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]] if (zoom) {
} plot = $.plot(placeholder, data, $.extend(true, {}, options, {
]; xaxis: {
min: ranges.xaxis.from,
var options = { max: ranges.xaxis.to
series: { }
lines: { show: true }, }));
points: { show: true } }
}, });
legend: { noColumns: 2 },
xaxis: { tickDecimals: 0 }, placeholder.bind("plotunselected", function (event) {
yaxis: { min: 0 }, $("#selection").text("");
selection: { mode: "x" } });
};
var plot = $.plot(placeholder, data, options);
var placeholder = $("#placeholder");
$("#clearSelection").click(function () {
placeholder.bind("plotselected", function (event, ranges) { plot.clearSelection();
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1)); });
var zoom = $("#zoom").attr("checked"); $("#setSelection").click(function () {
if (zoom) plot.setSelection({
plot = $.plot(placeholder, data, xaxis: {
$.extend(true, {}, options, { from: 1994,
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to } to: 1995
})); }
}); });
});
placeholder.bind("plotunselected", function (event) { });
$("#selection").text("");
}); </script>
</head>
var plot = $.plot(placeholder, data, options); <body>
$("#clearSelection").click(function () { <div id="header">
plot.clearSelection(); <h2>Selection</h2>
}); </div>
$("#setSelection").click(function () { <div id="content">
plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
}); <div class="demo-container">
}); <div id="placeholder"></div>
</script> </div>
</body> <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> </html>
examples/series-errorbars/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Error Bars</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.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.errorbars.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.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
}
});
});
</script>
</head> </head>
<body> <body>
<h1>Flot Examples</h1> <div id="header">
<h2>Error Bars</h2>
<div id="placeholder" style="width:600px;height:400px;"></div> </div>
<p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p> <div id="content">
<script type="text/javascript" language="javascript"> <div class="demo-container">
$(function () { <div id="placeholder"></div>
</div>
function drawArrow(ctx, x, y, radius){
ctx.beginPath(); <p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p>
ctx.moveTo(x + radius, y + radius);
ctx.lineTo(x, y); </div>
ctx.lineTo(x - radius, y + radius);
ctx.stroke(); <div id="footer">
} Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
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> </body>
</html> </html>
examples/series-pie/index.html
View file @ ed791745
This diff is collapsed.
examples/series-toggle/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Toggling Series</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px;"></div> var datasets = {
"usa": {
<p>Here is an example with real data: military budgets for label: "USA",
various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p> 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]]
},
<p>Since all data is available client-side, it's pretty easy to "russia": {
make the plot interactive. Try turning countries on/off with the label: "Russia",
checkboxes below.</p> 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]]
},
<p id="choices">Show:</p> "uk": {
label: "UK",
<script type="text/javascript"> 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]]
$(function () { },
var datasets = { "germany": {
"usa": { label: "Germany",
label: "USA", 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]]
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]] },
}, "denmark": {
"russia": { label: "Denmark",
label: "Russia", 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]]
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]] },
}, "sweden": {
"uk": { label: "Sweden",
label: "UK", 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]]
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]] },
}, "norway": {
"germany": { label: "Norway",
label: "Germany", 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]]
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", // hard-code color indices to prevent them from shifting as
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]] // countries are turned on/off
},
"sweden": { var i = 0;
label: "Sweden", $.each(datasets, function(key, val) {
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]] val.color = i;
}, ++i;
"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]] // insert checkboxes
} var choiceContainer = $("#choices");
}; $.each(datasets, function(key, val) {
choiceContainer.append("<br/><input type='checkbox' name='" + key +
// hard-code color indices to prevent them from shifting as "' checked='checked' id='id" + key + "'></input>" +
// countries are turned on/off "<label for='id" + key + "'>"
var i = 0; + val.label + "</label>");
$.each(datasets, function(key, val) { });
val.color = i;
++i; choiceContainer.find("input").click(plotAccordingToChoices);
});
function plotAccordingToChoices() {
// insert checkboxes
var choiceContainer = $("#choices"); var data = [];
$.each(datasets, function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' + key + choiceContainer.find("input:checked").each(function () {
'" checked="checked" id="id' + key + '">' + var key = $(this).attr("name");
'<label for="id' + key + '">' if (key && datasets[key]) {
+ val.label + '</label>'); data.push(datasets[key]);
}); }
choiceContainer.find("input").click(plotAccordingToChoices); });
if (data.length > 0) {
function plotAccordingToChoices() { $.plot($("#placeholder"), data, {
var data = []; yaxis: {
min: 0
choiceContainer.find("input:checked").each(function () { },
var key = $(this).attr("name"); xaxis: {
if (key && datasets[key]) tickDecimals: 0
data.push(datasets[key]); }
}); });
}
if (data.length > 0) }
$.plot($("#placeholder"), data, {
yaxis: { min: 0 }, plotAccordingToChoices();
xaxis: { tickDecimals: 0 } });
});
} </script>
</head>
plotAccordingToChoices(); <body>
});
</script> <div id="header">
<h2>Toggling Series</h2>
</body> </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> </html>
examples/series-types/index.html
View file @ ed791745
<!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> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title> <title>Flot Examples: Series Types</title>
<link href="layout.css" rel="stylesheet" type="text/css"> <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]--> <!--[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.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
</head> <script type="text/javascript">
<body>
<h1>Flot Examples</h1> $(function() {
<div id="placeholder" style="width:600px;height:300px"></div> var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
<p>Flot supports lines, points, filled areas, bars and any d1.push([i, Math.sin(i)]);
combinations of these, in the same plot and even on the same data }
series.</p>
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
<script type="text/javascript">
$(function () { var d3 = [];
var d1 = []; for (var i = 0; i < 14; i += 0.5) {
for (var i = 0; i < 14; i += 0.5) d3.push([i, Math.cos(i)]);
d1.push([i, Math.sin(i)]); }
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; var d4 = [];
for (var i = 0; i < 14; i += 0.1) {
var d3 = []; d4.push([i, Math.sqrt(i * 10)]);
for (var i = 0; i < 14; i += 0.5) }
d3.push([i, Math.cos(i)]);
var d5 = [];
var d4 = []; for (var i = 0; i < 14; i += 0.5) {
for (var i = 0; i < 14; i += 0.1) d5.push([i, Math.sqrt(i)]);
d4.push([i, Math.sqrt(i * 10)]); }
var d5 = []; var d6 = [];
for (var i = 0; i < 14; i += 0.5) for (var i = 0; i < 14; i += 0.5 + Math.random()) {
d5.push([i, Math.sqrt(i)]); d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
}
var d6 = [];
for (var i = 0; i < 14; i += 0.5 + Math.random()) $.plot($("#placeholder"), [{
d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]); data: d1,
lines: { show: true, fill: true }
$.plot($("#placeholder"), [ }, {
{ data: d2,
data: d1, bars: { show: true }
lines: { show: true, fill: true } }, {
}, data: d3,
{ points: { show: true }
data: d2, }, {
bars: { show: true } data: d4,
}, lines: { show: true }
{ }, {
data: d3, data: d5,
points: { show: true } lines: { show: true },
}, points: { show: true }
{ }, {
data: d4, data: d6,
lines: { show: true } lines: { show: true, steps: true }
}, }]);
{ });
data: d5,
lines: { show: true }, </script>
points: { show: true } </head>
}, <body>
{
data: d6, <div id="header">
lines: { show: true, steps: true } <h2>Series Types</h2>
} </div>
]);
}); <div id="content">
</script>
<div class="demo-container">
</body> <div id="placeholder"></div>
</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>
</div>
<div id="footer">
Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html> </html>
examples/stacking/index.html
View file @ ed791745
This diff is collapsed.
examples/symbols/index.html
View file @ ed791745
This diff is collapsed.
examples/threshold/index.html
View file @ ed791745
This diff is collapsed.
examples/tracking/index.html
View file @ ed791745
This diff is collapsed.
examples/visitors/index.html
View file @ ed791745
This diff is collapsed.
examples/zooming/index.html
View file @ ed791745
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