JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://yourjavascript.com/3245481321/flotr2-min.js"></script>
<div id="placeholder" style="width:600px;height:300px"></div>
<div id="placeholder2" style="width:300px;height:200px"></div>
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 },
{ data: cos } ];
var options = {
series: { lines: { show: true } },
crosshair: { mode: "x", hideCursor: false },
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();
pos.relX = plotObj.axes.x.d2p(pos.x);
plotObj.crosshair.drawCrosshair(pos);
};
for(var i = 0; i < plotDivs.length; i++){
Flotr.EventAdapter.observe(document.getElementById(plotDivs[i]), 'flotr:mousemove', updateAllCrosshairs);
}
});