diff --git a/orchestra/contrib/musician/templates/musician/history.html b/orchestra/contrib/musician/templates/musician/history.html
new file mode 100644
index 00000000..8463a5f0
--- /dev/null
+++ b/orchestra/contrib/musician/templates/musician/history.html
@@ -0,0 +1,251 @@
+{% load i18n utils static %}
+
+<html>
+<head>
+    <title>Resource history</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <link rel="stylesheet" type="text/css" href="{% static "orchestra/css/dancing-dots.css" %}"/>
+    <script src="{% static "admin/js/jquery.js" %}" type="text/javascript"></script>
+    <script src="{% static "orchestra/js/highcharts/stock/highstock.js" %}" type="text/javascript"></script>
+    <script src="{% static "orchestra/js/highcharts/modules/exporting.js" %}" type="text/javascript"></script>
+    <script>
+    
+    String.prototype.capitalize = function() {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+    function plot_charts(url) {
+        charts = {
+            series: function (div, i, seriesOptions, resource) {
+                $(div).highcharts('StockChart', {
+                    chart: {
+                        backgroundColor: (i % 2 ? "#EDF3FE" : "#FFFFFF")
+                    },
+                    rangeSelector: {
+                        selected: 4
+                    },
+                    title: {
+                        text: resource['content_type'].capitalize() + ' ' +
+                              resource['verbose_name'].toLowerCase() + ' ' +
+                              resource['aggregation'] +
+                              (div.indexOf('aggregate') > 0 ? ' (aggregated)': '')
+                    },
+                    xAxis: {
+                        ordinal: false
+                    },
+                    yAxis: {
+                        labels: {
+                            formatter: function () {
+                                return this.value + ' ' + resource['unit'];
+                            }
+                        },
+                        plotLines: [{
+                            value: 0,
+                            width: 2,
+                            color: 'silver'
+                        }],
+                        min: 0,
+                    },
+                    /*legend: {
+                        align: 'right',
+                        x: -30,
+                        verticalAlign: 'top',
+                        y: 25,
+                        floating: true,
+                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
+                        borderColor: '#CCC',
+                        borderWidth: 1,
+                        shadow: false,
+                        enabled: true
+                    },
+                    rangeSelector: {
+                        enabled: false
+                    },*/
+                    tooltip: {
+                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.3f} ' +
+                                     resource['unit']+ '</b><br/>',
+                        valueDecimals: 3
+                    },
+                    series: seriesOptions
+                });
+             },
+            columns: function (div, i, seriesOptions, resource){
+                $(div).highcharts({
+                    chart: {
+                        type: 'column',
+                        backgroundColor: (i % 2 ? "#EDF3FE" : "#FFFFFF")
+                    },
+                    title: {
+                        text: resource['content_type'].capitalize() + ' ' +
+                              resource['verbose_name'].toLowerCase() + ' ' +
+                              resource['aggregation'] +
+                              (div.indexOf('aggregate') > 0 ? ' (aggregated)': '')
+                    },
+                    xAxis: {
+                        categories: resource['dates']
+                    },
+                    yAxis: {
+                        min: 0,
+                        title: {
+                            text: resource['unit']
+                        },
+                        stackLabels: {
+                            enabled: true,
+                            style: {
+                                fontWeight: 'bold',
+                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
+                            },
+                            formatter: function () {
+                                return this.total + ' ' + resource['unit'];
+                            }
+                        }
+                    },
+                    legend: {
+                        align: 'right',
+                        x: -30,
+                        verticalAlign: 'top',
+                        y: 25,
+                        floating: true,
+                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
+                        borderColor: '#CCC',
+                        borderWidth: 1,
+                        shadow: false
+                    },
+                    tooltip: {
+                        formatter: function () {
+                            var s = ['<b>' + this.x + '</b>'];
+                            $.each(this.points, function(i, point) {
+                                s.push('<span style="color:' + this.series.color + '">' + this.series.name + ': ' + this.y + ' ' + resource['unit']);
+                            });
+                            s.push('<b>Total: ' + this.points[0].total + ' ' + resource['unit'] + '</b>');
+                            return s.join('<br>');
+                        },
+                        valueDecimals: 3,
+                        shared: true
+                    },
+                    plotOptions: {
+                        column: {
+                            stacking: 'normal',
+                            dataLabels: {
+                                enabled: true,
+                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
+                                style: {
+                                    textShadow: '0 0 3px black'
+                                },
+                                formatter: function () {
+                                    return this.series.name + ': ' + this.y.toFixed(3) + ' ' + resource['unit'];
+                                }
+                            }
+                        }
+                    },
+                    series: seriesOptions
+                })
+            }
+        };
+        
+        $.getJSON(url, function(data) {
+            var dataLength = data.length;
+            $("#charts").empty();
+            for (i=0; i < dataLength; i++) {
+                var index = 0;
+                var seriesOptions = [];
+                var resource = data[i];
+                var objects = resource["objects"];
+                var objectsLength = objects.length;
+                var a_index = 0;
+                var aggregated = false;
+                var aggregates = []
+                for (j=0; j < objectsLength; j++) {
+                    aggregate = [];
+                    var object = objects[j];
+                    var monitors = object["monitors"];
+                    var monitorsLength = monitors.length;
+                    for (k=0; k < monitorsLength; k++) {
+                        var datasets = monitors[k]['datasets'];
+                        if (resource['aggregated_history']) {
+                            var datasetsLength = datasets.length;
+                            for (l=0; l < datasetsLength; l++) {
+                                seriesOptions.push(datasets[l]);
+                                for (m=0; m < resource['dates'].length; m++) {
+                                    aggregate[m] = ((aggregate[m] || 0 ) + datasets[l]['data'][m]);
+                                };
+                            };
+                        } else {
+                            for (var object_name in datasets) {
+                                seriesOptions[index] = {
+                                    name: object_name,
+                                    data: datasets[object_name]
+                                };
+                                index += 1;
+                            };
+                        };
+                    };
+                    if (k > 1)
+                        aggregated = true;
+                    aggregates[a_index] = {
+                        name: object['object_name'],
+                        data: aggregate
+                    };
+                    a_index += 1;
+                };
+                
+                divs = (
+                    '<div class="chart-box" style="background: '+(i % 2 ? "#EDF3FE" : "#FFFFFF")+';">' +
+                    '<h1>'+resource['content_type'].capitalize() + ' ' + resource['verbose_name'].toLowerCase() + '</h1>' +
+                    '<div id="resource-'+i+'" class="chart"></div>'
+                );
+                if (a_index > 1 && aggregated && resource['aggregated_history'])
+                    divs += '<br><div class="chart" id="resource-'+i+'-aggregate"></div>';
+                divs += '</div>';
+                
+                $("#charts").append(divs);
+                if (a_index > 1 && aggregated && resource['aggregated_history'])
+                    charts['columns']('#resource-'+i+'-aggregate', i, aggregates, resource);
+                charts[(resource['aggregated_history'] ? 'columns': 'series')]('#resource-'+i, i, seriesOptions, resource);
+            };
+        });
+    };
+    plot_charts("{% url 'musician:dashboard-historydata' ids %}");
+    </script>
+    <style type="text/css">
+    @page {
+       size: 11.69in 8.27in;
+    }
+    h1 {
+       font-family: sans;
+       font-size: 21px;
+    }
+    #notice {
+       font-family: sans;
+       font-size: 12px;
+       text-align: right;
+       padding-right: 10px;
+    }
+    #message {
+        width:300px;
+        margin:0 auto;
+        font-family: monospace;
+        font-weight: bold;
+        font-size: 18px;
+        margin-top: 5%;
+    }
+    .chart-box {
+        margin: 10px;
+        margin-bottom: -1px;
+        border: 1px solid grey;
+        padding: 20px;
+    }
+    .chart {
+        height: 400px;
+        min-width: 310px;
+    }
+    </style>
+</head>
+<body>
+    <div id="notice">&#9830;Notice that resources used by deleted services will not appear.</div>
+    <div id="charts">
+        <div id="message">
+            > crunching data <span id="dancing-dots-text"> <span><span>.</span><span>.</span><span>.</span></span></span>
+        </div>
+    </div>
+</body>
+</html>
