diff options
| author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-06 18:54:33 +0000 |
|---|---|---|
| committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-06 18:54:33 +0000 |
| commit | fe45daf55054704153ab9ed82a87a2a033f9b595 (patch) | |
| tree | a03b61d360d459df101c2fd5d3eb54647df68424 | |
| parent | bf50549b9cbe7589efa2036ecfa25df973a7c5fb (diff) | |
Use new Async class, the new unified include, adn also use better ds_graph_opts
| -rw-r--r-- | src/examples/rrdJFlotDefaults.html | 89 |
1 files changed, 22 insertions, 67 deletions
diff --git a/src/examples/rrdJFlotDefaults.html b/src/examples/rrdJFlotDefaults.html index 35f1ee0..7383ce7 100644 --- a/src/examples/rrdJFlotDefaults.html +++ b/src/examples/rrdJFlotDefaults.html @@ -23,16 +23,8 @@ <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</title> </head> @@ -58,66 +50,29 @@ // 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() { - // Finally, update the file name and enable the update button - document.getElementById("fname").firstChild.data=fname; - - var graph_opts={legend: { noColumns:4}}; - 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}}; - - - - // the rrdFlot object creates and handles the graph - var f=new rrdFlot("mygraph",rrd_data,graph_opts,ds_graph_opts, - {num_cb_rows:9, use_element_buttons: true, - multi_ds:true, multi_rra: true, - use_rra: true, rra:1, - //If multi_ds is off, don't need to include "-GAUGE" in element names - use_checked_DSs: true, checked_DSs: ["ClientGlideIdle-GAUGE","ClientGlideTotal-GAUGE","StatusStageIn-GAUGE"], - use_windows:true, window_min:1241752800000,window_max:1241974500000, - graph_width:"700px",graph_height:"300px", scale_width:"350px", scale_height:"200px", - timezone:"-5"}); - } - - // 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() - } - } + var graph_opts={legend: { noColumns:4}}; + var ds_graph_opts={'ClientGlideIdle':{ color: "#ff8000", label: 'Idle Clinet Glideins', + lines: { show: true, fill: true, fillColor:"#ffff80"} }, + 'ClientGlideTotal':{ label: 'Total Client Glideins', color: "#00c0c0", + lines: { show: true, fill: true} }, + 'ClientInfoAge':{yaxis:2}, + 'StatusWait':{color: "#000000",yaxis:2}}; + var rrdflot_defaults={ num_cb_rows:9, use_element_buttons: true, + multi_ds:true, multi_rra: true, + use_rra: true, rra:1, + //If multi_ds is off, don't need to include "-GAUGE" in element names + use_checked_DSs: true, checked_DSs: ["ClientGlideIdle-GAUGE","ClientGlideTotal-GAUGE","StatusStageIn-GAUGE"], + use_windows:true, window_min:1241752800000,window_max:1241974500000, + graph_width:"700px",graph_height:"300px", scale_width:"350px", scale_height:"200px", + timezone:"-5"}; + + flot_obj=new rrdFlotAsync("mygraph",null,graph_opts,ds_graph_opts,rrdflot_defaults); // 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); - } + var fname=document.getElementById("input_fname").value; + flot_obj.reload(fname); + document.getElementById("fname").firstChild.data=fname; } </script> |