diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/rrdFlot.js | 265 |
1 files changed, 265 insertions, 0 deletions
diff --git a/src/lib/rrdFlot.js b/src/lib/rrdFlot.js new file mode 100644 index 0000000..2ab090b --- /dev/null +++ b/src/lib/rrdFlot.js @@ -0,0 +1,265 @@ +/*
+ * RRD graphing libraries, based on Flot
+ * 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]
+ *
+ */
+
+/*
+ *
+ * Flot is a javascript plotting library developed and maintained by
+ * Ole Laursen [http://code.google.com/p/flot/]
+ *
+ */
+
+/*
+ * Local dependencies:
+ * rrdFlotSupport.py
+ *
+ * External dependencies:
+ * [Flot]/jquery.py
+ * [Flot]/jquery.flot.js
+ */
+
+// ds_desciption and layout_opts not used yet
+function rrdFlot(html_id, rrd_file, ds_description, layout_opts) {
+ this.html_id=html_id;
+ this.rrd_file=rrd_file;
+ this.ds_description=ds_description;
+ this.layout_ops=layout_opts;
+
+ this.createHTML();
+ this.populateRes();
+ this.populateDScb();
+ this.drawFlotGraph()
+}
+
+
+// ===============================================
+// Create the HTML tags needed to host the graphs
+rrdFlot.prototype.createHTML = function() {
+ var rf_this=this; // use obj inside other functions
+
+ var base_el=document.getElementById(this.html_id);
+
+ this.res_id=this.html_id+"_res";
+ this.ds_cb_id=this.html_id+"_ds_cb";
+ this.graph_id=this.html_id+"_graph";
+ this.scale_id=this.html_id+"_scale";
+
+ // First clean up anything in the element
+ while (base_el.lastChild!=null) base_el.removeChild(base_el.lastChild);
+
+ // Now create the layout
+ var external_table=document.createElement("Table");
+
+ // Header rwo: resulution select and DS selection title
+ var rowHeader=external_table.insertRow(-1);
+ var cellRes=rowHeader.insertCell(-1);
+ cellRes.appendChild(document.createTextNode("Resolution:"));
+ var forRes=document.createElement("Select");
+ forRes.id=this.res_id;
+ //forRes.onChange= this.callback_res_changed;
+ forRes.onchange= function () {rf_this.callback_res_changed();};
+ cellRes.appendChild(forRes);
+
+ var cellDSTitle=rowHeader.insertCell(-1);
+ cellDSTitle.appendChild(document.createTextNode("Select elements to plot:"));
+
+ // Graph row: main graph and DS selection block
+ var rowGraph=external_table.insertRow(-1);
+ var cellGraph=rowGraph.insertCell(-1);
+ var elGraph=document.createElement("Div");
+ elGraph.style.width="500px";
+ elGraph.style.height="300px";
+ elGraph.id=this.graph_id;
+ cellGraph.appendChild(elGraph);
+
+ var cellDScb=rowGraph.insertCell(-1);
+ cellDScb.vAlign="top";
+ var formDScb=document.createElement("Form");
+ formDScb.id=this.ds_cb_id;
+ formDScb.onchange= function () {rf_this.callback_ds_cb_changed();};
+ cellDScb.appendChild(formDScb);
+
+ // Scale row: scaled down selection graph
+ var rowScale=external_table.insertRow(-1);
+ var cellScale=rowScale.insertCell(-1);
+ var elScale=document.createElement("Div");
+ elScale.style.width="400px";
+ elScale.style.height="75px";
+ elScale.id=this.scale_id;
+ cellScale.appendChild(elScale);
+
+ base_el.appendChild(external_table);
+
+ // since I created a new HTML structure, there are no graphs yet => no selection
+ this.selection_min=null;
+ this.selection_max=null;
+};
+
+// ======================================
+// Populate RRA and RD info
+rrdFlot.prototype.populateRes = function() {
+ var form_el=document.getElementById(this.res_id);
+
+ // First clean up anything in the element
+ while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
+
+ // now populate with RRA info
+ var nrRRAs=this.rrd_file.getNrRRAs();
+ for (var i=0; i<nrRRAs; i++) {
+ var rra=this.rrd_file.getRRAInfo(i);
+ var step=rra.getStep();
+ var rows=rra.getNrRows();
+ var period=step*rows;
+ var rra_label=step+"s ("+period+"s total)";
+ form_el.appendChild(new Option(rra_label,i));
+ }
+};
+
+rrdFlot.prototype.populateDScb = function() {
+ var form_el=document.getElementById(this.ds_cb_id);
+
+ // First clean up anything in the element
+ while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
+
+ // now populate with DS info
+ var nrDSs=this.rrd_file.getNrDSs();
+ for (var i=0; i<nrDSs; i++) {
+ var ds=this.rrd_file.getDS(i);
+ var name=ds.getName();
+ var cb_el = document.createElement("input");
+ cb_el.type = "checkbox";
+ cb_el.name = "ds";
+ cb_el.value = name;
+ cb_el.checked = cb_el.defaultChecked = true;
+ form_el.appendChild(cb_el);
+ form_el.appendChild(document.createTextNode(name));
+ form_el.appendChild(document.createElement('br'));
+ }
+};
+
+// ======================================
+//
+rrdFlot.prototype.drawFlotGraph = function() {
+ // Res contains the RRA idx
+ var oSelect=document.getElementById(this.res_id);
+ var rra_idx=Number(oSelect.options[oSelect.selectedIndex].value);
+
+ // now get the list of selected DSs
+ var ds_idxs=[];
+ var oCB=document.getElementById(this.ds_cb_id);
+ var nrDSs=oCB.ds.length;
+ if (oCB.ds.length>0) {
+ for (var i=0; i<oCB.ds.length; i++) {
+ if (oCB.ds[i].checked==true) {
+ ds_idxs.push(oCB.ds[i].value);
+ }
+ }
+ } else { // single element is not treated as an array
+ if (oCB.ds.checked==true) {
+ ds_idxs.push(oCB.ds.value);
+ }
+ }
+
+ // then extract RRA data about those DSs
+ var flot_data=[];
+ for (var j=0; j<ds_idxs.length; j++) {
+ var ds_idx=ds_idxs[j];
+ flot_data.push(rrdDS2FlotSeries(this.rrd_file,ds_idx,rra_idx));
+ }
+
+ // finally do the real plotting
+ this.bindFlotGraph(flot_data);
+};
+
+// ======================================
+// Bind the graphs to the HTML tags
+rrdFlot.prototype.bindFlotGraph = function(flot_data) {
+ var rf_this=this; // use obj inside other functions
+
+ var graph_jq_id="#"+this.graph_id;
+ var scale_jq_id="#"+this.scale_id;
+
+ var graph_options = {
+ legend: {show:true},
+ lines: {show:true},
+ xaxis: { mode: "time" },
+ selection: { mode: "x" },
+ };
+ var scale_options = {
+ legend: {show:false},
+ lines: {show:true},
+ xaxis: { mode: "time" },
+ selection: { mode: "x" },
+ };
+
+ var graph_data=this.trim_flot_data(flot_data);
+ //var scale_data=flot_data.clone();
+ var scale_data=flot_data;
+
+
+ var graph = $.plot($(graph_jq_id), graph_data, graph_options);
+ var scale = $.plot($(scale_jq_id), scale_data, scale_options);
+
+ if (this.selection_min!=null) {
+ scale.setSelection({ xaxis: {from: this.selection_min, to: this.selection_max}},true); //don't fire event, no need
+ }
+
+ // now connect the two
+ $(graph_jq_id).bind("plotselected", function (event, ranges) {
+ // do the zooming
+ rf_this.selection_min=ranges.xaxis.from;
+ rf_this.selection_max=ranges.xaxis.to;
+ graph = $.plot($(graph_jq_id), rf_this.trim_flot_data(flot_data), graph_options);
+
+ // don't fire event on the scale to prevent eternal loop
+ scale.setSelection(ranges, true);
+ });
+
+ $(scale_jq_id).bind("plotselected", function (event, ranges) {
+ graph.setSelection(ranges);
+ });
+};
+
+// callback functions that are called when one of the selections changes
+rrdFlot.prototype.callback_res_changed = function() {
+ this.drawFlotGraph();
+};
+
+rrdFlot.prototype.callback_ds_cb_changed = function() {
+ this.drawFlotGraph();
+};
+
+
+// =======================================================
+// Given an array of flot lines, limit to the selection
+rrdFlot.prototype.trim_flot_data = function(flot_data) {
+ var out_data=[];
+ for (var i=0; i<flot_data.length; i++) {
+ var data_el=flot_data[i];
+ out_data.push({label : data_el.label, data:this.trim_data(data_el.data)});
+ }
+ return out_data;
+};
+
+// Limit to selection the flot series data element
+rrdFlot.prototype.trim_data = function(data_list) {
+ if (this.selection_min==null) return data_list; // no selection => no filtering
+
+ var out_data=[];
+ for (var i=0; i<data_list.length; i++) {
+ if (data_list[i]==null) continue; // protect
+ var nr=data_list[i][0];
+ if ((nr>=this.selection_min) && (nr<=this.selection_max)) {
+ out_data.push(data_list[i]);
+ }
+ }
+ return out_data;
+};
+
|