Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 96 lines (79 sloc) 3.368 kb
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
1 <!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>
477b614 Fix some validator warnings (suggested by Colin Law)
olau@iola.dk authored
6 <link href="layout.css" rel="stylesheet" type="text/css">
d8e20bf Skip loading excanvas in IE 9 in examples (thanks to Ryley Breiddal),…
olau@iola.dk authored
7 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
8 <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
d3acc16 Removed work-around for slow jQuery mousemove events (closing issue
olau@iola.dk authored
10 <script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script>
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
11 </head>
12 <body>
13 <h1>Flot Examples</h1>
14
15 <div id="placeholder" style="width:600px;height:300px"></div>
16
17 <p>You can add crosshairs that'll track the mouse position, either
18 on both axes or as here on only one.</p>
19
20 <p>If you combine it with listening on hover events, you can use
21 it to track the intersection on the curves by interpolating
0d15280 Implemented plugin system, introduced experimental hooks system (thre…
olau@iola.dk authored
22 the data points (look at the legend).</p>
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
23
24 <p id="hoverdata"></p>
25
477b614 Fix some validator warnings (suggested by Colin Law)
olau@iola.dk authored
26 <script type="text/javascript">
d3acc16 Removed work-around for slow jQuery mousemove events (closing issue
olau@iola.dk authored
27 var plot;
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
28 $(function () {
29 var sin = [], cos = [];
30 for (var i = 0; i < 14; i += 0.1) {
31 sin.push([i, Math.sin(i)]);
32 cos.push([i, Math.cos(i)]);
33 }
34
d3acc16 Removed work-around for slow jQuery mousemove events (closing issue
olau@iola.dk authored
35 plot = $.plot($("#placeholder"),
0d15280 Implemented plugin system, introduced experimental hooks system (thre…
olau@iola.dk authored
36 [ { data: sin, label: "sin(x) = -0.00"},
37 { data: cos, label: "cos(x) = -0.00" } ], {
38 series: {
39 lines: { show: true }
40 },
41 crosshair: { mode: "x" },
42 grid: { hoverable: true, autoHighlight: false },
43 yaxis: { min: -1.2, max: 1.2 }
44 });
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
45 var legends = $("#placeholder .legendLabel");
46 legends.each(function () {
47 // fix the widths so they don't jump around
55bc8c0 Fixup tracking example a wee bit, add it to index, lower the update t…
olau@iola.dk authored
48 $(this).css('width', $(this).width());
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
49 });
55bc8c0 Fixup tracking example a wee bit, add it to index, lower the update t…
olau@iola.dk authored
50
51 var updateLegendTimeout = null;
52 var latestPosition = null;
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
53
55bc8c0 Fixup tracking example a wee bit, add it to index, lower the update t…
olau@iola.dk authored
54 function updateLegend() {
55 updateLegendTimeout = null;
56
57 var pos = latestPosition;
58
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
59 var axes = plot.getAxes();
60 if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
61 pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
62 return;
63
64 var i, j, dataset = plot.getData();
65 for (i = 0; i < dataset.length; ++i) {
66 var series = dataset[i];
67
68 // find the nearest points, x-wise
69 for (j = 0; j < series.data.length; ++j)
70 if (series.data[j][0] > pos.x)
71 break;
72
73 // now interpolate
74 var y, p1 = series.data[j - 1], p2 = series.data[j];
75 if (p1 == null)
76 y = p2[1];
77 else if (p2 == null)
78 y = p1[1];
79 else
80 y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
0d15280 Implemented plugin system, introduced experimental hooks system (thre…
olau@iola.dk authored
81
55bc8c0 Fixup tracking example a wee bit, add it to index, lower the update t…
olau@iola.dk authored
82 legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
83 }
55bc8c0 Fixup tracking example a wee bit, add it to index, lower the update t…
olau@iola.dk authored
84 }
85
86 $("#placeholder").bind("plothover", function (event, pos, item) {
87 latestPosition = pos;
88 if (!updateLegendTimeout)
89 updateLegendTimeout = setTimeout(updateLegend, 50);
9b08e82 Added documentation and example for the crosshairs feature
olau@iola.dk authored
90 });
91 });
92 </script>
93
94 </body>
95 </html>
Something went wrong with that request. Please try again.