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.

2 files changed, 15 insertions, 2 deletions

diff --git a/app/views/public_body/statistics.html.erb b/app/views/public_body/statistics.html.erb
index e23f47405..992ec1fca 100644
--- a/app/views/public_body/statistics.html.erb
+++ b/app/views/public_body/statistics.html.erb
@@ -52,9 +52,9 @@ are due to him.") %></p>
             </tr>
           </thead>
           <tbody>
-            <% graph_data['x_ticks'].each_with_index do |pb_and_index, i| %>
+            <% graph_data['public_bodies'].each_with_index do |pb, i| %>
               <tr>
-                <td><%= pb_and_index[1] %></td>
+                <td><%= link_to pb['name'], pb['url'] %></td>
                 <td class="statistic"><%= graph_data['y_values'][i].round %></td>
               </tr>
             <% end %>
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;
+            }
+        });
+
     });
 });