Skip to content

Instantly share code, notes, and snippets.

@pinscript
Created March 24, 2011 07:26
Show Gist options
  • Save pinscript/884701 to your computer and use it in GitHub Desktop.
Save pinscript/884701 to your computer and use it in GitHub Desktop.
Flot tooltoips
$.plot($("#chart"), set, {
xaxis: {
mode: "time",
timeformat: "%y-%m-%d"
},
yaxis: {
tickFormatter: function(v) { return (parseInt(v, 10) / 1000) + " kkr";}
},
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: true
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '10px',
'background-color': '#fee',
'font-weight': 'bold',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
$("#chart").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
plot.highlight(item.series, item.datapoint);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment