From 18cded9d726bfb8002b4be0cb1312a0b9905debc Mon Sep 17 00:00:00 2001
From: Mark Longair <mhl@pobox.com>
Date: Mon, 19 Aug 2013 17:05:44 +0100
Subject: Rotate labels on the x-axis by 90 degrees

This commit adds the tickrotor extension to Flot, which allows
rotated labels for public bodies.  This extension is licensed
under either MPL 1.1, GPL 2.0 or LGPL 2.1.
---
 public/javascripts/stats-graphs.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'public/javascripts/stats-graphs.js')

diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
index 73e19a6fc..f738427ae 100644
--- a/public/javascripts/stats-graphs.js
+++ b/public/javascripts/stats-graphs.js
@@ -19,7 +19,7 @@ $(document).ready(function() {
         }
 
         graph_div.css('width', '700px');
-        graph_div.css('height', '400px');
+        graph_div.css('height', '600px');
 
         dataset = [
             {'color': 'orange',
@@ -58,6 +58,7 @@ $(document).ready(function() {
         options = {
             'xaxis': {
                 'ticks': graph_data.x_ticks,
+                'rotateTicks': 90
             },
             'yaxis': {
                 'min': 0,
-- 
cgit v1.2.3


From f3ecb5b64229f5e566be3b8df3d7b87e9bb6dd75 Mon Sep 17 00:00:00 2001
From: Mark Longair <mhl@pobox.com>
Date: Tue, 15 Oct 2013 13:47:08 +0100
Subject: Make bars in public body statistics charts clickable

Now if you click on the bar representing statistics for a
particular public body, it will take you to that public
body's page.

In addition, the bars are highlighted when you hover over
them.
---
 public/javascripts/stats-graphs.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'public/javascripts/stats-graphs.js')

diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
index f738427ae..7afbd20c1 100644
--- a/public/javascripts/stats-graphs.js
+++ b/public/javascripts/stats-graphs.js
@@ -56,6 +56,7 @@ $(document).ready(function() {
         }
 
         options = {
+            'grid': { 'hoverable': true, 'clickable': true },
             'xaxis': {
                 'ticks': graph_data.x_ticks,
                 'rotateTicks': 90
@@ -84,5 +85,17 @@ $(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;
+            }
+        });
+
     });
 });
-- 
cgit v1.2.3


From f4ddaf1de89ab5929eb0ad84ed579bb674c55d34 Mon Sep 17 00:00:00 2001
From: Mark Longair <mhl@pobox.com>
Date: Tue, 15 Oct 2013 16:14:09 +0100
Subject: Add a tooltip to each bar of the public body stats graphs

Since the rotated public body names on the x-axis may be difficult to
read, it's helpful to have them in a tooltip as well.
---
 public/javascripts/stats-graphs.js | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

(limited to 'public/javascripts/stats-graphs.js')

diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
index 7afbd20c1..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 */
@@ -97,5 +98,38 @@ $(document).ready(function() {
             }
         });
 
+        /* 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;
+            }
+        });
     });
 });
-- 
cgit v1.2.3