1 files changed, 135 insertions, 0 deletions
diff --git a/app/assets/javascripts/stats-graphs.js b/app/assets/javascripts/stats-graphs.js
new file mode 100644
index 000000000..ff3d3a11a
--- /dev/null
+++ b/app/assets/javascripts/stats-graphs.js
@@ -0,0 +1,135 @@
+/* From http://stackoverflow.com/a/10284006/223092 */
+function zip(arrays) {
+    return arrays[0].map(function(_,i){
+        return arrays.map(function(array){return array[i]})
+    });
+}
+
+$(document).ready(function() {
+    $.each(graphs_data, function(index, graph_data) {
+        var graph_id = graph_data.id,
+            dataset,
+            plot,
+            graph_data,
+            graph_div = $('#' + graph_id),
+            previousPoint = null;
+
+        if (!graph_data.x_values) {
+            /* Then there's no data for this graph */
+            return true;
+        }
+
+        graph_div.css('width', '700px');
+        graph_div.css('height', '600px');
+
+        dataset = [
+            {'color': 'orange',
+             'bars': {
+                 'show': true,
+                 'barWidth': 0.5,
+                 'align': 'center'
+             },
+             'data': zip([graph_data.x_values,
+                          graph_data.y_values])
+            }
+        ]
+
+        if (graph_data.errorbars) {
+            dataset.push({
+                'color': 'orange',
+                'points': {
+                    // Don't show these, just draw error bars:
+                    'radius': 0,
+                    'errorbars': 'y',
+                    'yerr': {
+                        'asymmetric': true,
+                        'show': true,
+                        'upperCap': "-",
+                        'lowerCap': "-",
+                        'radius': 5
+                    }
+                },
+                'data': zip([graph_data.x_values,
+                             graph_data.y_values,
+                             graph_data.cis_below,
+                             graph_data.cis_above])
+            });
+        }
+
+        options = {
+            'grid': { 'hoverable': true, 'clickable': true },
+            'xaxis': {
+                'ticks': graph_data.x_ticks,
+                'rotateTicks': 90
+            },
+            'yaxis': {
+                'min': 0,
+                'max': graph_data.y_max
+            },
+            'xaxes': [{
+                'axisLabel': graph_data.x_axis,
+                'axisLabelPadding': 20,
+                'axisLabelColour': 'black'
+            }],
+            'yaxes': [{
+                'axisLabel': graph_data.y_axis,
+                'axisLabelPadding': 20,
+                'axisLabelColour': 'black'
+            }],
+            'series': {
+		'lines': {
+		    'show': false
+		}
+	    },
+        }
+
+        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;
+            }
+        });
+    });
+});