diff options
Diffstat (limited to 'src/examples')
| -rw-r--r-- | src/examples/rrdJFlot.html | 215 |
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> |