Changeset 9335

Timestamp:

03/27/13 16:34:48 (12 years ago)

Author:

fschoepp

Message:

#1888:

• The Edit-Experiment-Page now correctly displays the experiments again.
• Disabled key navigation for all wizards.
• Added a RunCollectionView to render different Plots for the run results of a job.
• Added a Boxplot-Chart and a Bubble-Chart for rendering the results.
• Added underscoreAddon.js which provides methods to calculate mean/sum of an JavaScript array/list.

Location:

branches/OaaS/HeuristicLab.Services.Optimization.Web

Files:

• Content/backbone/underscoreAddon.js (added)
• Content/experiment.controller.js (modified) (1 diff)
• Content/experiment.view.js (modified) (4 diffs)
• Content/job.view.js (modified) (3 diffs)
• Content/jqplot/src/plugins/jqplot.boxplotRenderer.js (added)
• HeuristicLab.Services.Optimization.Web.csproj (modified) (1 diff)
• Views/Job/Index.cshtml (modified) (1 diff)
• Views/Shared/_Layout.cshtml (modified) (2 diffs)

branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/experiment.controller.js

@@ -190 +190 @@
                 // selectableGroup = new OAAS_VIEW.SelectableGroup({ collection: availableExperiments, el: $('#experiments') });
                 selectableGroup.render();
+                draggableExperiments.render();
 
                 wizardController.listenTo(selectableGroup, 'node-selected', function (nodeId) {

branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/experiment.view.js

@@ -197 +197 @@
             var self = this;
             this.$el.smartWizard({
+                keyNavigation: false,
                 onLeaveStep: function (step) {
                     var stepNum = parseInt(step.attr("rel"));
@@ -286 +287 @@
             newWizard.appendTo(this.$el);
             newWizard.smartWizard({
+                keyNavigation: false,
                 onFinish: function () {
                     self.trigger('parameters-finished');
@@ -704 +706 @@
     });
 
-
-    my.PlotView = Backbone.View.extend({
-        render: function () {
-            this.$el.empty();
-            var plotLabels = undefined;
-            if (this.model.RowNames) {
-                plotLabels = [];
-                for (var i = 0; i < this.model.RowNames.length; i++) {
-                    plotLabels.push({ label: this.model.RowNames[i] });
-                }
-            }
-
-            var values = this.model.Value ? this.model.Value : this.model;
-
-            var plotValues = [];
-            if ($.isArray(values[0])) {
-                var columnCount = values[0].length;
-                var colVals = {};
-                for (var i = 0; i < columnCount; i++)
-                    colVals[i] = [];
-
-                for (var i = 0; i < values.length; i++) {
-                    for (var j = 0; j < columnCount; j++) {
-                        colVals[j].push(values[i][j]);
-                    }
-                }
-
-                for (var i = 0; i < columnCount; i++) {
-                    plotValues.push(colVals[i]);
-                }
-            } else {
-                plotValues.push(values);
-            }
-
-            if (!this.$el.attr('id')) {
-                this.$el.attr('id', my.PlotView.nextId());
-            }
-
-            this.$el.css('width', '500px');
-
-            this.plot = $.jqplot(this.$el.attr('id'), plotValues, {
-                cursor: {
-                    show: true,
-                    zoom: true,
-                    showTooltip: false
-                },
-                series: plotLabels,
-                seriesDefaults: {
-                    lineWidth: 1.5,
-                    markerOptions: {
-                        size: 2,
-                        lineWidth: 2
-                    }
-                },
-                legend: {
-                    show: true,
-                    placement: 'outsideGrid'
-                },
-                highlighter: {
-                    show: true,
-                    sizeAdjust: 7.5
-                }
-            });
-        },
-        refresh: function () {
-            if (this.plot)
-                this.plot.replot({ resetAxes: true });
-        }
-    },
-  {
-      plotId: 1,
-      nextId: function () {
-          return my.PlotView.plotId++;
-      }
-  });
-
     my.VariationContentView = Backbone.View.extend({
         render: function () {
@@ -870 +796 @@
         }
     });
+
+    // ========================== Run Collection Views ===================================
+
+    function percentile(p, data) {
+        var i = (data.length * p) / 100 + 0.5;
+        var f = i - parseInt(i);
+        var k = Math.floor(i) - 1;
+        return (1 - f) * data[k] + f * data[k + 1];
+    }
+
+    my.RunCollectionView = Backbone.View.extend({
+        events: {
+            'change .x': 'xAxisSelected',
+            'change .y': 'yAxisSelected',
+            'change .plotType': 'plotSelected',
+            'change .datatableOptions': 'datatableSelected',
+            'change .datatableRow': 'datatableRowSelected',
+            'change .bubbleSize': 'bubbleTypeSelected'
+        },
+        render: function () {
+            var self = this;
+            var ele = $(_.template($('#runcollection_template').html(), {}));
+            var xAxisSelect = $('.x', ele);
+            var yAxisSelect = $('.y', ele);
+            var results = this.model.models[0].get('results');
+            this.options.datatables = {};
+            var datatableSelect = $('.datatableOptions', ele);
+
+            var names = _.reduce(this.model.models, function (arr, model) {
+                return _.union(arr, _.map(model.get('results'), function (elem) { return elem.Name }));
+            }, []);
+
+            this.bubbleSelect = $('select[class="bubbleSize"]', ele);
+
+            _.each(names, function (name) {
+                var option = $("<option />", { value: name, text: name });
+                option.clone().appendTo(xAxisSelect);
+                option.clone().appendTo(yAxisSelect);
+                option.clone().appendTo(self.bubbleSelect);
+                var rowNames = null;
+                var foundModel = _.find(self.model.models, function (model) {
+                    var entry = _.find(model.get('results'), function (entry) { return entry.Name == name && entry.RowNames });
+                    if (entry)
+                        rowNames = entry.RowNames;
+                    return entry && entry.RowNames;
+                });
+                if (rowNames) {
+                    self.options.datatables[name] = rowNames;
+                    $('<option />', { value: name, text: name }).appendTo(datatableSelect);
+                }
+            });
+
+            // prepare slider settings
+            this.options.bubbleSize = 10;
+            this.options.xAxis = this.model.models[0].get('results')[0].Name;
+            this.options.yAxis = this.options.xAxis;
+            this.options.plot = 'Boxplot';
+            $('div[class="bubbleSlider"]', ele).slider({
+                range: "max",
+                min: 10,
+                max: 40,
+                value: 10,
+                stop: function (event, ui) {
+                    self.options.bubbleSize = ui.value;
+                    self.createPlot();
+                }
+            }).css('width', '120px').css('margin-left', '15px').css('margin-right', '15px').css('display', 'inline-block');
+            ele.appendTo(this.$el);
+
+            // init resizer
+            this.plotWidth = 500;
+            this.plotHeight = 500;
+            var parent = $('div[class="resizer"]', this.$el);
+            this.resizerView = new my.ResizableView({ el: parent });
+            this.listenTo(this.resizerView, 'resized', function (evt) {
+                self.updatePlot(
+         $(evt.target).width() * 0.96,
+         $(evt.target).height() * 0.96
+        );
+            });
+            this.resizerView.render();
+            this.updateRowSelect(datatableSelect.val());
+            this.createPlot();
+            this.updatePlot(
+         600,
+         500
+        );
+        },
+        updateRowSelect: function (name) {
+            if (!name)
+                return;
+            var rowSelect = $('select[class="datatableRow"]', this.$el);
+            rowSelect.empty();
+            var rownames = this.options.datatables[name];
+            for (var i = 0; i < rownames.length; i++) {
+                $('<option />', { value: rownames[i], text: rownames[i] }).appendTo(rowSelect);
+            }
+            this.options.selectedDatatable = name;
+            this.options.datatableRow = rowSelect.val();
+            this.createPlot();
+        },
+        datatableSelected: function (evt) {
+            var value = $(evt.target).val();
+            this.options.selectedDatatable = value;
+            this.updateRowSelect(value);
+        },
+        datatableRowSelected: function (evt) {
+            var value = $(evt.target).val();
+            this.options.datatableRow = value;
+            this.createPlot();
+        },
+        xAxisSelected: function (evt) {
+            var target = $(evt.target);
+            this.options.xAxis = target.val();
+            this.createPlot();
+        },
+        yAxisSelected: function (evt) {
+            var target = $(evt.target);
+            this.options.yAxis = target.val();
+            this.createPlot();
+        },
+        plotSelected: function (evt) {
+            var target = $(evt.target);
+            this.options.plot = target.val();
+            this.createPlot();
+        },
+        bubbleTypeSelected: function (evt) {
+            this.createPlot();
+        },
+        updateVisibility: function (evt) {
+            if (this.options.plot == 'Boxplot') {
+                $('span[class="choice"]', this.$el).show();
+                $('span[class="bubble"]', this.$el).hide();
+                $('span[class="datatable"]', this.$el).hide();
+            } else if (this.options.plot == 'Bubblechart') {
+                $('span[class="choice"]', this.$el).show();
+                $('span[class="bubble"]', this.$el).show();
+                $('span[class="datatable"]', this.$el).hide();
+            } else if (this.options.plot == 'Datatable') {
+                $('span[class="choice"]', this.$el).hide();
+                $('span[class="bubble"]', this.$el).hide();
+                $('span[class="datatable"]', this.$el).show();
+            }
+        },
+        updatePlot: function (width, height) {
+            this.plotDiv.height(height);
+            this.plotDiv.width(width);
+            this.plotWidth = width;
+            this.plotHeight = height;
+            this.plot.refresh();
+        },
+        createPlot: function () {
+            if (this.options.plot && this.options.xAxis && this.options.yAxis) {
+                if (this.options.plot == 'Boxplot') {
+                    this.createBoxplot();
+                } else if (this.options.plot == 'Bubblechart') {
+                    this.createBubblechart();
+                } else if (this.options.plot == 'Datatable') {
+                    this.createDatatable();
+                }
+                this.updateVisibility();
+            }
+        },
+        preparePlotDiv: function () {
+            var parent = $('div[class="plot"]', this.$el);
+            parent.empty();
+            this.plotDiv = $('<div></div>').css('width', this.plotWidth).css('height', this.plotHeight).appendTo(parent);
+            return this.plotDiv;
+        },
+        createBoxplot: function () {
+            var self = this;
+
+            // prepare data for boxplot
+            var values = {};
+            for (var i = 0; i < this.model.models.length; i++) {
+                var xlabel = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
+                if (!xlabel)
+                    continue;
+
+                if ($.isArray(xlabel.Value))
+                    values[xlabel.Name + ' = ' + xlabel.Value[0]] = [];
+                else
+                    values[xlabel.Name + ' = ' + xlabel.Value] = [];
+            }
+
+            for (var i = 0; i < this.model.models.length; i++) {
+                var xlabel = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
+                var entry = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.yAxis });
+                if (!xlabel || !entry || !entry.Value)
+                    continue;
+
+                var index = xlabel.Name + ' = ' + ($.isArray(xlabel.Value) ? xlabel.Value[0] : xlabel.Value);
+
+                if ($.isArray(entry.Value))
+                    values[index].push(entry.Value[0]);
+                else
+                    values[index].push(entry.Value);
+            }
+
+            // create boxplot
+            var div = this.preparePlotDiv();
+            var boxPlot = new my.BoxplotView({ model: values, el: div });
+            this.plot = boxPlot;
+            boxPlot.render();
+        },
+        createBubblechart: function () {
+            var self = this;
+
+            // prepare data for bubble chart
+            var values = [];
+            var autoscaleBubbles = this.bubbleSelect.val() != 'Constant';
+            for (var i = 0; i < this.model.models.length; i++) {
+                var xValue = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
+                var yValue = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.yAxis });
+                if (!xValue || !yValue)
+                    continue;
+
+                // determine size
+                var size = 0;
+                if (this.bubbleSelect.val() == 'Constant') {
+                    size = this.options.bubbleSize;
+                } else {
+                    var valueProvider = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.bubbleSelect.val(); });
+                    if (!valueProvider) {
+                        size = this.options.bubbleSize;
+                    } else {
+                        var value = valueProvider.Value;
+                        while ($.isArray(value)) {
+                            value = value[0];
+                        }
+                        size = parseInt(value.replace(/,/, '.'));
+                        if (isNaN(size))
+                            size = this.options.bubbleSize;
+                    }
+                }
+
+                // add element
+                var xFloat = parseFloat(xValue.Value.replace(/,/, '.'));
+                var yFloat = parseFloat(yValue.Value.replace(/,/, '.'));
+
+                values.push([xFloat, yFloat, size, 'Run' + (i + 1)]);
+            }
+
+            // render bubble chart
+            var div = this.preparePlotDiv();
+            var bubblePlot = new my.BubbleplotView({ model: values, el: div, autoscale: autoscaleBubbles });
+            this.plot = bubblePlot;
+            bubblePlot.render();
+        },
+        createDatatable: function () {
+            if (!this.options.selectedDatatable)
+                return;
+            var self = this;
+
+            // prepare data for datatable
+            var values = [];
+            var rowNames = [];
+            for (var i = 0; i < this.model.models.length; i++) {
+                var table = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.selectedDatatable });
+                if (!table)
+                    continue;
+                var index = table.RowNames.indexOf(this.options.datatableRow);
+                if (index == -1)
+                    continue;
+                var entries = [];
+                for (var j = 0; j < table.Value.length; j++) {
+                    entries.push(table.Value[j][index]);
+                }
+                values.push(entries);
+                rowNames.push(this.options.datatableRow + ' of Run Number ' + (i + 1));
+            }
+
+            // render datatable
+            var div = this.preparePlotDiv();
+            var plot = new my.PlotView({ model: values, el: div, rownames: rowNames });
+            this.plot = plot;
+            plot.render();
+        }
+    });
+
+    // ===================== Plots =============================
+
+    my.PlotView = Backbone.View.extend({
+        render: function () {
+            this.$el.empty();
+            var plotLabels = undefined;
+            var labelSource = this.model.RowNames ? this.model.RowNames : this.options.rownames;
+            if (labelSource) {
+                plotLabels = [];
+                for (var i = 0; i < labelSource.length; i++) {
+                    plotLabels.push({ label: labelSource[i] });
+                }
+            }
+
+            var values = this.model.Value ? this.model.Value : this.model;
+
+            var plotValues = [];
+
+            if (!this.options.transpose) {
+                if ($.isArray(values[0])) {
+                    for (var i = 0; i < values.length; i++) {
+                        plotValues.push(values[i]);
+                    }
+                } else {
+                    plotValues.push(values);
+                }
+            }
+            else {
+                if ($.isArray(values[0])) {
+                    var columnCount = values[0].length;
+                    var colVals = {};
+                    for (var i = 0; i < columnCount; i++)
+                        colVals[i] = [];
+
+                    for (var i = 0; i < values.length; i++) {
+                        for (var j = 0; j < columnCount; j++) {
+                            colVals[j].push(values[i][j]);
+                        }
+                    }
+
+                    for (var i = 0; i < columnCount; i++) {
+                        plotValues.push(colVals[i]);
+                    }
+                } else {
+                    plotValues.push(values);
+                }
+            }
+
+            if (!this.$el.attr('id')) {
+                this.$el.attr('id', my.PlotView.nextId());
+            }
+
+            if (!this.$el.css('width'))
+                this.$el.css('width', '500px');
+
+            this.plot = $.jqplot(this.$el.attr('id'), plotValues, {
+                cursor: {
+                    show: true,
+                    zoom: true,
+                    showTooltip: false
+                },
+                series: plotLabels,
+                seriesDefaults: {
+                    lineWidth: 1.5,
+                    markerOptions: {
+                        size: 2,
+                        lineWidth: 2
+                    }
+                },
+                legend: {
+                    show: true,
+                    placement: 'outsideGrid'
+                },
+                highlighter: {
+                    show: true,
+                    sizeAdjust: 7.5
+                }
+            });
+        },
+        refresh: function () {
+            if (this.plot)
+                this.plot.replot({ resetAxes: true });
+        }
+    },
+  {
+      plotId: 1,
+      nextId: function () {
+          return my.PlotView.plotId++;
+      }
+  });
+
+    my.BubbleplotView = Backbone.View.extend({
+        render: function () {
+            this.$el.empty();
+
+            var values = this.model && this.model.Value ? this.model.Value : this.model;
+
+            var plotValues = [];
+
+
+            if (!this.$el.attr('id')) {
+                this.$el.attr('id', my.PlotView.nextId());
+            }
+
+            if (!this.$el.css('width'))
+                this.$el.css('width', '500px');
+
+            this.plot = $.jqplot(this.$el.attr('id'), [values], {
+                cursor: {
+                    show: true,
+                    zoom: true,
+                    showTooltip: false
+                },
+                seriesDefaults: { renderer: $.jqplot.BubbleRenderer,
+                    rendererOptions: {
+                        autoscaleBubbles: this.options.autoscale == true,
+                        bubbleGradients: true
+                    },
+                    shadow: true
+                }
+            });
+        },
+        refresh: function () {
+            if (this.plot)
+                this.plot.replot({ resetAxes: true });
+        }
+    });
+
+    my.BoxplotView = Backbone.View.extend({
+        render: function () {
+            this.$el.empty();
+            var plotLabels = undefined;
+            if (this.model && this.model.RowNames) {
+                plotLabels = [];
+                for (var i = 0; i < this.model.RowNames.length; i++) {
+                    plotLabels.push({ label: this.model.RowNames[i] });
+                }
+            }
+
+            var values = this.model && this.model.Value ? this.model.Value : this.model;
+            var globalMin = Number.MAX_VALUE;
+            var globalMax = Number.MIN_VALUE;
+
+            var plotValues = [];
+
+            for (var key in values) {
+                var entry = values[key];
+                if ($.isArray(entry[0])) {
+                    for (var i = 0; i < entry.length; i++) {
+                        var cnt = entry[i].length;
+                        var mean = _.mean(entry[i]);
+                        var median = _.median(entry[i]);
+                        var min = _.min(entry[i]);
+                        var max = _.max(entry[i]);
+                        var sorted = _.sortBy(entry[i], function (num) { return num; });
+                        var q1 = percentile(25, sorted);
+                        var q3 = percentile(75, sorted);
+                        var diff = 1.5 * (q3 - q1);
+
+                        plotValues.push([key, min, q1, median, q3, max]);
+                        //plotValues.push(["Sample " + i, percentile(15, sorted), q1, median, q3, percentile(85, sorted)]);
+                        if (max > globalMax) globalMax = max;
+                        if (min < globalMin) globalMin = min;
+                    }
+                } else {
+                    var cnt = entry.length;
+                    var mean = _.mean(entry);
+                    var median = _.median(entry);
+                    var min = _.min(entry);
+                    var max = _.max(entry);
+                    var sorted = _.sortBy(entry, function (num) { return num; });
+                    var q1 = percentile(25, sorted);
+                    var q3 = percentile(75, sorted);
+                    plotValues.push([key, min, q1, median, q3, max]);
+                    if (max > globalMax) globalMax = max;
+                    if (min < globalMin) globalMin = min;
+                }
+            }
+
+
+
+            if (!this.$el.attr('id')) {
+                this.$el.attr('id', my.PlotView.nextId());
+            }
+
+            if (!this.$el.css('width'))
+                this.$el.css('width', '500px');
+
+            this.plot = $.jqplot(this.$el.attr('id'), [plotValues], {
+                cursor: {
+                    show: true,
+                    zoom: true,
+                    showTooltip: false
+                },
+                series: [{ renderer: $.jqplot.BoxplotRenderer, rendererOptions: {}}],
+                axesDefaults: {},
+                axes: {
+                    yaxis: {
+                        min: globalMin * 0.9,
+                        max: globalMax * 1.1
+                    },
+                    xaxis: {
+                        renderer: $.jqplot.CategoryAxisRenderer
+                    }
+                },
+                legend: {
+                    show: true,
+                    placement: 'outsideGrid'
+                },
+                highlighter: {
+                    show: true,
+                    sizeAdjust: 7.5
+                }
+            });
+        },
+        refresh: function () {
+            if (this.plot)
+                this.plot.replot({ resetAxes: true });
+        }
+    });
     return my;
 } (OAAS_VIEW || {}, Backbone, _, $, OAAS_MODEL));

branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/job.view.js

@@ -83 +83 @@
     my.ResultView = Backbone.View.extend({
         render: function () {
-            this.template = _.template($('#runTemplate').html());
-            this.$el.empty();
+            this.$el.empty();
+            var div = $('<h3/>').text('Compare with charts').appendTo(this.$el);
+            var div = $('<div/>').appendTo(this.$el);
+            var rcv = new my.RunCollectionView({model: this.model, el: div});
+            rcv.render();
             for (var i = 0; i < this.model.models.length; i++) {
                 var rev = new my.ResultEntryView({ model: this.model.models[i], el: this.$el });
@@ -157 +160 @@
                 var row = $('<tr/>').attr('data-index', i);
                 $('<td/>').text(results[i].Name).appendTo(row);
-                //TODO: Switch Value type and create different items here
                 if ($.isArray(results[i].Value)) {
                     var col = $('<td/>').appendTo(row);
                     var tevDiv = $('<div/>');
-                    // TODO: REMOVE TABLEEDITVIEW and create it only on demand!!!
-                    // var tev = new my.TableEditView({ model: results[i].Value, el: tevDiv, useDatatable: true });
-                    // tev.render();
-                    var plotDiv = $('<div/>').appendTo($('#tmp'));
-                    //var pv = new PlotView({model: results[i], el: plotDiv});
-                    //pv.render();
+                    var plotDiv = $('<div/>').appendTo($('#tmp'));;
                     this.plotted[i] = {};
                     var tv = new my.TabView({
@@ -190 +187 @@
                 this.plotted[index].Plot = true;
                 var plotDiv = $('<div/>').appendTo($('#tmp'));
-                var pv = new my.PlotView({ model: this.model.get('results')[index], el: plotDiv });
+                var pv = new my.PlotView({ model: this.model.get('results')[index], el: plotDiv, transpose: true });
                 pv.render();
                 plotDiv.appendTo(evt.element);

branches/OaaS/HeuristicLab.Services.Optimization.Web/HeuristicLab.Services.Optimization.Web.csproj

@@ -292 +292 @@
     <Content Include="Content\ui-lightness\jquery-ui-1.9.2.css" />
     <Content Include="Content\ui-lightness\jquery-ui-1.9.2.min.css" />
+    <Content Include="Content\backbone\underscoreAddon.js" />
     <Content Include="Global.asax" />
     <Content Include="ControllerService.svc" />

branches/OaaS/HeuristicLab.Services.Optimization.Web/Views/Job/Index.cshtml

@@ -74 +74 @@
 </script>
 
+<script type="text/template" id="runcollection_template">
+<div>
+  <span>Plot: 
+    <select class="plotType">  
+      <option>Boxplot</option>
+      <option>Bubblechart</option>
+      <option>Datatable</option>
+    </select>
+  </span>
+  <span class="choice">
+    <span>X: <select class="x"></select></span>
+    <span>Y: <select class="y"></select></span>
+  </span>
+  
+  <span class="bubble">
+    Bubble Size: <select class="bubbleSize"><option>Constant</option></select> <div class="bubbleSlider"></div>
+  </span>
+
+  <span class="datatable">
+    DataTable: <select class="datatableOptions"></select>
+    DataRow: <select class="datatableRow"></select>    
+  </span>
+  <div class="resizer" style="width: 600px">
+    <div class="plot" id="tmp">          
+    </div>  
+  </div>
+</div>
+</script>
+
 
 <script type='text/javascript'>

branches/OaaS/HeuristicLab.Services.Optimization.Web/Views/Shared/_Layout.cshtml

@@ -25 +25 @@
     <script type="text/javascript" src="@Url.Content("~/Content/jqplot/src/plugins/jqplot.pieRenderer.js")"></script>
     <script type="text/javascript" src="@Url.Content("~/Content/jqplot/src/plugins/jqplot.donutRenderer.js")"></script>
+    <script type="text/javascript" src="@Url.Content("~/Content/jqplot/src/plugins/jqplot.bubbleRenderer.js")"></script>
+    <script type="text/javascript" src="@Url.Content("~/Content/jqplot/src/plugins/jqplot.boxplotRenderer.js")"></script>
     <script type="text/javascript" src="@Url.Content("~/Content/jqplot/src/plugins/jqplot.cursor.js")"></script>
 
@@ -37 +39 @@
 
     <script type='text/javascript' src='@Url.Content("~/Content/backbone/underscore.js")'></script>
+    <script type='text/javascript' src='@Url.Content("~/Content/backbone/underscoreAddon.js")'></script>
     <script type='text/javascript' src='@Url.Content("~/Content/backbone/backbone-min.js")'></script>
     <script type='text/javascript' src='@Url.Content("~/Content/backbone/backbone-relational.js")'></script>