Use rrdFlot library, remove all low level code

1 files changed, 6 insertions, 97 deletions

diff --git a/src/examples/rrdJFlot.html b/src/examples/rrdJFlot.html
index 3ba5928..c8c91f8 100644
--- a/src/examples/rrdJFlot.html
+++ b/src/examples/rrdJFlot.html
@@ -27,6 +27,7 @@
     <script type="text/javascript" src="../lib/binaryXHR.js"></script>
     <script type="text/javascript" src="../lib/rrdFile.js"></script>
     <script type="text/javascript" src="../lib/rrdFlotSupport.js"></script>
+    <script type="text/javascript" src="../lib/rrdFlot.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>
@@ -43,31 +44,16 @@
            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>
+    <div id="mygraph"></div>
 
     <script type="text/javascript">
+
       // Remove the Javascript warning
       document.getElementById("infotable").deleteRow(0);
 
@@ -81,89 +67,12 @@
         // 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=Math.round(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 step=rra.getStep();
-        document.getElementById("step_el").firstChild.data=step;
-
-        var plot_data=rrdDS2FlotSeries(rrd_data,ds_idx,rra_idx);
-        var overview_data=rrdDS2FlotSeries(rrd_data,ds_idx,rra_idx,false);
-
-        // Plot
-        var options = {
-            lines: { show: true },
-            xaxis: { mode: "time" },
-            selection: { mode: "x" },
-        };
-    
-        var plot = $.plot($("#placeholder"), [plot_data], options);
-    
-        var overview = $.plot($("#overview"), [overview_data], options);
-
-         // now connect the two
-    
-         $("#placeholder").bind("plotselected", function (event, ranges) {
-            // do the zooming
-            plot = $.plot($("#placeholder"), [plot_data],
-                          $.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);
-         });
-      }      
+        // the rrdFlot object creates and handles the graph
+        var f=new rrdFlot("mygraph",rrd_data);
+      }
 
       // This is the callback function that,
       // given a binary file object,