FM / tracking

/home/wespack/public_html/admin/vendors/Flot/examples/tracking/

/home/wespack/public_html/admin/vendors/Flot/examples/tracking

Name	Size	Mode	Actions
index.html	3212	0644	edit dl rm

Edit: /home/wespack/public_html/admin/vendors/Flot/examples/tracking/index.html (3212B)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Flot Examples: Tracking</title>
	<link href="../examples.css" rel="stylesheet" type="text/css">
	
	<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>
	<script type="text/javascript">

$(function() {

var sin = [], cos = [];
		for (var i = 0; i < 14; i += 0.1) {
			sin.push([i, Math.sin(i)]);
			cos.push([i, Math.cos(i)]);
		}

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
			$(this).css('width', $(this).width());
		});

var updateLegendTimeout = null;
		var latestPosition = null;

function updateLegend() {

updateLegendTimeout = null;

var pos = latestPosition;

var axes = plot.getAxes();
			if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
				pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
				return;
			}

var i, j, dataset = plot.getData();
			for (i = 0; i < dataset.length; ++i) {

var series = dataset[i];

// Find the nearest points, x-wise

for (j = 0; j < series.data.length; ++j) {
					if (series.data[j][0] > pos.x) {
						break;
					}
				}

// Now Interpolate

var y,
					p1 = series.data[j - 1],
					p2 = series.data[j];

if (p1 == null) {
					y = p2[1];
				} else if (p2 == null) {
					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)));
			}
		}

$("#placeholder").bind("plothover",  function (event, pos, item) {
			latestPosition = pos;
			if (!updateLegendTimeout) {
				updateLegendTimeout = setTimeout(updateLegend, 50);
			}
		});

// Add the Flot version string to the footer

$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
	});

</script>
</head>
<body>

<div id="header">
		<h2>Tracking</h2>
	</div>

<p>You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.</p>

<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 (look at the legend).</p>

</div>

</body>
</html>

Flot Examples: Tracking

You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.

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 (look at the legend).