From: Maxious <maxious@lambdacomplex.org>
Date: Sun, 29 Jan 2012 03:46:39 +0000
Subject: Tooltips on charts
X-Git-Url: https://maxious.lambdacomplex.org/git/?p=disclosr.git&a=commitdiff&h=1a96bbf00ad7ee8fcb541dd7d100583d7c2167ae
---
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