%PDF- %PDF-
Direktori : /home/medipszd/public_html/bower_components/Flot/examples/interacting/ |
Current File : /home/medipszd/public_html/bower_components/Flot/examples/interacting/index.html |
<!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>