JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sync test</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="http://yourjavascript.com/3245481321/flotr2-min.js"></script>
</head>
<body>
<h1>Sync Test</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<div id="placeholder2" style="width:300px;height:200px"></div>
<p>crosshair sync test.</p>
</body>
</html>
JavaScript
var plot;
var plot2;
$(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)]);
}
var data = [ { data: sin, label: "sin(x) = -0.00"},
{ data: cos, label: "cos(x) = -0.00" } ];
var options = {
series: { lines: { show: true } },
crosshair: { mode: "x"},
grid: { hoverable: true, autoHighlight: false },
yaxis: { min: -1.2, max: 1.2 },
mouse: { track: true }
};
plot = Flotr.draw(document.getElementById("placeholder"),data,options);
plot2 = Flotr.draw(document.getElementById("placeholder2"),data, options);
var plotDivs = ['placeholder', 'placeholder2'];
var plotObjs = [plot, plot2];
var updateAllCrosshairs = function(originalEvt, position, plotObj){
for(var i = 0; i < plotObjs.length; i++){
if(plotObj !== plotObjs[i]){
updatePlotCrosshair(plotObjs[i], position);
}
}
};
var updatePlotCrosshair = function(plotObj, pos){
plotObj.crosshair.clearCrosshair();
plotObj.crosshair.drawCrosshair(pos);
};
for(var i = 0; i < plotDivs.length; i++){
Flotr.EventAdapter.observe(document.getElementById(plotDivs[i]), 'flotr:mousemove', updateAllCrosshairs);
}
});