a neater way to highlight disabled items in the legend

2 files changed, 21 insertions, 23 deletions

diff --git a/index.html b/index.html
index 3d37aa2..5a56fd8 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,8 @@
         h2 {
             width: 750px;
             padding: 0 0 0 50px;
-            margin: 10px auto 5px auto;
+            margin: 20px auto 5px auto;
+            font-size: 14px;
         }
 
         .loading {
@@ -50,6 +51,10 @@
             cursor: pointer;
         }
 
+        .legend .disabled {
+            text-decoration: line-through;
+        }
+
         input[type=checkbox] {
             margin: 0;
             padding: 0;
diff --git a/jrrd.js b/jrrd.js
index 95d078d..104eccd 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -198,27 +198,6 @@ jrrd.Chart = function(template, options) {
         self.switchDataEnabled($(this).children('.legendLabel').text());
         self.draw();
     });
-
-    this.options['legend'] = {
-        'labelFormatter': function(label, series) {
-            return self.legendLabelFormatter(label, series);
-        }
-    };
-};
-
-jrrd.Chart.prototype.legendLabelFormatter = function(label, series) {
-    for(var i=0; i<this.data.length; i++) {
-        if(this.data[i][0] == label) {
-            if(!this.data[i][2]) {
-                return ['<span style="text-decoration: line-through;">',
-                        label,
-                        '</span>'].join('');
-            } else {
-                return label;
-            }
-        }
-    }
-    return 'unknown: ' + label;
 };
 
 jrrd.Chart.prototype.addData = function(label, db, enabled) {
@@ -272,10 +251,24 @@ jrrd.Chart.prototype.draw = function() {
     return MochiKit.Async.gatherResults(results)
             .addCallback(
                 function(self, data) {
-                    for(var i=0; i<data.length; i++) {
+                    var i, disabled = [];
+                    for(i=0; i<data.length; i++) {
                         data[i].label = self.data[i][0];
+                        if(!self.data[i][2]) {
+                            disabled.push(self.data[i][0]);
+                        }
                     }
                     var plot = $.plot(self.template, data, self.options);
+
+                    // Highlight any disabled data sources in the legend
+                    self.template.find('.legendLabel').each(
+                        function(i, el) {
+                            var labelCell = $(el);
+                            if( $.inArray(labelCell.text(), disabled) > -1 ) {
+                                labelCell.addClass('disabled');
+                            }
+                        }
+                    );
                 }, this)
             .addErrback(
                 function(self, failure) {