diff options
| author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
| commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
| tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/flot/examples/interacting | |
| parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
| download | postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip | |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/flot/examples/interacting')
| -rw-r--r-- | misc/flot/examples/interacting/index.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/misc/flot/examples/interacting/index.html b/misc/flot/examples/interacting/index.html new file mode 100644 index 0000000..31169db --- /dev/null +++ b/misc/flot/examples/interacting/index.html @@ -0,0 +1,118 @@ +<!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 + } + }); + + $("<div id='tooltip'></div>").css({ + position: "absolute", + display: "none", + border: "1px solid #fdd", + padding: "2px", + "background-color": "#fee", + opacity: 0.80 + }).appendTo("body"); + + $("#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) { + var x = item.datapoint[0].toFixed(2), + y = item.datapoint[1].toFixed(2); + + $("#tooltip").html(item.series.label + " of " + x + " = " + y) + .css({top: item.pageY+5, left: item.pageX+5}) + .fadeIn(200); + } else { + $("#tooltip").hide(); + } + } + }); + + $("#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" checked="checked"></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" checked="checked"></input>Enable tooltip</label></p> + + </div> + + <div id="footer"> + Copyright © 2007 - 2014 IOLA and Ole Laursen + </div> + +</body> +</html> |