summaryrefslogtreecommitdiff
path: root/examples/tracking.html
diff options
context:
space:
mode:
authorIgor Sfiligoi <isfiligoi@ucsd.edu>2009-10-23 09:07:01 -0400
committerIgor Sfiligoi <isfiligoi@ucsd.edu>2009-10-23 09:07:01 -0400
commitaf26aaa53d073a7b2d25caee93e1cb5ceb2e099c (patch)
treebcb8d15baea1f07375d1dedea414b1b95d58caa6 /examples/tracking.html
parentbf64e197b39d3f10b6145612802a6f169248cb45 (diff)
flot-0.6
Diffstat (limited to 'examples/tracking.html')
-rw-r--r--examples/tracking.html23
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)));
}
}