Tooltips on charts
Former-commit-id: fac16cbbc765207e6030181367b16020304fd8e0
--- 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) {
+ $('<div id="tooltip">' + contents + '</div>').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);
+ }
</script>
<?php