diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/rrdFlot.js | 37 |
1 files changed, 34 insertions, 3 deletions
diff --git a/src/lib/rrdFlot.js b/src/lib/rrdFlot.js index 249a8d8..a29e05c 100644 --- a/src/lib/rrdFlot.js +++ b/src/lib/rrdFlot.js @@ -76,6 +76,7 @@ rrdFlot.prototype.createHTML = function() { this.ds_cb_id=this.html_id+"_ds_cb";
this.graph_id=this.html_id+"_graph";
this.scale_id=this.html_id+"_scale";
+ this.legend_sel_id=this.html_id+"_legend_sel";
// First clean up anything in the element
while (base_el.lastChild!=null) base_el.removeChild(base_el.lastChild);
@@ -86,7 +87,7 @@ rrdFlot.prototype.createHTML = function() { // Header rwo: resulution select and DS selection title
var rowHeader=external_table.insertRow(-1);
var cellRes=rowHeader.insertCell(-1);
- cellRes.colSpan=2
+ cellRes.colSpan=3;
cellRes.appendChild(document.createTextNode("Resolution:"));
var forRes=document.createElement("Select");
forRes.id=this.res_id;
@@ -100,7 +101,7 @@ rrdFlot.prototype.createHTML = function() { // Graph row: main graph and DS selection block
var rowGraph=external_table.insertRow(-1);
var cellGraph=rowGraph.insertCell(-1);
- cellGraph.colSpan=2;
+ cellGraph.colSpan=3;
var elGraph=document.createElement("Div");
elGraph.style.width="500px";
elGraph.style.height="300px";
@@ -116,6 +117,21 @@ rrdFlot.prototype.createHTML = function() { // Scale row: scaled down selection graph
var rowScale=external_table.insertRow(-1);
+
+ var cellScaleLegend=rowScale.insertCell(-1);
+ cellScaleLegend.vAlign="top";
+ cellScaleLegend.appendChild(document.createTextNode("Legend:"));
+ cellScaleLegend.appendChild(document.createElement('br'));
+ var forScaleLegend=document.createElement("Select");
+ forScaleLegend.id=this.legend_sel_id;
+ forScaleLegend.appendChild(new Option("Top","nw"));
+ forScaleLegend.appendChild(new Option("Bottom","sw"));
+ forScaleLegend.appendChild(new Option("TopRight","ne"));
+ forScaleLegend.appendChild(new Option("BottomRight","se"));
+ forScaleLegend.appendChild(new Option("None","None"));
+ forScaleLegend.onchange= function () {rf_this.callback_legend_changed();};
+ cellScaleLegend.appendChild(forScaleLegend);
+
var cellScale=rowScale.insertCell(-1);
cellScale.align="right";
var elScale=document.createElement("Div");
@@ -280,17 +296,28 @@ rrdFlot.prototype.drawFlotGraph = function() { rrdFlot.prototype.bindFlotGraph = function(flot_obj) {
var rf_this=this; // use obj inside other functions
+ // Legend
+ var oSelect=document.getElementById(this.legend_sel_id);
+ var legend_id=oSelect.options[oSelect.selectedIndex].value;
+
var graph_jq_id="#"+this.graph_id;
var scale_jq_id="#"+this.scale_id;
var graph_options = {
- legend: {show:true, position:"nw",noColumns:3},
+ legend: {show:false, position:"nw",noColumns:3},
lines: {show:true},
xaxis: { mode: "time" },
yaxis: { autoscaleMargin: 0.20},
selection: { mode: "x" },
};
+ if (legend_id=="None") {
+ // do nothing
+ } else {
+ graph_options.legend.show=true;
+ graph_options.legend.position=legend_id;
+ }
+
if (this.selection_range.isSet()) {
var selection_range=this.selection_range.getFlotRanges();
graph_options.xaxis.min=selection_range.xaxis.from;
@@ -379,3 +406,7 @@ rrdFlot.prototype.callback_scale_reset = function() { this.scale.clearSelection();
};
+rrdFlot.prototype.callback_legend_changed = function() {
+ this.drawFlotGraph();
+};
+
|