summaryrefslogtreecommitdiff
path: root/src/examples
diff options
context:
space:
mode:
Diffstat (limited to 'src/examples')
-rw-r--r--src/examples/rrdJFlotFilter.html100
-rw-r--r--src/examples/rrdJFlotFilterRRA.html89
2 files changed, 43 insertions, 146 deletions
diff --git a/src/examples/rrdJFlotFilter.html b/src/examples/rrdJFlotFilter.html
index 9d05aa1..61820ff 100644
--- a/src/examples/rrdJFlotFilter.html
+++ b/src/examples/rrdJFlotFilter.html
@@ -25,18 +25,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="../lib/rrdFile.js"></script>
- <script type="text/javascript" src="../lib/rrdFilter.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, rrdFilter, binaryXHR and all the jquery libraries -->
<head>
<title>RRD Graphs with Flot</title>
</head>
@@ -62,31 +52,6 @@
// 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);
- }
-
- // Next three functions are for use in RRDFilterOp,
- // which requires a list of functions, one for each DS
-
//Sum two DSs
function SumDS(ds1,ds2) {
this.getName = function() {return ds1+"+"+ds2;}
@@ -114,58 +79,43 @@
}
}
- // 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;
-
- //If only one DS, cannot sum anything
- if (rrd_data.getNrDSs()<2) {
- alert("Not enough elements ("+rrd_data.getNrDSs()+") in RRD to sum!");
- }
-
-
+ // this function is called after the data is loaded
+ // but before the graph is displayed
+ function mycallback(obj) {
var op_list = []; //list of operations
var DS_list = []; //list of DSs to sum in MultiSumDS
var i = 0;
//create a new rrdlist, which contains almost all original elements
// plus additional operated-on DSs from RRDFilterOp
- for (i=0;i<rrd_data.getNrDSs();i++) {
+ for (i=0;i<obj.rrd_data.getNrDSs();i++) {
if (i!=1) op_list.push(i);
- DS_list.push(rrd_data.getDS(i))
+ DS_list.push(obj.rrd_data.getDS(i))
}
op_list.push(new MultiSumDS(DS_list));
- op_list.push(new SumDS(rrd_data.getDS(0).getName(),rrd_data.getDS(1).getName()));
-
- rrd_data = new RRDFilterOp(rrd_data,op_list);
+ op_list.push(new SumDS(obj.rrd_data.getDS(0).getName(),obj.rrd_data.getDS(1).getName()));
- update_fname()
- }
+ //we just customized the DS shown by the graph
+ obj.ds_op_list=op_list;
}
+ 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}};
+
+
+ // we don't know what DSs we will get, so we have to use the callback
+ // in principle, we could personalize ds_graph_opts in the callback as well, but we keep it simple here
+ flot_obj=new rrdFlotAsync("mygraph",null,graph_opts,ds_graph_opts,null,null,null,mycallback);
+
// 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>
diff --git a/src/examples/rrdJFlotFilterRRA.html b/src/examples/rrdJFlotFilterRRA.html
index 783c943..afa0bb3 100644
--- a/src/examples/rrdJFlotFilterRRA.html
+++ b/src/examples/rrdJFlotFilterRRA.html
@@ -25,18 +25,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="../lib/rrdFile.js"></script>
- <script type="text/javascript" src="../lib/rrdFilter.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, rrdFilter, binaryXHR and all the jquery libraries -->
<head>
<title>RRD Graphs with Flot</title>
</head>
@@ -63,70 +53,27 @@
// 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;
+ 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}};
- // 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);
- }
+ //Add RRA filters for longer averaged-out RRAs
+ //This pages was made to run example3.rra, with RRA steps of
+ //5 mins (300 seconds), 45 mins (2700s) and 8 hours (28800s).
+ var rra_steps_list = [0, [0,1800], // org(5mins), 30mins
+ 1, [1,21600], // org(45mins), 6h
+ 2, [2,86400], [2,259200], [2,604800]]; // org(8h), 24h, 3d, 1w
- // 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;
-
- //Add RRA filters for longer averaged-out RRAs
- //This pages was made to run example3.rra, with RRA steps of
- //5 mins (300 seconds), 45 mins (2700s) and 8 hours (28800s).
-
- var rra_steps_list = [0, [0,1800], // org(5mins), 30mins
- 1, [1,21600], // org(45mins), 6h
- 2, [2,86400], [2,259200], [2,604800]]; // org(8h), 24h, 3d, 1w
-
- //Now, we apply those averaging filters.
- rrd_data = new RRDRRAFilterAvg(rrd_data,rra_steps_list);
-
- update_fname()
- }
- }
+ flot_obj=new rrdFlotAsync("mygraph",null,graph_opts,ds_graph_opts,null,null,rra_steps_list);
// 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>
generated by cgit v1.2.3-2-g168b (git 2.25.1) at 2024-11-10 18:35:29 +0000