diff options
| -rw-r--r-- | src/examples/rrdJFlot.html | 103 |
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, |