From f1844830498d1972e7989b8b603d20d0f7b1378a Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@aziz>
Date: Sun, 18 Apr 2010 11:00:59 +0100
Subject: Clickable legend labels to show hide series

---
 index.html | 12 ++++++++++-
 jrrd.js    | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 76 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index b3aff2e..ce63313 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
-        <title>untitled</title>
+        <title>RRD Charts</title>
         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <style type="text/css">
         body {
@@ -33,6 +33,16 @@
             width:50px;
             overflow:hidden;
         }
+
+        .legendColorBox, .legendLabel {
+            cursor: pointer;
+        }
+
+        input[type=checkbox] {
+            margin: 0;
+            padding: 0;
+            border: none;
+        }
         </style>
         <script type="text/javascript" src="assets/javascript/jquery-1.4.2.min.js"></script>
         <script type="text/javascript" src="assets/javascript/flot/excanvas.min.js"></script>
diff --git a/jrrd.js b/jrrd.js
index 46858f0..a3b2464 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -191,18 +191,77 @@ jrrd.RrdQueryDsProxy.prototype.getData = function(startTime, endTime) {
 
 jrrd.Chart = function(template, options) {
     this.template = template;
-    this.options = options;
+    this.options = jQuery.extend(true, {}, options);
     this.data = [];
+    var self = this;
+    $('.legend tr', this.template[0]).live('click', function(e) {
+        self.switchDataEnabled($(this).children('.legendLabel').text());
+        self.draw();
+    });
+
+    this.options['legend'] = {
+        'labelFormatter': function(label, series) {
+            return self.legendLabelFormatter(label, series);
+        }
+    };
 };
 
-jrrd.Chart.prototype.addData = function(label, db) {
-    this.data.push([label, db]);
+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.draw = function(startTime, endTime) {
+jrrd.Chart.prototype.addData = function(label, db, enabled) {
+    if(typeof enabled == 'undefined') {
+        enabled = true;
+    }
+    this.data.push([label, db, enabled]);
+};
+
+jrrd.Chart.prototype.switchDataEnabled = function(label) {
+    for(var i=0; i<this.data.length; i++) {
+        if(this.data[i][0] == label) {
+            this.data[i][2] = !this.data[i][2];
+        }
+    }
+};
+
+jrrd.Chart.prototype.setTimeRange = function(startTime, endTime) {
+    this.startTime = startTime;
+    this.endTime = endTime;
+    this.draw();
+}
+
+jrrd.Chart.prototype.draw = function() {
+    var result;
     var results = [];
     for(var i=0; i<this.data.length; i++) {
-        results.push(this.data[i][1].getData(startTime, endTime));
+        if(this.data[i][2]) {
+            result = this.data[i][1].getData(this.startTime, this.endTime);
+        } else {
+            result = new MochiKit.Async.Deferred();
+            result.callback({
+                data: [
+                    [this.startTime.getTime(), 0],
+                    [this.endTime.getTime(), 0]
+                ],
+                lines: {
+                    lineWidth: 0
+                }
+            });
+        }
+
+        results.push(result);
     }
 
     return MochiKit.Async.gatherResults(results)
@@ -277,7 +336,7 @@ jrrd.ChartCoordinator.prototype.update = function() {
     };
     this.rangePreview.setSelection(ranges, true);
     for(var i=0; i<this.charts.length; i++){
-        this.charts[i].draw(startTime, endTime);
+        this.charts[i].setTimeRange(startTime, endTime);
     }
 };
 
-- 
cgit v1.2.3

