RubyGems - rails_modular_admin - Versions diffs - 0.3.1 → 0.4.0 - Mend

rails_modular_admin 0.3.1 → 0.4.0

Files changed (1416) hide show

data/app/assets/node_modules/jquery-flot/examples/navigate/index.html ADDED Viewed

@@ -0,0 +1,153 @@
+<!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" class="demo-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 - 2014 IOLA and Ole Laursen
+	</div>
+</body>
+</html>

data/app/assets/node_modules/jquery-flot/examples/percentiles/index.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!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" class="demo-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 - 2014 IOLA and Ole Laursen
+	</div>
+</body>
+</html>

data/app/assets/node_modules/jquery-flot/examples/realtime/index.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!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" class="demo-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 - 2014 IOLA and Ole Laursen
+	</div>
+</body>
+</html>

data/app/assets/node_modules/jquery-flot/examples/resize/index.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!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" class="demo-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 - 2014 IOLA and Ole Laursen
+	</div>
+</body>
+</html>

data/app/assets/node_modules/jquery-flot/examples/selection/index.html ADDED Viewed

@@ -0,0 +1,152 @@
+<!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() {
+		// Shim allowing us to get the state of the check-box on jQuery versions
+		// prior to 1.6, when prop was added.  The reason we don't just use attr
+		// is because it doesn't work in jQuery versions 1.9.x and later.
+		// TODO: Remove this once Flot's minimum supported jQuery reaches 1.6.
+		if (typeof $.fn.prop != 'function') {
+		    $.fn.prop = $.fn.attr;
+		}
+		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").prop("checked");
+			if (zoom) {
+				$.each(plot.getXAxes(), function(_, axis) {
+					var opts = axis.options;
+					opts.min = ranges.xaxis.from;
+					opts.max = ranges.xaxis.to;
+				});
+				plot.setupGrid();
+				plot.draw();
+				plot.clearSelection();
+			}
+		});
+		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" class="demo-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 - 2014 IOLA and Ole Laursen
+	</div>
+</body>
+</html>