diff --git a/src/lib/Hydra/Controller/Job.pm b/src/lib/Hydra/Controller/Job.pm
index def78c0a..aa708bb2 100644
--- a/src/lib/Hydra/Controller/Job.pm
+++ b/src/lib/Hydra/Controller/Job.pm
@@ -89,6 +89,15 @@ sub closure_sizes : Chained('job') PathPart('closure-sizes') Args(0) {
 }
 
 
+sub output_sizes : Chained('job') PathPart('output-sizes') Args(0) {
+    my ($self, $c) = @_;
+    my @res = $c->stash->{job}->builds->search(
+        { finished => 1, buildstatus => 0, size => { '!=', 0 } },
+        { order_by => "id", columns => [ "id", "timestamp", "size" ] });
+    $self->status_ok($c, entity => [ map { { id => $_->id, timestamp => $_ ->timestamp, value => $_->size } } @res ]);
+}
+
+
 # Hydra::Base::Controller::ListBuilds needs this.
 sub get_builds : Chained('job') PathPart('') CaptureArgs(0) {
     my ($self, $c) = @_;
diff --git a/src/root/build-history-tab.tt b/src/root/build-history-tab.tt
index bef3af62..8d274f71 100644
--- a/src/root/build-history-tab.tt
+++ b/src/root/build-history-tab.tt
@@ -71,71 +71,3 @@
           });
         });
       </script>
-
-      <h3>Store path size history (in MB)</h3>
-
-      <div id="placeholder-size" style="width:800px;height:400px;"></div>
-      <div id="overview-size" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div>
-
-      <script type="text/javascript">
-        $(function() {
-          var d = [];
-          var ids = [];
-          [% FOREACH prevbuild IN prevBuilds; IF prevbuild.size != 0 %]
-            d.push([[% prevbuild.starttime * 1000 %],[% prevbuild.size / (1024*1024.0) %]]);
-            ids[[% prevbuild.starttime * 1000 %]] = [% prevbuild.id %] ;
-          [% END; END %]
-
-          var options = {
-            xaxis: { mode: "time" },
-            selection: { mode: "x" },
-            points: { show: true },
-            lines: { show: true },
-            grid: {
-              clickable: true,
-              hoverable: true,
-              hoverFill: '#444',
-              hoverRadius: 4,
-            },
-          };
-
-          var plot = $.plot($("#placeholder-size"), [d], options);
-
-          var overview = $.plot($("#overview-size"), [d], {
-            series: {
-              lines: { show: true, lineWidth: 1 },
-              shadowSize: 0
-            },
-            xaxis: { ticks: [], mode: "time" },
-            yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
-            selection: { mode: "x" }
-          });
-
-          // now connect the two
-
-          $("#placeholder-size").bind("plotselected", function (event, ranges) {
-            // do the zooming
-            plot = $.plot($("#placeholder-size"), [d],
-              $.extend(true, {}, options, {
-                xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
-              }));
-
-            // don't fire event on the overview to prevent eternal loop
-            overview.setSelection(ranges, true);
-          });
-
-          $("#overview-size").bind("plotselected", function (event, ranges) {
-            plot.setSelection(ranges);
-          });
-
-          $("#placeholder-size").bind("plotclick", function (e, pos, item) {
-            if (item) {
-              plot.highlight(item.series, item.datapoint);
-              buildid = ids[item.datapoint[0]];
-              window.location = "/build/"+buildid;
-            }
-          });
-        });
-      </script>
-
-
diff --git a/src/root/common.tt b/src/root/common.tt
index 6300bdd9..946c88ae 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -533,4 +533,85 @@ BLOCK includeFlot %]
 [% END;
 
 
+BLOCK createChart %]
+
+  <div id="[%id%]-chart" style="width: 1000px; height: 400px;"></div>
+  <div id="[%id%]-overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>
+
+  <script type="text/javascript">
+    $(function() {
+      requestJSON({
+        url: "[%dataUrl%]",
+        success: function(data) {
+          var ids = [];
+          var d = [];
+          var max = 0;
+          data.forEach(function(x) {
+            var t = x.timestamp * 1000;
+            ids[t] = x.id;
+            d.push([t, x.value / (1024.0 * 1024.0)]);
+            max = Math.max(t, max);
+          });
+
+          var options = {
+            xaxis: { mode: "time" },
+            yaxis: { min: 0 },
+            selection: { mode: "x" },
+            points: { show: true },
+            lines: { show: true },
+            grid: {
+              clickable: true,
+              hoverable: true,
+              hoverFill: '#444',
+              hoverRadius: 4,
+            },
+          };
+
+          var plot = $.plot($("#[%id%]-chart"), [d], options);
+
+          var overview = $.plot($("#[%id%]-overview"), [d], {
+            series: {
+              lines: { show: true, lineWidth: 1 },
+              shadowSize: 0
+            },
+            xaxis: { ticks: [], mode: "time" },
+            yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+            selection: { mode: "x" }
+          });
+
+          // now connect the two
+
+          $("#[%id%]-chart").bind("plotselected", function (event, ranges) {
+            // do the zooming
+            plot = $.plot($("#[%id%]-chart"), [d],
+              $.extend(true, {}, options, {
+                xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
+              }));
+
+            // don't fire event on the overview to prevent eternal loop
+            overview.setSelection(ranges, true);
+          });
+
+          $("#[%id%]-overview").bind("plotselected", function (event, ranges) {
+            plot.setSelection(ranges);
+          });
+
+          $("#[%id%]-chart").bind("plotclick", function (e, pos, item) {
+            if (item) {
+              plot.highlight(item.series, item.datapoint);
+              buildid = data[item.dataIndex].id;
+              window.location = "/build/"+buildid;
+            }
+          });
+
+          // Zoom in to the last two months by default.
+          plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
+        }
+      });
+    });
+  </script>
+
+[% END;
+
+
 %]
diff --git a/src/root/job.tt b/src/root/job.tt
index 1905faf1..de2d2655 100644
--- a/src/root/job.tt
+++ b/src/root/job.tt
@@ -88,81 +88,11 @@ removed or had an evaluation error.</div>
 
     <h3>Closure size (in MiB)</h3>
 
-    <div id="placeholder" style="width: 1000px; height: 400px;"></div>
-    <div id="overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>
+    [% INCLUDE createChart id="closure-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'closure-sizes') %]
 
-    <script type="text/javascript">
-      $(function() {
-        requestJSON({
-          url: "[%c.uri_for('/job' project.name jobset.name job.name 'closure-sizes')%]",
-          success: function(data) {
-            var ids = [];
-            var d = [];
-            var max = 0;
-            data.forEach(function(x) {
-              var t = x.timestamp * 1000;
-              ids[t] = x.id;
-              d.push([t, x.value / (1024.0 * 1024.0)]);
-              max = Math.max(t, max);
-            });
+    <h3>Output size (in MiB)</h3>
 
-            var options = {
-              xaxis: { mode: "time" },
-              yaxis: { min: 0 },
-              selection: { mode: "x" },
-              points: { show: true },
-              lines: { show: true },
-              grid: {
-                clickable: true,
-                hoverable: true,
-                hoverFill: '#444',
-                hoverRadius: 4,
-              },
-            };
-
-            var plot = $.plot($("#placeholder"), [d], options);
-
-            var overview = $.plot($("#overview"), [d], {
-              series: {
-                lines: { show: true, lineWidth: 1 },
-                shadowSize: 0
-              },
-              xaxis: { ticks: [], mode: "time" },
-              yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
-              selection: { mode: "x" }
-            });
-
-            // now connect the two
-
-            $("#placeholder").bind("plotselected", function (event, ranges) {
-              // do the zooming
-              plot = $.plot($("#placeholder"), [d],
-                $.extend(true, {}, options, {
-                  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
-                }));
-
-              // don't fire event on the overview to prevent eternal loop
-              overview.setSelection(ranges, true);
-            });
-
-            $("#overview").bind("plotselected", function (event, ranges) {
-              plot.setSelection(ranges);
-            });
-
-            $("#placeholder").bind("plotclick", function (e, pos, item) {
-              if (item) {
-                plot.highlight(item.series, item.datapoint);
-                buildid = data[item.dataIndex].id;
-                window.location = "/build/"+buildid;
-              }
-            });
-
-            // Zoom in to the last two months by default.
-            plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
-          }
-        });
-      });
-    </script>
+    [% INCLUDE createChart id="output-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'output-sizes') %]
 
   </div>