From fe45daf55054704153ab9ed82a87a2a033f9b595 Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Wed, 6 Nov 2013 18:54:33 +0000 Subject: Use new Async class, the new unified include, adn also use better ds_graph_opts --- src/examples/rrdJFlotDefaults.html | 89 ++++++++++---------------------------- 1 file 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 @@ - - - - - - - - - - + + RRD Graphs with Flot @@ -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; } -- cgit v1.1-4-g5e80