From 8994b8c1fb06d36f7e72d5853ea299a2dc66a982 Mon Sep 17 00:00:00 2001
From: Igor Sfiligoi <isfiligoi@ucsd.edu>
Date: Thu, 25 Jun 2009 21:49:02 +0000
Subject: Adding legend selection

---
 src/lib/rrdFlot.js | 37 ++++++++++++++++++++++++++++++++++---
 1 file 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();
+};
+
-- 
cgit v1.1-4-g5e80