Use the new Async object and also use the new summary include

author: Igor Sfiligoi <isfiligoi@ucsd.edu> 2013-11-07 00:38:01 +0000
committer: Igor Sfiligoi <isfiligoi@ucsd.edu> 2013-11-07 00:38:01 +0000
commit: 1e648f2141f5ced38e5a7c53dbf8b280e1e1d870 (patch)
tree: 34a49010c35f8fc963c7396949cc70d6340951c9 /src
parent: 8c6ab888ec32bcbda35c1ba87470563a4d547008 (diff)
2 files changed, 43 insertions, 146 deletions
diff --git a/src/examples/rrdJFlotFilter.html b/src/examples/rrdJFlotFilter.html
index 9d05aa1..61820ff 100644
--- a/src/examples/rrdJFlotFilter.html
+++ b/src/examples/rrdJFlotFilter.html
@@ -25,18 +25,8 @@
 
 <html>
   
-    <script type="text/javascript" src="../lib/binaryXHR.js"></script>
-    <script type="text/javascript" src="../lib/rrdFile.js"></script>
-
-    <!-- rrdFlot class needs the following four include files !-->
-    <script type="text/javascript" src="../lib/rrdFlotSupport.js"></script>
-    <script type="text/javascript" src="../lib/rrdFlot.js"></script>
-    <script type="text/javascript" src="../lib/rrdFile.js"></script>
-    <script type="text/javascript" src="../lib/rrdFilter.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.selection.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.tooltip.js"></script>
+    <script type="text/javascript" src="../lib/javascriptrrd.wlibs.js"></script>
+    <!-- the above script replaces the rrdfFlotAsync,rrdFlot, rrdFlotSelection, rrdFile, rrdFilter, binaryXHR and all the jquery libraries -->
   <head>
     <title>RRD Graphs with Flot</title>
   </head>
@@ -62,31 +52,6 @@
       // Remove the Javascript warning
       document.getElementById("infotable").deleteRow(0);
 
-      // fname and rrd_data are the global variable used by all the functions below
-      fname=document.getElementById("input_fname").value;
-      rrd_data=undefined;
-
-      // This function updates the Web Page with the data from the RRD archive header
-      // when a new file is selected
-      function update_fname() {
-        // Finally, update the file name and enable the update button
-        document.getElementById("fname").firstChild.data=fname;
-
-        var graph_opts={legend: { noColumns:4}};
-        var ds_graph_opts={'Oscilator':{ color: "#ff8000", 
-                                         lines: { show: true, fill: true, fillColor:"#ffff80"} },
-                           'Idle':{ label: 'IdleJobs', color: "#00c0c0", 
-                                    lines: { show: true, fill: true} },
-                           'Running':{color: "#000000",yaxis:2}};
-
-        
-        // the rrdFlot object creates and handles the graph
-        var f=new rrdFlot("mygraph",rrd_data,graph_opts,ds_graph_opts);
-      }
-
-      // Next three functions are for use in RRDFilterOp, 
-      // which requires a list of functions, one for each DS 
-
       //Sum two DSs
       function SumDS(ds1,ds2) {
         this.getName = function() {return ds1+"+"+ds2;}
@@ -114,58 +79,43 @@
         }
       }
 
-      // This is the callback function that,
-      // given a binary file object,
-      // verifies that it is a valid RRD archive
-      // and performs the update of the Web page
-      function update_fname_handler(bf) {
-          var i_rrd_data=undefined;
-          if (bf.getLength()<1) {
-            alert("File "+fname+" is empty (possibly loading failed)!");
-            return 1;
-          }
-          try {
-            var i_rrd_data=new RRDFile(bf);            
-          } catch(err) {
-            alert("File "+fname+" is not a valid RRD archive!\n"+err);
-          }
-
-          if (i_rrd_data!=undefined) {
-            rrd_data=i_rrd_data;
-          
-            //If only one DS, cannot sum anything 
-             if (rrd_data.getNrDSs()<2) {
-               alert("Not enough elements ("+rrd_data.getNrDSs()+") in RRD to sum!");
-             }
-            
-             
+      // this function is called after the data is loaded
+      //  but before the graph is displayed
+      function mycallback(obj) {
              var op_list = []; //list of operations
              var DS_list = []; //list of DSs to sum in MultiSumDS
              var i = 0;
  
              //create a new rrdlist, which contains almost all original elements
              //    plus additional operated-on DSs from RRDFilterOp 
-             for (i=0;i<rrd_data.getNrDSs();i++) {
+             for (i=0;i<obj.rrd_data.getNrDSs();i++) {
 	        if (i!=1) op_list.push(i);
-                DS_list.push(rrd_data.getDS(i))
+                DS_list.push(obj.rrd_data.getDS(i))
              }
              op_list.push(new MultiSumDS(DS_list));
-             op_list.push(new SumDS(rrd_data.getDS(0).getName(),rrd_data.getDS(1).getName()));
-
-             rrd_data = new RRDFilterOp(rrd_data,op_list);
+             op_list.push(new SumDS(obj.rrd_data.getDS(0).getName(),obj.rrd_data.getDS(1).getName()));
 
-             update_fname()
-          }
+             //we just customized the DS shown by the graph
+             obj.ds_op_list=op_list;
       }
 
+      var graph_opts={legend: { noColumns:4}};
+      var ds_graph_opts={'Oscilator':{ color: "#ff8000", 
+                                       lines: { show: true, fill: true, fillColor:"#ffff80"} },
+                         'Idle':{ label: 'IdleJobs', color: "#00c0c0", 
+                                  lines: { show: true, fill: true} },
+                         'Running':{color: "#000000",yaxis:2}};
+
+        
+      // we don't know what DSs we will get, so we have to use the callback
+      // in principle, we could personalize ds_graph_opts in the callback as well, but we keep it simple here
+      flot_obj=new rrdFlotAsync("mygraph",null,graph_opts,ds_graph_opts,null,null,null,mycallback);
+
       // this function is invoked when the RRD file name changes
       function fname_update() {
-        fname=document.getElementById("input_fname").value;
-        try {
-          FetchBinaryURLAsync(fname,update_fname_handler);
-        } catch (err) {
-           alert("Failed loading "+fname+"\n"+err);
-        }
+        var fname=document.getElementById("input_fname").value;
+        flot_obj.reload(fname);
+        document.getElementById("fname").firstChild.data=fname;
       }
 
     </script>
diff --git a/src/examples/rrdJFlotFilterRRA.html b/src/examples/rrdJFlotFilterRRA.html
index 783c943..afa0bb3 100644
--- a/src/examples/rrdJFlotFilterRRA.html
+++ b/src/examples/rrdJFlotFilterRRA.html
@@ -25,18 +25,8 @@
 
 <html>
   
-    <script type="text/javascript" src="../lib/binaryXHR.js"></script>
-    <script type="text/javascript" src="../lib/rrdFile.js"></script>
-
-    <!-- rrdFlot class needs the following four include files !-->
-    <script type="text/javascript" src="../lib/rrdFlotSupport.js"></script>
-    <script type="text/javascript" src="../lib/rrdFlot.js"></script>
-    <script type="text/javascript" src="../lib/rrdFile.js"></script>
-    <script type="text/javascript" src="../lib/rrdFilter.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.selection.js"></script>
-    <script type="text/javascript" src="../../flot/jquery.flot.tooltip.js"></script>
+    <script type="text/javascript" src="../lib/javascriptrrd.wlibs.js"></script>
+    <!-- the above script replaces the rrdfFlotAsync,rrdFlot, rrdFlotSelection, rrdFile, rrdFilter, binaryXHR and all the jquery libraries -->
   <head>
     <title>RRD Graphs with Flot</title>
   </head>
@@ -63,70 +53,27 @@
       // Remove the Javascript warning
       document.getElementById("infotable").deleteRow(0);
 
-      // fname and rrd_data are the global variable used by all the functions below
-      fname=document.getElementById("input_fname").value;
-      rrd_data=undefined;
+      var graph_opts={legend: { noColumns:4}};
+      var ds_graph_opts={'Oscilator':{ color: "#ff8000", 
+				       lines: { show: true, fill: true, fillColor:"#ffff80"} },
+			 'Idle':{ label: 'IdleJobs', color: "#00c0c0", 
+				  lines: { show: true, fill: true} },
+			 'Running':{color: "#000000",yaxis:2}};
 
-      // This function updates the Web Page with the data from the RRD archive header
-      // when a new file is selected
-      function update_fname() {
-        // Finally, update the file name and enable the update button
-        document.getElementById("fname").firstChild.data=fname;
-
-        var graph_opts={legend: { noColumns:4}};
-        var ds_graph_opts={'Oscilator':{ color: "#ff8000", 
-                                         lines: { show: true, fill: true, fillColor:"#ffff80"} },
-                           'Idle':{ label: 'IdleJobs', color: "#00c0c0", 
-                                    lines: { show: true, fill: true} },
-                           'Running':{color: "#000000",yaxis:2}};
-
-        
-        // the rrdFlot object creates and handles the graph
-        var f=new rrdFlot("mygraph",rrd_data,graph_opts,ds_graph_opts);
-      }
+      //Add RRA filters for longer averaged-out RRAs
+      //This pages was made to run example3.rra, with RRA steps of 
+      //5 mins (300 seconds), 45 mins (2700s) and 8 hours (28800s).
+      var rra_steps_list = [0, [0,1800],  // org(5mins), 30mins
+			    1, [1,21600], // org(45mins), 6h
+			    2, [2,86400], [2,259200], [2,604800]]; // org(8h), 24h, 3d, 1w
 
-      // This is the callback function that,
-      // given a binary file object,
-      // verifies that it is a valid RRD archive
-      // and performs the update of the Web page
-      function update_fname_handler(bf) {
-          var i_rrd_data=undefined;
-          if (bf.getLength()<1) {
-            alert("File "+fname+" is empty (possibly loading failed)!");
-            return 1;
-          }
-          try {
-            var i_rrd_data=new RRDFile(bf);            
-          } catch(err) {
-            alert("File "+fname+" is not a valid RRD archive!\n"+err);
-          }
-
-          if (i_rrd_data!=undefined) {
-            rrd_data=i_rrd_data;
-          
-            //Add RRA filters for longer averaged-out RRAs
-            //This pages was made to run example3.rra, with RRA steps of 
-            //5 mins (300 seconds), 45 mins (2700s) and 8 hours (28800s).
-
-            var rra_steps_list = [0, [0,1800],  // org(5mins), 30mins
-                                  1, [1,21600], // org(45mins), 6h
-                                  2, [2,86400], [2,259200], [2,604800]]; // org(8h), 24h, 3d, 1w
-
-            //Now, we apply those averaging filters.  
-            rrd_data = new RRDRRAFilterAvg(rrd_data,rra_steps_list);
-
-            update_fname()
-          }
-      }
+      flot_obj=new rrdFlotAsync("mygraph",null,graph_opts,ds_graph_opts,null,null,rra_steps_list);
 
       // this function is invoked when the RRD file name changes
       function fname_update() {
-        fname=document.getElementById("input_fname").value;
-        try {
-          FetchBinaryURLAsync(fname,update_fname_handler);
-        } catch (err) {
-           alert("Failed loading "+fname+"\n"+err);
-        }
+        var fname=document.getElementById("input_fname").value;
+        flot_obj.reload(fname);
+        document.getElementById("fname").firstChild.data=fname;
       }
 
     </script>
author	Igor Sfiligoi <isfiligoi@ucsd.edu>	2013-11-07 00:38:01 +0000
committer	Igor Sfiligoi <isfiligoi@ucsd.edu>	2013-11-07 00:38:01 +0000
commit	1e648f2141f5ced38e5a7c53dbf8b280e1e1d870 (patch)
tree	34a49010c35f8fc963c7396949cc70d6340951c9 /src
parent	8c6ab888ec32bcbda35c1ba87470563a4d547008 (diff)