diff options
| author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-06 19:01:12 +0000 |
|---|---|---|
| committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-06 19:01:12 +0000 |
| commit | 22e085c9c8646bb17d9aaca69996dda664f4ff28 (patch) | |
| tree | 367cc825ca377e5d6b46de5a26176ece78ad3e54 | |
| parent | 1564f98b1af53eba2c46711e83ccf58452a131c5 (diff) | |
Use new Async class, the new unified include, and also use better ds_graph_opts
| -rw-r--r-- | src/examples/rrdJFlotSimple.html | 84 |
1 files changed, 14 insertions, 70 deletions
diff --git a/src/examples/rrdJFlotSimple.html b/src/examples/rrdJFlotSimple.html index 81645c4..d723405 100644 --- a/src/examples/rrdJFlotSimple.html +++ b/src/examples/rrdJFlotSimple.html @@ -23,16 +23,9 @@ <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="../../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, binaryXHR and all the jquery libraries --> + <head> <title>RRD Graphs with Flot - Simplified version</title> </head> @@ -74,67 +67,18 @@ // Remove the Javascript warning document.getElementById("infotable").deleteRow(0); - // fname and rrd_data are the global variable used by all the functions below - fname="example3.rrd" - 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 - - 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}}; - - - - var graph_opts1={legend: { noColumns:4}, yaxis:{max:250,min:-200}}; - var rrdflot_defaults1={graph_only:true,use_checked_DSs:true,checked_DSs:['SignChanger'],use_rra:true,rra:1} - // the rrdFlot object creates and handles the graph - var f=new rrdFlot("mygraph1",rrd_data,graph_opts1,ds_graph_opts,rrdflot_defaults1); - - var graph_opts2={legend: { noColumns:4}, yaxis:{min:100},tooltipOpts:{content:"MyValue: %y.3"}}; - var rrdflot_defaults2={graph_only:true,use_checked_DSs:true,checked_DSs:['Oscilator'],use_rra:true,rra:0} - // the rrdFlot object creates and handles the graph - var f=new rrdFlot("mygraph2",rrd_data,graph_opts2,ds_graph_opts,rrdflot_defaults2); - } - - // 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; - update_fname() - } - } - - // this function is invoked when the RRD file name changes - function fname_update() { - try { - FetchBinaryURLAsync(fname,update_fname_handler); - } catch (err) { - alert("Failed loading "+fname+"\n"+err); - } - } - - -fname_update(); + var ds_graph_opts={'Oscilator':{ color: "#ff8000", + lines: { show: true, fill: true, fillColor:"#ffff80"} }} + + var graph_opts1={legend: { noColumns:4}, yaxis:{max:250,min:-200}}; + var rrdflot_defaults1={graph_only:true,use_checked_DSs:true,checked_DSs:['SignChanger'],use_rra:true,rra:1} + // the rrdFlotAsync object creates and handles the graph + var f1=new rrdFlotAsync("mygraph1","example3.rrd",graph_opts1,ds_graph_opts,rrdflot_defaults1); + var graph_opts2={legend: { noColumns:4}, yaxis:{min:100},tooltipOpts:{content:"MyValue: %y.3"}}; + var rrdflot_defaults2={graph_only:true,use_checked_DSs:true,checked_DSs:['Oscilator'],use_rra:true,rra:0} + // the rrdFlotAsync object creates and handles the graph + var f2=new rrdFlotAsync("mygraph2","example3.rrd",graph_opts2,ds_graph_opts,rrdflot_defaults2); </script> </body> </html> |