First aproximation

author: Frank Wuerthwein <fkw@ucsd.edu> 2009-02-09 15:19:30 +0000
committer: Frank Wuerthwein <fkw@ucsd.edu> 2009-02-09 15:19:30 +0000
commit: bbdc394b87d534470d404b3846356e5f1be89184 (patch)
tree: 14353cb474e37cbc64b33c9c6b753d670579ef0d
parent: 5be3735232201398b51f342e253427178942a365 (diff)
1 files changed, 215 insertions, 0 deletions
diff --git a/src/examples/rrdJFlot.html b/src/examples/rrdJFlot.html
new file mode 100644
index 0000000..36404c3
--- /dev/null
+++ b/src/examples/rrdJFlot.html
@@ -0,0 +1,215 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!--
+ Example HTML/javascript file that display the
+ content of a RRD archive file in a graph
+ using the jFlot libraries
+ Part of the javascriptRRD package
+ Copyright (c) 2009 Frank Wuerthwein, fkw@ucsd.edu
+
+ Original repository: http://javascriptrrd.sourceforge.net/
+ 
+ MIT License [http://www.opensource.org/licenses/mit-license.php]
+
+-->
+
+<!--
+ This page requires jFlot.
+
+ Repository: http://code.google.com/p/flot/
+
+ For this example we load the required scripts directly from their examples page.
+ Production web pages should download their copy and serve them locally.
+ 
+-->
+
+<html>
+  
+    <script type="text/javascript" src="../lib/binaryXHR.js"></script>
+    <script type="text/javascript" src="../lib/rrdFile.js"></script>
+
+    <!-- Using jFlot example URL... never do this on production pages -->
+    <script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
+    <script type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
+  <head>
+    <title>RRD Graphs with jFlot</title>
+  </head>
+
+  <body>
+    <h1 id="title">RRD Graphs with jFlot</h1>
+
+    RRD URL:
+    <input type="text" id="input_fname" value="example1.rrd"
+           onchange="fname_update()">
+     <button onclick="fname_update()">Update</button>
+    <hr>
+     <table border=0>
+        <tr>
+	  <td>DS: <select id="select_ds"></select></td>
+	  <td>RRA: <select id="select_rra"></select></td>
+	  <td><button id="dsrra_button" onclick="element_update()" disabled=1>Update</button></td>
+	</tr>
+    </table>
+   
+    <hr>
+
+    <table id="infotable" border=1>
+        <tr><td colspan="21"><b>Javascript needed for this page to work</b></td></tr>
+	<tr><td><b>RRD file</b></td><td id="fname" colspan="5">None</td></tr>
+	<tr>
+	  <td><b>DS</b></td><td id="ds_el">None</td>
+	  <td><b>RRA</b></td><td id="rra_el">None</td>
+	  <td><b>Step</b></td><td id="step_el">N/A</td>
+	</tr>
+    </table>
+
+    <div id="placeholder" style="width:600px;height:300px;"></div>
+
+    <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
+
+    <script type="text/javascript">
+      // 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() {
+        // Update DS info
+        var nrDSs=rrd_data.getNrDSs()
+
+        // But first cleanup anything that may be there from before
+        document.getElementById("ds_el").firstChild.data="None";
+        var oSelect=document.getElementById("select_ds");
+        while (oSelect.options.length>=1) {
+          oSelect.remove(0);
+        }         
+
+        for (var i=0; i<nrDSs; i++) {
+          var ds_name=rrd_data.getDS(i).getName();
+          oSelect.options.add(new Option(ds_name,i,false,false));
+        }
+
+        // Update RRA info
+        var nrRRAs=rrd_data.getNrRRAs()
+
+        // But first cleanup anything that may be there from before
+        document.getElementById("step_el").firstChild.data="N/A";
+        document.getElementById("rra_el").firstChild.data="None";
+        var oSelect=document.getElementById("select_rra");
+        while (oSelect.options.length>=1) {
+          oSelect.remove(0);
+        }         
+
+        for (var i=0; i<nrRRAs; i++) {
+          oSelect.options.add(new Option(i,i,false,false));
+        }
+
+        // cleanup
+        $.plot($("#placeholder"), [[]],{});
+        $.plot($("#overview"),[[]],{});
+
+        // Finally, update the file name and enable the update button
+        document.getElementById("fname").firstChild.data=fname;
+        document.getElementById("dsrra_button").disabled=0;
+      }
+
+      // This function updates the Web Page with the data from the RRD archive
+      function element_update() {
+        oSelDS=document.getElementById("select_ds");
+        ds_idx=oSelDS.options[oSelDS.selectedIndex].value;
+        oSelRRA=document.getElementById("select_rra");
+        rra_idx=oSelRRA.options[oSelRRA.selectedIndex].value;
+
+        // Generic header info
+        document.getElementById("ds_el").firstChild.data=rrd_data.getDS(ds_idx).getName();;
+        document.getElementById("rra_el").firstChild.data=rra_idx;
+
+        // get RRA info
+        var rra=rrd_data.getRRA(rra_idx);
+        var rows=rra.getNrRows();
+        var last_update=rrd_data.getLastUpdate();
+        var step=rra.getStep();
+        document.getElementById("step_el").firstChild.data=step;
+
+        var rra_pairs=[]
+
+        for (var i=0; i<rows;i++) {
+          var el=rra.getElFast(i,ds_idx);
+          if (el!=undefined) {
+            rra_pairs[i]=([(last_update+(i-rows+1)*step)*1000.0,el]);
+          } else {
+            rra_pairs[i]=null;
+          }
+        }
+
+        // Plot
+        var options = {
+            lines: { show: true },
+            xaxis: { mode: "time" },
+            selection: { mode: "x" },
+        };
+    
+        var plot = $.plot($("#placeholder"), [rra_pairs], options);
+    
+        var overview = $.plot($("#overview"), [rra_pairs], options);
+
+         // now connect the two
+    
+         $("#placeholder").bind("plotselected", function (event, ranges) {
+            // do the zooming
+            plot = $.plot($("#placeholder"), [rra_pairs],
+                          $.extend(true, {}, options, {
+                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
+                          }));
+
+           // don't fire event on the overview to prevent eternal loop
+           overview.setSelection(ranges, true);
+         });
+    
+         $("#overview").bind("plotselected", function (event, ranges) {
+             plot.setSelection(ranges);
+         });
+      }      
+
+      // 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;
+          try {
+            var i_rrd_data=new RRDFile(bf);            
+          } catch(err) {
+            alert("File "+fname+" is not a valid RRD archive!");
+          }
+          if (i_rrd_data!=undefined) {
+            rrd_data=i_rrd_data;
+            update_fname()
+          }
+      }
+
+      // 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);
+        }
+      }
+
+      // Uncomment this part if you want the Web page to load the
+      // default RRD file at load time
+      //
+      //try {
+      //  FetchBinaryURLAsync(fname,update_fname_handler);
+      //} catch (err) {
+      //  alert("Failed loading "+fname+"\n"+err);
+      //}
+      
+    </script>
+  </body>
+</html>
author	Frank Wuerthwein <fkw@ucsd.edu>	2009-02-09 15:19:30 +0000
committer	Frank Wuerthwein <fkw@ucsd.edu>	2009-02-09 15:19:30 +0000
commit	bbdc394b87d534470d404b3846356e5f1be89184 (patch)
tree	14353cb474e37cbc64b33c9c6b753d670579ef0d
parent	5be3735232201398b51f342e253427178942a365 (diff)