mousedown, plotpan, plotclick events work together
457 views
Skip to first unread message
Simon
Apr 22, 2011, 1:41:29 PM4/22/11
to Flot graphs
Hi all,
I tried to add a [mousedown] [mouseup] event to the plot DIV, while
also enable [plotpan] and [plotclick] events. how can I make them work
together? I mean in my following code, i simply bind mousedown to the
plot holder, it cant work if i click on the plot, only work on the
label area.
<html>
<head>
<title>A Test Page</title>
<!-- JQUERY/FLOT LIB FILES -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript"
src="lib/jquery/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.symbol.js"></script>
<script type="text/javascript">
$(function () {
// raw data
d1 = [ [ 0, 2 ], [ 1, 2 ] ];
d2 = [ [ 2, 2 ], [ 4, 2 ] ];
//event data
dataSeries = [{
color : "rgb(0, 0, 0)",
data : d1,
label : "point1",
points : {
show : true,
symbol : "square",
radius : 4
}
}, {
color : "rgb(255, 100, 123)",
data : d2,
label : "point2",
points : {
show : true,
radius : 4
}
}];
//container for graph
var placeholder = $("#flotDiv");
if (placeholder.length <= 0) {
return;
}
options= {//graph options
pan : {
interactive : true
},
grid: {
clickable:true
}
};
$.plot(placeholder, dataSeries, options);
placeholder.bind("mousedown",function(e){
alert("mousedown");
})
/*
placeholder.bind("plotclick",function(event, pos, item){
alert("plotclick");
});
*/
});
</script>
</head>
<body>
<!-- SLD PLOT -->
<div id="flotDiv" style="width: 600px; height: 300px; padding:
0px; position: relative;"></div>
</body>
</html>
in the above codes, mousedown event doesnt work because i enable plot
pannable; if i disable plotpan, then mousedown will work; and if I
enable plotclick, still only mousedown works; i know that both plotpan
and plotclick are relevant to "mousedown" event, so there is a
confliction among. however, i need find a way to make them work
together.
appreciate any comments!
I tried to add a [mousedown] [mouseup] event to the plot DIV, while
also enable [plotpan] and [plotclick] events. how can I make them work
together? I mean in my following code, i simply bind mousedown to the
plot holder, it cant work if i click on the plot, only work on the
label area.
<html>
<head>
<title>A Test Page</title>
<!-- JQUERY/FLOT LIB FILES -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript"
src="lib/jquery/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript"
src="lib/jquery/jquery.flot.symbol.js"></script>
<script type="text/javascript">
$(function () {
// raw data
d1 = [ [ 0, 2 ], [ 1, 2 ] ];
d2 = [ [ 2, 2 ], [ 4, 2 ] ];
//event data
dataSeries = [{
color : "rgb(0, 0, 0)",
data : d1,
label : "point1",
points : {
show : true,
symbol : "square",
radius : 4
}
}, {
color : "rgb(255, 100, 123)",
data : d2,
label : "point2",
points : {
show : true,
radius : 4
}
}];
//container for graph
var placeholder = $("#flotDiv");
if (placeholder.length <= 0) {
return;
}
options= {//graph options
pan : {
interactive : true
},
grid: {
clickable:true
}
};
$.plot(placeholder, dataSeries, options);
placeholder.bind("mousedown",function(e){
alert("mousedown");
})
/*
placeholder.bind("plotclick",function(event, pos, item){
alert("plotclick");
});
*/
});
</script>
</head>
<body>
<!-- SLD PLOT -->
<div id="flotDiv" style="width: 600px; height: 300px; padding:
0px; position: relative;"></div>
</body>
</html>
in the above codes, mousedown event doesnt work because i enable plot
pannable; if i disable plotpan, then mousedown will work; and if I
enable plotclick, still only mousedown works; i know that both plotpan
and plotclick are relevant to "mousedown" event, so there is a
confliction among. however, i need find a way to make them work
together.
appreciate any comments!
Victor Ivanov
Aug 28, 2013, 8:33:32 AM8/28/13
to flot-...@googlegroups.com, liux...@gmail.com
The same problem.
dnschnur
Sep 1, 2013, 11:50:13 AM9/1/13
to flot-...@googlegroups.com, liux...@gmail.com
What do you want to do with those events?
Victor Ivanov
Sep 2, 2013, 2:52:25 AM9/2/13
to flot-...@googlegroups.com, liux...@gmail.com
I just wanted to stop realtime update of the data while the graph is dragged. I wanted to stop updating when the mouse button is pressed and resume when it is released. Originally, I used flotr2 in my project and it worked like this. Later I had to switch to flot and I have found this problem with the plugin. Actually, I have already done what I wanted without using the plugin.
dnschnur
Sep 15, 2013, 1:44:42 AM9/15/13
to flot-...@googlegroups.com, liux...@gmail.com
It looks like mouseup does work, but you're correct that mousedown doesn't. It looks like the drag event plugin that navigate uses (inlined) is swallowing the event. Fixing that would take some work, but there's a simpler solution: listen for the same 'dragstart' event (on the .flot-overlay element) that Flot does.
Reply all
Reply to author
Forward
0 new messages