Adding legend selectionv0.4.2

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();

+};

+