Flot Tracking Series
Toggle series line chart
Source Code
Expand
ExampleTracking data
<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>