root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / interacting.html @ 69
History | View | Annotate | Download (3.21 KB)
1 | 11 | alexbesir | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
---|---|---|---|
2 | <html>
|
||
3 | <head>
|
||
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||
5 | <title>Flot Examples</title> |
||
6 | <link href="layout.css" rel="stylesheet" type="text/css"></link> |
||
7 | <!--[if IE]><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 | </head>
|
||
11 | <body>
|
||
12 | <h1>Flot Examples</h1> |
||
13 | |||
14 | <div id="placeholder" style="width:600px;height:300px"></div> |
||
15 | |||
16 | <p>One of the goals of Flot is to support user interactions. Try
|
||
17 | pointing and clicking on the points.</p>
|
||
18 | |||
19 | <p id="hoverdata">Mouse hovers at |
||
20 | (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p> |
||
21 | |||
22 | <p>A tooltip is easy to build with a bit of jQuery code and the
|
||
23 | data returned from the plot.</p>
|
||
24 | |||
25 | <p><input id="enableTooltip" type="checkbox">Enable tooltip</p> |
||
26 | |||
27 | <script id="source" language="javascript" type="text/javascript"> |
||
28 | $(function () {
|
||
29 | var sin = [], cos = [];
|
||
30 | for (var i = 0; i < 14; i += 0.5) {
|
||
31 | sin.push([i, Math.sin(i)]);
|
||
32 | cos.push([i, Math.cos(i)]);
|
||
33 | }
|
||
34 | |||
35 | var plot = $.plot($("#placeholder"),
|
||
36 | [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
|
||
37 | series: {
|
||
38 | lines: { show: true },
|
||
39 | points: { show: true }
|
||
40 | },
|
||
41 | grid: { hoverable: true, clickable: true },
|
||
42 | yaxis: { min: -1.2, max: 1.2 }
|
||
43 | });
|
||
44 | |||
45 | function showTooltip(x, y, contents) {
|
||
46 | $('<div id="tooltip">' + contents + '</div>').css( {
|
||
47 | position: 'absolute',
|
||
48 | display: 'none',
|
||
49 | top: y + 5,
|
||
50 | left: x + 5,
|
||
51 | border: '1px solid #fdd',
|
||
52 | padding: '2px',
|
||
53 | 'background-color': '#fee',
|
||
54 | opacity: 0.80
|
||
55 | }).appendTo("body").fadeIn(200);
|
||
56 | }
|
||
57 | |||
58 | var previousPoint = null;
|
||
59 | $("#placeholder").bind("plothover", function (event, pos, item) {
|
||
60 | $("#x").text(pos.x.toFixed(2));
|
||
61 | $("#y").text(pos.y.toFixed(2));
|
||
62 | |||
63 | if ($("#enableTooltip:checked").length > 0) {
|
||
64 | if (item) {
|
||
65 | if (previousPoint != item.datapoint) {
|
||
66 | previousPoint = item.datapoint;
|
||
67 | |||
68 | $("#tooltip").remove();
|
||
69 | var x = item.datapoint[0].toFixed(2),
|
||
70 | y = item.datapoint[1].toFixed(2);
|
||
71 | |||
72 | showTooltip(item.pageX, item.pageY,
|
||
73 | item.series.label + " of " + x + " = " + y);
|
||
74 | }
|
||
75 | }
|
||
76 | else {
|
||
77 | $("#tooltip").remove();
|
||
78 | previousPoint = null;
|
||
79 | }
|
||
80 | }
|
||
81 | });
|
||
82 | |||
83 | $("#placeholder").bind("plotclick", function (event, pos, item) {
|
||
84 | if (item) {
|
||
85 | $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
|
||
86 | plot.highlight(item.series, item.datapoint);
|
||
87 | }
|
||
88 | });
|
||
89 | });
|
||
90 | </script>
|
||
91 | |||
92 | </body>
|
||
93 | </html> |