index.html (3372B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Flot Examples: Interactivity</title> 6 <link href="../examples.css" rel="stylesheet" type="text/css"> 7 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]--> 8 <script language="javascript" type="text/javascript" src="../../jquery.js"></script> 9 <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script> 10 <script type="text/javascript"> 11 12 $(function() { 13 14 var sin = [], 15 cos = []; 16 17 for (var i = 0; i < 14; i += 0.5) { 18 sin.push([i, Math.sin(i)]); 19 cos.push([i, Math.cos(i)]); 20 } 21 22 var plot = $.plot("#placeholder", [ 23 { data: sin, label: "sin(x)"}, 24 { data: cos, label: "cos(x)"} 25 ], { 26 series: { 27 lines: { 28 show: true 29 }, 30 points: { 31 show: true 32 } 33 }, 34 grid: { 35 hoverable: true, 36 clickable: true 37 }, 38 yaxis: { 39 min: -1.2, 40 max: 1.2 41 } 42 }); 43 44 function showTooltip(x, y, contents) { 45 $("<div id='tooltip'>" + contents + "</div>").css({ 46 position: "absolute", 47 display: "none", 48 top: y + 5, 49 left: x + 5, 50 border: "1px solid #fdd", 51 padding: "2px", 52 "background-color": "#fee", 53 opacity: 0.80 54 }).appendTo("body").fadeIn(200); 55 } 56 57 var previousPoint = null; 58 $("#placeholder").bind("plothover", function (event, pos, item) { 59 60 if ($("#enablePosition:checked").length > 0) { 61 var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")"; 62 $("#hoverdata").text(str); 63 } 64 65 if ($("#enableTooltip:checked").length > 0) { 66 if (item) { 67 if (previousPoint != item.dataIndex) { 68 69 previousPoint = item.dataIndex; 70 71 $("#tooltip").remove(); 72 var x = item.datapoint[0].toFixed(2), 73 y = item.datapoint[1].toFixed(2); 74 75 showTooltip(item.pageX, item.pageY, 76 item.series.label + " of " + x + " = " + y); 77 } 78 } else { 79 $("#tooltip").remove(); 80 previousPoint = null; 81 } 82 } 83 }); 84 85 $("#placeholder").bind("plotclick", function (event, pos, item) { 86 if (item) { 87 $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label); 88 plot.highlight(item.series, item.datapoint); 89 } 90 }); 91 92 // Add the Flot version string to the footer 93 94 $("#footer").prepend("Flot " + $.plot.version + " – "); 95 }); 96 97 </script> 98 </head> 99 <body> 100 101 <div id="header"> 102 <h2>Interactivity</h2> 103 </div> 104 105 <div id="content"> 106 107 <div class="demo-container"> 108 <div id="placeholder" class="demo-placeholder"></div> 109 </div> 110 111 <p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p> 112 113 <p> 114 <label><input id="enablePosition" type="checkbox"></input>Show mouse position</label> 115 <span id="hoverdata"></span> 116 <span id="clickdata"></span> 117 </p> 118 119 <p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p> 120 121 <p><label><input id="enableTooltip" type="checkbox"></input>Enable tooltip</label></p> 122 123 </div> 124 125 <div id="footer"> 126 Copyright © 2007 - 2013 IOLA and Ole Laursen 127 </div> 128 129 </body> 130 </html>