--- a/charts.php +++ b/charts.php @@ -41,6 +41,8 @@ ?> $.plot($("#placeholder"), [ d1], { + grid: { hoverable: true }, + series: { bars: { show: true, barWidth: 0.6 } }, @@ -58,11 +60,41 @@ } }); +var previousPoint = null; +$("#placeholder").bind("plothover", function (event, pos, item) { + if (item) { + if (previousPoint != item.datapoint) { + previousPoint = item.datapoint; + + $("#tooltip").remove(); + var x = item.datapoint[0], + y = item.datapoint[1] - item.datapoint[2]; + + showTooltip(item.pageX, item.pageY, y ); + } + } + else { + $("#tooltip").remove(); + previousPoint = null; + } +}); }); }; + function showTooltip(x, y, contents) { + $('
' + contents + '
').css( { + position: 'absolute', + display: 'none', + top: y + 5, + left: x + 5, + border: '1px solid #fdd', + padding: '2px', + 'background-color': '#fee', + opacity: 0.80 + }).appendTo("body").fadeIn(200); + }