FLOT mouse Interactions
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:500px; height:300px;"></div>
JavaScript
var data, data1, options, chart;
data1 = [
[1, 4],
[2, 5],
[3, 6],
[4, 9],
[5, 7],
[6, 6],
[7, 2],
[8, 1],
[9, 3]
];
var data2 = [],
data3 = [];
for (var i = 1; i < 10; i++) {
data2.push([i, i * 2])
}
for (var i = 1; i < 10; i++) {
data3.push([i, 10 * Math.random()])
}
data = [{
data: data1,
label: "fixed",
lines: {
show: true
}
}, {
data: data2,
label: "linear",
lines: {
show: true
},
points: {
show: true
}
}, {
data: data3,
label: "random",
bars: {
show: true,
barWidth: 0.5
}
}];
options = {
legend: {
position: "nw"
},
grid: {
clickable: true,
hoverable: true
}
}
$(document).ready(function () {
chart = $.plot($("#placeholder"), data, options);
});
var currentPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
currentPoint = item;
} else {
currentPoint = null;
}
});
var DELAY = 200;
var clicks = 0;
var timer = null;
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
clicks++; //count clicks
if(clicks === 1) {
timer = setTimeout(function() {
//perform single-click action
alert("item " + item.dataIndex + " in " + item.series + " clicked");
chart.highlight(item.series, item.datapoint);
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
//perform double-click action
alert('Double Click');
clicks = 0; //after action performed, reset counter
}
}
});