1 files changed, 130 insertions, 0 deletions
diff --git a/examples/interacting/index.html b/examples/interacting/index.html
new file mode 100644
index 0000000..19136df
--- /dev/null
+++ b/examples/interacting/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Flot Examples: Interactivity</title>
+	<link href="../examples.css" rel="stylesheet" type="text/css">
+	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
+	<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
+	<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
+	<script type="text/javascript">
+
+	$(function() {
+
+		var sin = [],
+			cos = [];
+
+		for (var i = 0; i < 14; i += 0.5) {
+			sin.push([i, Math.sin(i)]);
+			cos.push([i, Math.cos(i)]);
+		}
+
+		var plot = $.plot("#placeholder", [
+			{ data: sin, label: "sin(x)"},
+			{ data: cos, label: "cos(x)"}
+		], {
+			series: {
+				lines: {
+					show: true
+				},
+				points: {
+					show: true
+				}
+			},
+			grid: {
+				hoverable: true,
+				clickable: true
+			},
+			yaxis: {
+				min: -1.2,
+				max: 1.2
+			}
+		});
+
+		function showTooltip(x, y, contents) {
+			$("<div id='tooltip'>" + contents + "</div>").css({
+				position: "absolute",
+				display: "none",
+				top: y + 5,
+				left: x + 5,
+				border: "1px solid #fdd",
+				padding: "2px",
+				"background-color": "#fee",
+				opacity: 0.80
+			}).appendTo("body").fadeIn(200);
+		}
+
+		var previousPoint = null;
+		$("#placeholder").bind("plothover", function (event, pos, item) {
+
+			if ($("#enablePosition:checked").length > 0) {
+				var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
+				$("#hoverdata").text(str);
+			}
+
+			if ($("#enableTooltip:checked").length > 0) {
+				if (item) {
+					if (previousPoint != item.dataIndex) {
+
+						previousPoint = item.dataIndex;
+
+						$("#tooltip").remove();
+						var x = item.datapoint[0].toFixed(2),
+						y = item.datapoint[1].toFixed(2);
+
+						showTooltip(item.pageX, item.pageY,
+						    item.series.label + " of " + x + " = " + y);
+					}
+				} else {
+					$("#tooltip").remove();
+					previousPoint = null;            
+				}
+			}
+		});
+
+		$("#placeholder").bind("plotclick", function (event, pos, item) {
+			if (item) {
+				$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
+				plot.highlight(item.series, item.datapoint);
+			}
+		});
+
+		// Add the Flot version string to the footer
+
+		$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
+	});
+
+	</script>
+</head>
+<body>
+
+	<div id="header">
+		<h2>Interactivity</h2>
+	</div>
+
+	<div id="content">
+
+		<div class="demo-container">
+			<div id="placeholder" class="demo-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>