diff --git a/LTA/ltastorageoverview/lib/webservice/templates/index.html b/LTA/ltastorageoverview/lib/webservice/templates/index.html
index 95ebda9dcfedfb28d332ba4bf3e647fa14d0c929..6b378d8c8b614bbb0d77251bf9e7cb0990a36b17 100644
--- a/LTA/ltastorageoverview/lib/webservice/templates/index.html
+++ b/LTA/ltastorageoverview/lib/webservice/templates/index.html
@@ -11,40 +11,113 @@
 <body>
     <script type="text/javascript">
         $(function () {
-        $('#container').highcharts({
-        chart: {
-        plotBackgroundColor: null,
-        plotBorderWidth: null,
-        plotShadow: false,
-        type: 'pie'
-        },
-        title: {
-        text: 'LTA Storage Site Usage'
-        },
-        tooltip: {
-        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-        },
-        plotOptions: {
-        pie: {
-        allowPointSelect: true,
-        cursor: 'pointer',
-        dataLabels: {
-        enabled: true,
-        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
-        style: {
-        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
-        }
-        }
-        }
-        },
-        series: [{
-        name: "StorageSiteUsage",
-        colorByPoint: true,
-        data: {{storagesitedata|safe}}
-        }]
+            $('#usage_piechart_container').highcharts({
+                chart: {
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false,
+                type: 'pie'
+                },
+                title: {
+                text: 'LTA Storage Site Usage'
+                },
+                tooltip: {
+                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+                },
+                plotOptions: {
+                pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                enabled: true,
+                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                style: {
+                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+                }
+                }
+                }
+                },
+                series: [{
+                name: "StorageSiteUsage",
+                colorByPoint: true,
+                data: {{storagesitedata|safe}}
+                }]
+                });
+
+
+        $(function () {
+            $('#usage_trend_container').highcharts({
+                chart: { type: 'area'},
+                title: { text: 'LTA Storage Site Usage Per Month' },
+                xAxis: { type: 'datetime' },
+                yAxis: { title: { text: 'TB'},
+                         labels: { formatter: function () { return this.value / 10000000000000;}}
+                },
+                tooltip: {
+                    formatter: function () {
+                        var s = '<b>' + Highcharts.dateFormat('%Y/%m/%d', this.x) + '</b>';
+
+                        $.each(this.points, function () {
+                            s += '<br/><b>' + this.series.name + '</b>: ' +
+                                Highcharts.numberFormat(this.y / 10000000000000, 1, '.') + ' TB';
+                        });
+
+                        return s;
+                    },
+                    shared: true
+                },
+                plotOptions: {
+                    area: {
+                        stacking: 'normal',
+                        lineColor: '#666666',
+                        lineWidth: 1,
+                        marker: {
+                            lineWidth: 1,
+                            radius: 2,
+                            lineColor: '#666666'
+                        }
+                    }
+                },
+                series: {{usage_per_month_series|safe}}
+            });
+        });
+
+        $(function () {
+            $('#usage_deltas_container').highcharts({
+                chart: { type: 'column'},
+                title: { text: 'LTA Storage Site Deltas Per Month' },
+                xAxis: { type: 'datetime' },
+                yAxis: { title: { text: 'TB'},
+                         labels: { formatter: function () { return this.value / 10000000000000;}}
+                },
+                tooltip: {
+                    formatter: function () {
+                        var s = '<b>' + Highcharts.dateFormat('%Y/%m/%d', this.x) + '</b>';
+
+                        $.each(this.points, function () {
+                            s += '<br/><b>' + this.series.name + '</b>: ' +
+                                Highcharts.numberFormat(this.y / 10000000000000, 1, '.') + ' TB';
+                        });
+
+                        return s;
+                    },
+                    shared: true
+                },
+                plotOptions: {
+                    column: {
+                        pointPadding: 0.2,
+                        borderWidth: 0
+                    }
+                },
+                series: {{deltas_per_month_series|safe}}
+            });
         });
+
+
         });
         </script>
-    <div id="container" style="min-width: 310px; min-height: 400px; width: 100%; height: 100%; margin: 0 auto"></div>
+    <div id="usage_piechart_container" style="min-width: 310px; min-height: 400px; width: 100%; height: 100%; margin: 10 auto; border-width:1"></div>
+    <div id="usage_trend_container" style="min-width: 310px; min-height: 400px; width: 100%; height: 100%; margin: 10 auto border-width:1"></div>
+    <div id="usage_deltas_container" style="min-width: 310px; min-height: 400px; width: 100%; height: 100%; margin: 10 auto border-width:1"></div>
 </body>
 </html>
diff --git a/LTA/ltastorageoverview/lib/webservice/webservice.py b/LTA/ltastorageoverview/lib/webservice/webservice.py
index d2424ce22ca9143150485916c8ec4270c01e13bd..903fcd8ae705ceb09f83e29434a67f5249c381be 100755
--- a/LTA/ltastorageoverview/lib/webservice/webservice.py
+++ b/LTA/ltastorageoverview/lib/webservice/webservice.py
@@ -20,12 +20,15 @@
 import sys
 import os
 import os.path
+from datetime import datetime, timedelta
 from flask import Flask
 from flask import Config
 from flask import render_template
 from flask import json
 import threading
 from ltastorageoverview import store
+from ltastorageoverview.utils import humanreadablesize
+from ltastorageoverview.utils import monthRanges
 
 app = Flask('LTA storage overview')
 print str(app.config)
@@ -36,17 +39,6 @@ print
 print str(app.config)
 db = store.LTAStorageDb('../ltastorageoverview.sqlite')
 
-def humanreadablesize(num, suffix='B'):
-    """ converts the given size (number) to a human readable string in powers of 1024"""
-    try:
-        for unit in ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z']:
-            if abs(num) < 1024.0:
-                return "%3.1f%s%s" % (num, unit, suffix)
-            num /= 1024.0
-        return "%.1f%s%s" % (num, 'Y', suffix)
-    except TypeError:
-        return str(num)
-
 @app.route('/')
 @app.route('/index.html')
 def index():
@@ -56,21 +48,40 @@ def index():
 
     total = 0.0
     for site in sites:
-        rootDirs = db.rootDirectoriesForSite(site[0])
-
-        site_usage = 0.0
-        for rootDir in rootDirs:
-            usage = float(db.totalFileSizeInTree(rootDir[0]))
-            site_usage += usage
+        site_usage = float(db.totalFileSizeInSite(site[0]))
         usages[site[1]] = site_usage
         total += site_usage
 
-    data='[' + ', '.join(['''{name: "%s %s", y: %.1f}''' % (name, humanreadablesize(usage), 100.0*usage/total) for name, usage in usages.items()]) + ']'
-    #data='''[{name: "Microsoft Internet Explorer",y: 56.33}, {name: "Chrome",y: 24.03,sliced: true,selected: true}, {name: "Firefox",y: 10.38}, {name: "Safari",y: 4.77}, {name: "Opera",y: 0.91}, {name: "Proprietary or Undetectable",y: 0.2}]'''
+    storagesitedata='[' + ', '.join(['''{name: "%s %s", y: %.1f}''' % (site[1], humanreadablesize(usages[site[1]]), 100.0*usages[site[1]]/total) for site in sites]) + ']'
+
+    min_date, max_date = db.datetimeRangeOfFilesInTree()
+    month_ranges = monthRanges(min_date, max_date)
+
+    format = '%Y,%m,%d,%H,%M,%S'
+    datestamps=['Date.UTC(%s)' % datetime.strftime(x[1], format) for x in month_ranges]
+
+    usage_per_month_series='['
+    deltas_per_month_series='['
+    for site in sites:
+        deltas = [db.totalFileSizeInSite(site[0], mr[0], mr[1]) for mr in month_ranges]
+        data = ', '.join(['[%s, %s]' % (x[0], str(x[1])) for x in zip(datestamps, deltas)])
+        deltas_per_month_series += '''{name: '%s', data: [%s]},\n''' % (site[1], data)
+
+        cumulatives = [deltas[0]]
+        for delta in deltas[1:]:
+            cumulatives.append(cumulatives[-1] + delta)
+
+        data = ', '.join(['[%s, %s]' % (x[0], str(x[1])) for x in zip(datestamps, cumulatives)])
+        usage_per_month_series += '''{name: '%s', data: [%s]},\n''' % (site[1], data)
+
+    usage_per_month_series+=']'
+    deltas_per_month_series+=']'
 
     return render_template('index.html',
                            title='LTA storage overview',
-                           storagesitedata=data)
+                           storagesitedata=storagesitedata,
+                           usage_per_month_series=usage_per_month_series,
+                           deltas_per_month_series=deltas_per_month_series)
 
 @app.route('/rest/sites/')
 def get_sites():
@@ -118,7 +129,7 @@ def get_filesInDirectory(dir_id):
 
 def main(argv):
     #db = store.LTAStorageDb(argv[0] if argv else 'ltastoragedb.sqlite')
-    app.run(debug=False,host='0.0.0.0')
+    app.run(debug=True,host='0.0.0.0')
 
 if __name__ == '__main__':
     main(sys.argv[1:])