diff options
| author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
|---|---|---|
| committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
| commit | 680241cbb652ee29088baa6cde2da02002e5ec47 (patch) | |
| tree | 3f0c17df67c0ab0e91542ae75fff175750581859 /examples/interacting | |
| parent | f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff) | |
Diffstat (limited to 'examples/interacting')
| -rw-r--r-- | examples/interacting/index.html | 130 |
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 + " – "); + }); + + </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 © 2007 - 2013 IOLA and Ole Laursen + </div> + +</body> +</html> |