Add more DNS stats and experiment with a different legend position.

2 files changed, 25 insertions, 29 deletions

diff --git a/index.html b/index.html
index f8d5299..ec111cc 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
             overflow:hidden;
         }
 
-        .legendColorBox, .legendLabel {
+        .legendLabel {
             cursor: pointer;
         }
 
@@ -92,6 +92,10 @@
                 backgroundColor: "#fff",
                 tickColor: "#eee"
             },
+            legend: {
+                position: 'nw',
+                noColumns: 2
+            },
             selection: {
                 mode: 'x'
             },
@@ -147,12 +151,22 @@
             },
 
             {
-                title: 'DNS Queries',
+                title: 'DNS Query Types',
+                data: [
+                    ['data/dns/dns_qtype-A.rrd', 0, 'A', 'Q/sec'],
+                    ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR', 'Q/sec'],
+                    ['data/dns/dns_qtype-SOA.rrd', 0, 'SOA', 'Q/sec'],
+                    ['data/dns/dns_qtype-SRV.rrd', 0, 'SRV', 'Q/sec']
+                ],
+                options: jQuery.extend(true, {}, baseOptions)
+            },
+
+            {
+                title: 'DNS Return Codes',
                 data: [
-                    ['data/dns/dns_opcode-Query.rrd', 0, 'Opcode Query', 'Q/sec'],
-                    ['data/dns/dns_qtype-A.rrd', 0, 'A Queries', 'Q/sec'],
-                    ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR Queries', 'Q/sec'],
-                    ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/sec']
+                    ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/sec'],
+                    ['data/dns/dns_rcode-NXDOMAIN.rrd', 0, 'NXDOMAIN', 'Q/sec'],
+                    ['data/dns/dns_rcode-SERVFAIL.rrd', 0, 'SERVFAIL', 'Q/sec']
                 ],
                 options: jQuery.extend(true, {}, baseOptions)
             },
@@ -211,26 +225,6 @@
         <div class="notice">
             <p>To get this demo working, you will need to serve this page from a
             local webserver and serve the folder that contains your RRD files.</p>
-            <p>This demo is designed to work with the RRD files generated by
-            <a href="http://collectd.org/">Collectd</a>.</p>
-            <h3>Debian / Ubuntu Quick Start</h3>
-            <pre>
-# Install and configure collectd (enable the rrd plugin)
-$ aptitude install collectd
-
-# Create a project folder and check out the code
-$ mkdir ~/Projects
-$ cd ~/Projects
-$ bzr branch lp:~richardw/+junk/rrd2flot
-$ cd rrd2flot
-
-# Link to the collectd rrd folder
-$ ln -s /var/lib/collectd/rrd/localhost data
-
-# Start a local webserver
-$ aptitude install twisted
-$ twistd -n web --port 8080 --path .
-            </pre>
         </div>
 
         <form method="GET" class="chartRangeControl">
diff --git a/jrrd.js b/jrrd.js
index 3f9070a..62ebce6 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -257,8 +257,8 @@ jrrd.Chart = function(template, options) {
 
     // Listen for clicks on the legend items - onclick enable / disable the
     // corresponding data source.
-    $('.legend tr', this.template[0]).live('click', function(e) {
-        self.switchDataEnabled($(this).children('.legendLabel').text());
+    $('.legend .legendLabel', this.template[0]).live('click', function(e) {
+        self.switchDataEnabled($(this).text());
         self.draw();
     });
 
@@ -402,7 +402,9 @@ jrrd.Chart.prototype.draw = function() {
                     unit = '';
                     for(i=0; i<data.length; i++) {
                         label = self.data[i][0];
-                        data[i].label = label;
+                        if(label) {
+                            data[i].label = label;
+                        }
                         if(typeof data[i].unit != 'undefined') {
                             // Just use the last unit for now
                             unit = data[i].unit;