summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/rrdFlotMatrix.js42
1 files changed, 37 insertions, 5 deletions
diff --git a/src/lib/rrdFlotMatrix.js b/src/lib/rrdFlotMatrix.js
index 4b0dfa9..d076e15 100644
--- a/src/lib/rrdFlotMatrix.js
+++ b/src/lib/rrdFlotMatrix.js
@@ -102,6 +102,7 @@ rrdFlotMatrix.prototype.createHTML = function() {
this.rrd_cb_id=this.html_id+"_rrd_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);
@@ -112,7 +113,7 @@ rrdFlotMatrix.prototype.createHTML = function() {
// DS rows: select DS
var rowDS=external_table.insertRow(-1);
var cellDS=rowDS.insertCell(-1);
- cellDS.colSpan=3
+ cellDS.colSpan=4
cellDS.appendChild(document.createTextNode("Element:"));
var forDS=document.createElement("Select");
forDS.id=this.ds_id;
@@ -122,7 +123,7 @@ rrdFlotMatrix.prototype.createHTML = function() {
// Header row: 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;
@@ -135,7 +136,7 @@ rrdFlotMatrix.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";
@@ -151,6 +152,21 @@ rrdFlotMatrix.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");
@@ -165,9 +181,9 @@ rrdFlotMatrix.prototype.createHTML = function() {
elScaleReset.type = "button";
elScaleReset.value = "Reset selection";
elScaleReset.onclick = function () {rf_this.callback_scale_reset();}
-
cellScaleReset.appendChild(elScaleReset);
+
base_el.appendChild(external_table);
};
@@ -349,17 +365,29 @@ rrdFlotMatrix.prototype.drawFlotGraph = function() {
rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) {
var rf_this=this; // use obj inside other functions
+ // DS
+ 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;
@@ -450,3 +478,7 @@ rrdFlotMatrix.prototype.callback_scale_reset = function() {
this.scale.clearSelection();
};
+rrdFlotMatrix.prototype.callback_legend_changed = function() {
+ this.drawFlotGraph();
+};
+