Flot Tracking Series

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.crosshair.js"></script>

<!-- Javascript -->
<script type="text/javascript">
var plot;

var data1 = [
	[gd(2012, 0, 1), 8],
	[gd(2012, 1, 1), 13],
	[gd(2012, 2, 1), 4],
	[gd(2012, 3, 4), 8],
	[gd(2012, 4, 1), 16],
	[gd(2012, 5, 1), 20],
	[gd(2012, 6, 1), 29],
	[gd(2012, 7, 1), 23],
	[gd(2012, 8, 1), 28],
	[gd(2012, 9, 1), 16],
	[gd(2012, 10, 1), 8],
	[gd(2012, 11, 2), 4]
];


var data2 = [
	[gd(2012, 0, 1), 16],
	[gd(2012, 1, 1), 14],
	[gd(2012, 2, 1), 22],
	[gd(2012, 3, 1), 30],
	[gd(2012, 4, 1), 28],
	[gd(2012, 5, 1), 39],
	[gd(2012, 6, 1), 38],
	[gd(2012, 7, 1), 28],
	[gd(2012, 8, 1), 31],
	[gd(2012, 9, 1), 28],
	[gd(2012, 10, 1), 22],
	[gd(2012, 11, 1), 16]
];

function gd(year, month, day) {
	return new Date(year, month, day).getTime();
}


$(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($("#example-section29 #placeholder"), [{
		data: data1,
		label: "New York = 0.00 °C"
	}, {
		data: data2,
		label: "New Delhi = 0.00 °C"
	}], {
		series: {
			lines: {
				show: true
			}
		},
		crosshair: {
			mode: "xy"
		},
		grid: {
			hoverable: true,
			autoHighlight: false
		},
		xaxis: {
			mode: "time"
		}
	});
	var legends = $("#placeholder .legendLabel");

	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) + " °C"));
		}
	}

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

<!-- HTML -->
<div id="example-section29">
     <div id="placeholder" style="width:600px;height:300px"></div>
</div>