flot-plugins
flot-plugins copied to clipboard
Published
20 hours ago •
ubermajestix
ubermajestix
plothover and plotclick events don't detect item when there is more then one plot
When I have two bubble graphs on the same page it only highlights the points on the last plot. When I set bubble to false to display standard circle points it highlights the points on both plots correctly. It seems to me that the issue is somewhere in jquery.flot.bubble.js:findNearbyItem() function.
Here is the source that reproduces the problem, set "bubble: false" to see the correct highlighting:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TCA</title>
<!--[if IE]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="flot-plugins-original/jquery.js"></script>
<script language="javascript" type="text/javascript" src="flot-plugins-original/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="flot-plugins-original/jquery.flot.bubble.js"></script>
<div id="placeholder_1" style="width:800px;height:400px" class="left"></div>
<div id="placeholder_2" style="width:800px;height:400px" class="left"></div>
<script id="rpm_script" language="javascript" type="text/javascript">
$(function () {
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 15,
left: x + 15,
border: '1px solid #1d1d1d',
padding: '5px',
color: '#eee',
'background-color': '#1d1d1d',
opacity: 0.80
}).appendTo("body").fadeIn(500);
}
var previousPoint = null;
$("#placeholder_1").bind("plotclick", function (event, pos, item) {
console.log(event)
if(item){
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
alert('clicked ' + item.series.label + ': (' + x + ', ' + y + ')')
}
})
$("#placeholder_1").bind("plothover", function (event, pos, item) {
console.log(event)
console.log(pos)
console.log(item)
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1].toFixed(0);
showTooltip(item.pageX, item.pageY, 'Order #' + x + ': relative performance ' + y + '%');
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
plot_rpm = $.plot($("#placeholder_1"), [[[1,1,10],[3,3,20]]],
{
series: {
bubble: true,
points: { show: true, lineWidth: 2, radius: 2 },
lines: { show: false },
shadowSize: 6,
},
grid: { hoverable: true, clickable: true, tickColor: '#444'},
}
);
});
</script>
<script id="arrival_price_script" language="javascript" type="text/javascript">
$(function () {
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 15,
left: x + 15,
border: '1px solid #1d1d1d',
padding: '5px',
color: '#eee',
'background-color': '#1d1d1d',
opacity: 0.80
}).appendTo("body").fadeIn(500);
}
var previousPoint = null;
$("#placeholder_2").bind("plotclick", function (event, pos, item) {
console.log(event)
if(item){
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
alert('clicked ' + item.series.label + ': (' + x + ', ' + y + ')')
}
})
$("#placeholder_2").bind("plothover", function (event, pos, item) {
console.log(event)
console.log(pos)
console.log(item)
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1].toFixed(0);
showTooltip(item.pageX, item.pageY, 'Order #' + x + ': arrival price slippage ' + y + 'bps');
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
plot_arrival_price = $.plot($("#placeholder_2"), [[[2,2,10],[1,1,20]]],
{
series: {
bubble: true,
points: { show: true, lineWidth: 2, radius: 2 },
lines: { show: false },
shadowSize: 6,
},
grid: { hoverable: true, clickable: true, tickColor: '#444'},
}
);
});
</script>
</head>
<body>
</body>
</html>
