1 files changed, 50 insertions, 2 deletions
diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
index 73e19a6fc..ff3d3a11a 100644
--- a/public/javascripts/stats-graphs.js
+++ b/public/javascripts/stats-graphs.js
@@ -11,7 +11,8 @@ $(document).ready(function() {
             dataset,
             plot,
             graph_data,
-            graph_div = $('#' + graph_id);
+            graph_div = $('#' + graph_id),
+            previousPoint = null;
 
         if (!graph_data.x_values) {
             /* Then there's no data for this graph */
@@ -19,7 +20,7 @@ $(document).ready(function() {
         }
 
         graph_div.css('width', '700px');
-        graph_div.css('height', '400px');
+        graph_div.css('height', '600px');
 
         dataset = [
             {'color': 'orange',
@@ -56,8 +57,10 @@ $(document).ready(function() {
         }
 
         options = {
+            'grid': { 'hoverable': true, 'clickable': true },
             'xaxis': {
                 'ticks': graph_data.x_ticks,
+                'rotateTicks': 90
             },
             'yaxis': {
                 'min': 0,
@@ -83,5 +86,50 @@ $(document).ready(function() {
         plot = $.plot(graph_div,
                       dataset,
                       options);
+
+        graph_div.bind("plotclick", function(event, pos, item) {
+            var i, pb, url, name;
+            if (item) {
+                i = item.dataIndex;
+                pb = graph_data.public_bodies[i];
+                url = pb.url;
+                name = pb.name;
+                window.location.href = url;
+            }
+        });
+
+        /* This code is adapted from:
+           http://www.flotcharts.org/flot/examples/interacting/ */
+
+        function showTooltip(x, y, contents) {
+            $('<div id="flot-tooltip">' + contents + '</div>').css({
+                'position': 'absolute',
+                'display': 'none',
+                'top': y + 10,
+                'left': x + 10,
+                'border': '1px solid #fdd',
+                'padding': '2px',
+                'background-color': '#fee',
+                'opacity': 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+
+        graph_div.bind("plothover", function (event, pos, item) {
+            var escapedName, x, y;
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#flot-tooltip").remove();
+                    escapedName = $('<div />').text(
+                        graph_data.tooltips[item.dataIndex]).html();
+                    showTooltip(item.pageX,
+                                item.pageY,
+                                escapedName);
+                }
+            } else {
+                $("#flot-tooltip").remove();
+                previousPoint = null;
+            }
+        });
     });
 });