2 files changed, 117 insertions, 0 deletions
diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
new file mode 100644
index 000000000..5d3d52152
--- /dev/null
+++ b/public/javascripts/stats-graphs.js
@@ -0,0 +1,82 @@
+/* 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);
+
+        graph_div.css('width', '700px');
+        graph_div.css('height', '400px');
+
+        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 = {
+            'xaxis': {
+                'ticks': graph_data['x_ticks'],
+            },
+            '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);
+    });
+});
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 6f6d7b365..21d0735e0 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -1742,3 +1742,38 @@ text-decoration:none;
 .big {
   font-size: larger;
 }
+
+.public-body-ranking {
+  margin-bottom: 40px;
+}
+
+.public-body-ranking-title {
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+
+.public-body-ranking table {
+    margin-top: 20px;
+    margin-left: 30px;
+}
+
+.public-body-ranking td, th {
+    border: 0px;
+    padding: 5px;
+    padding-right: 20px;
+}
+
+.public-body-ranking td.statistic {
+    text-align: center;
+}
+
+.public-body-ranking .axisLabels {
+    /* Justification for using !important hereL the axis label color is
+       set in the style attribute in Flot's Javascript to the same
+       colour as the grid background. Changing this requires quite
+       invasive changes to the Javascript, and is likely to be
+       irrelevant in the next version of Flot anyway, which will have
+       core support for axis labels.  So, just use !important to make
+       the axes black rather than transparent grey for the moment: */
+    color: #000 !important;
+}