diff options
Diffstat (limited to 'examples/tracking.html')
-rw-r--r-- | examples/tracking.html | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/examples/tracking.html b/examples/tracking.html index 722f960..a0ad77d 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -7,6 +7,7 @@ <!--[if IE]><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 language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script> </head> <body> <h1>Flot Examples</h1> @@ -18,11 +19,12 @@ <p>If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating - the data points.</p> + the data points (look at the legend).</p> <p id="hoverdata"></p> <script id="source" language="javascript" type="text/javascript"> +var plot; $(function () { var sin = [], cos = []; for (var i = 0; i < 14; i += 0.1) { @@ -30,13 +32,16 @@ $(function () { cos.push([i, Math.cos(i)]); } - var plot = $.plot($("#placeholder"), - [ { data: sin, label: "sin(x) = -0.00"}, { data: cos, label: "cos(x) = -0.00" } ], - { lines: { show: true }, - crosshair: { mode: "x" }, - grid: { hoverable: true, autoHighlight: false }, - yaxis: { min: -1.2, max: 1.2 } - }); + plot = $.plot($("#placeholder"), + [ { data: sin, label: "sin(x) = -0.00"}, + { data: cos, label: "cos(x) = -0.00" } ], { + series: { + lines: { show: true } + }, + crosshair: { mode: "x" }, + grid: { hoverable: true, autoHighlight: false }, + yaxis: { min: -1.2, max: 1.2 } + }); var legends = $("#placeholder .legendLabel"); legends.each(function () { // fix the widths so they don't jump around @@ -73,7 +78,7 @@ $(function () { y = p1[1]; else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]); - + legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2))); } } |