A chart class with multiple RRD data sources and an example of stacked chart

2 files changed, 68 insertions, 32 deletions

diff --git a/index.html b/index.html
index 48bd6a1..e209be2 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
         <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>
         <script type="text/javascript" src="assets/javascript/flot/jquery.flot.min.js"></script>
+        <script type="text/javascript" src="assets/javascript/flot/jquery.flot.stack.min.js"></script>
         <script type="text/javascript" src="assets/javascript/flot/jquery.flot.selection.min.js"></script>
         <script type="text/javascript" src="assets/javascript/javascriptrrd/binaryXHR.js"></script>
         <script type="text/javascript" src="assets/javascript/javascriptrrd/rrdFile.js"></script>
@@ -23,10 +24,12 @@
                 mode: 'x'
             },
             series: {
+                stack: true,
                 points: { show: false },
                 lines: {
                     show: true,
                     steps: false,
+                    fill: 0.1,
                     shadowSize: 0,
                     lineWidth: 1
                 },
@@ -37,36 +40,66 @@
             }
         };
 
-        function drawChart(db, startTime, endTime) {
-            return db.getData(startTime, endTime)
-                .addCallback(
-                    function(data) {
-                        var plot = $.plot($('.container'), data, graphOptions);
-                    })
-                .addErrback(
-                    function(failure) {
-                        $('.container').text('error: ' + failure.message);
-                    });
-        }
-
-        var db = new jrrd.RrdQueryRemote('data/localhost/load/load.rrd');
+        var Chart = function(template) {
+            var self = this;
 
-        $(function() {
-            drawChart(db, new Date('7 April 2010 09:30:00'),
-                          new Date('7 April 2010 15:00:00'));
+            this.template = template;
+            this.data = [];
 
-            $('.container').bind('plotclick', function(event, pos, item) {
+            this.template.bind('plotclick', function(event, pos, item) {
                 if (item) {
-                    console.log(['X: ' + new Date(item.datapoint[0]), 'Y: ' + item.datapoint[1]]);
+                    console.log(['X: ' + new Date(item.datapoint[0]),
+                                 'Y: ' + item.datapoint[1]]);
                 }
             });
 
-            $('.container').bind("plotselected", function(event, ranges) {
+            this.template.bind("plotselected", function(event, ranges) {
                 var startTime = new Date(ranges.xaxis.from);
                 var endTime = new Date(ranges.xaxis.to);
-                drawChart(db, startTime, endTime);
+                self.draw(startTime, endTime);
                 console.log("You selected " + startTime + " to " + endTime);
             });
+        };
+
+        Chart.prototype.addData = function(label, db) {
+            this.data.push([label, db]);
+        };
+
+        Chart.prototype.draw = function(startTime, endTime) {
+            var self = this;
+
+            var results = [];
+            for(var i=0; i<this.data.length; i++) {
+                results.push(this.data[i][1].getData(startTime, endTime));
+            }
+
+            return MochiKit.Async.gatherResults(results)
+                   .addCallback(
+                    function(data) {
+                        for(var i=0; i<data.length; i++) {
+                            data[i].label = self.data[i][0];
+                        }
+                        var plot = $.plot(self.template, data, graphOptions);
+                    })
+                   .addErrback(
+                    function(failure) {
+                        $('.container').text('error: ' + failure.message);
+                    });
+        };
+
+        $(function() {
+            var c = new Chart($('.container'));
+            //data = 'memory-buffered.rrd memory-cached.rrd memory-free.rrd memory-used.rrd'.split(' ');
+            data = 'cpu-user.rrd  cpu-system.rrd  cpu-wait.rrd'.split('  ').reverse();
+
+            jQuery.each(data, function(i, el) {
+                var url = 'data/localhost/cpu-0/' + el;
+                var label = el.split('.')[0].split('-')[1];
+                c.addData(label, new jrrd.RrdQueryRemote(url));
+            });
+
+            c.draw(new Date('7 April 2010 09:30:00'),
+                   new Date('7 April 2010 15:00:00'));
         });
         </script>
     </head>
diff --git a/jrrd.js b/jrrd.js
index f811223..44fdb95 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -43,10 +43,15 @@ jrrd.RrdQuery = function(rrd) {
     this.rrd = rrd;
 };
 
-jrrd.RrdQuery.prototype.getData = function(startTime, endTime) {
+jrrd.RrdQuery.prototype.getData = function(startTime, endTime, dsId) {
     var startTimestamp = startTime.getTime()/1000;
     var endTimestamp = endTime.getTime()/1000;
 
+    if(dsId == null) {
+        dsId = 0;
+    }
+    var ds = this.rrd.getDS(dsId);
+
     var consolidationFunc = 'AVERAGE';
     var lastUpdated = this.rrd.getLastUpdate();
 
@@ -74,18 +79,16 @@ jrrd.RrdQuery.prototype.getData = function(startTime, endTime) {
 
     startRow = rraRowCount - parseInt((lastUpdated - startTimestamp)/step);
     endRow = rraRowCount - parseInt((lastUpdated - endTimestamp)/step);
-    returnData = [];
-    for(var d=this.rrd.getNrDSs()-1; d>=0; d--) {
-        flotData = [];
-        timestamp = firstUpdated + (startRow - 1) * step;
-        for (var i=startRow; i<=endRow; i++) {
-            var val = bestRRA.getEl(i, d);
-            flotData.push([timestamp*1000.0, val]);
-            timestamp += step;
-        }
-        returnData.push({label: this.rrd.getDS(d).getName(), data: flotData});
+
+    flotData = [];
+    timestamp = firstUpdated + (startRow - 1) * step;
+    dsIndex = ds.getIdx();
+    for (var i=startRow; i<=endRow; i++) {
+        var val = bestRRA.getEl(i, dsIndex);
+        flotData.push([timestamp*1000.0, val]);
+        timestamp += step;
     }
-    return returnData;
+    return {label: ds.getName(), data: flotData};
 };