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.html | |
| parent | f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff) | |
Diffstat (limited to 'examples/interacting.html')
| -rw-r--r-- | examples/interacting.html | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/examples/interacting.html b/examples/interacting.html deleted file mode 100644 index d04eedd..0000000 --- a/examples/interacting.html +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Flot Examples</title> - <link href="layout.css" rel="stylesheet" type="text/css"> - <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> - <script language="javascript" type="text/javascript" src="../jquery.js"></script> - <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> - </head> - <body> - <h1>Flot Examples</h1> - - <div id="placeholder" style="width:600px;height:300px"></div> - - <p>One of the goals of Flot is to support user interactions. Try - pointing and clicking on the points.</p> - - <p id="hoverdata">Mouse hovers at - (<span id="x">0</span>, <span id="y">0</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><input id="enableTooltip" type="checkbox">Enable tooltip</p> - -<script type="text/javascript"> -$(function () { - var sin = [], cos = []; - for (var i = 0; i < 14; i += 0.5) { - sin.push([i, Math.sin(i)]); - cos.push([i, Math.cos(i)]); - } - - var plot = $.plot($("#placeholder"), - [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], { - series: { - lines: { show: true }, - points: { show: true } - }, - grid: { hoverable: true, clickable: true }, - yaxis: { min: -1.2, max: 1.2 } - }); - - function showTooltip(x, y, contents) { - $('<div id="tooltip">' + contents + '</div>').css( { - position: 'absolute', - display: 'none', - top: y + 5, - left: x + 5, - border: '1px solid #fdd', - padding: '2px', - 'background-color': '#fee', - opacity: 0.80 - }).appendTo("body").fadeIn(200); - } - - var previousPoint = null; - $("#placeholder").bind("plothover", function (event, pos, item) { - $("#x").text(pos.x.toFixed(2)); - $("#y").text(pos.y.toFixed(2)); - - 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("You clicked point " + item.dataIndex + " in " + item.series.label + "."); - plot.highlight(item.series, item.datapoint); - } - }); -}); -</script> - - </body> -</html> |