all chart labels are ported over

diff --git a/dygraph-layout.js b/dygraph-layout.js
index 81274ed..ad15ae9 100644 (file)
--- a/dygraph-layout.js
+++ b/dygraph-layout.js
@@ -84,6 +84,16 @@ DygraphLayout.prototype.computePlotArea_ = function() {
       area.w -= px;
       return r;
     },
+    reserveSpaceRight: function(px) {
+      var r = {
+        x: area.x + area.w - px,
+        y: area.y,
+        w: px,
+        h: area.h
+      };
+      area.w -= px;
+      return r;
+    },
     reserveSpaceTop: function(px) {
       var r = {
         x: area.x,
@@ -95,6 +105,16 @@ DygraphLayout.prototype.computePlotArea_ = function() {
       area.h -= px;
       return r;
     },
+    reserveSpaceBottom: function(px) {
+      var r = {
+        x: area.x,
+        y: area.y + area.h - px,
+        w: area.w,
+        h: px
+      };
+      area.h -= px;
+      return r;
+    },
     chartRect: function() {
       return {x:area.x, y:area.y, w:area.w, h:area.h};
     }

diff --git a/plugins/chart-labels.js b/plugins/chart-labels.js
index 3e596cd..5a109df 100644 (file)
--- a/plugins/chart-labels.js
+++ b/plugins/chart-labels.js
@@ -60,21 +60,22 @@ var createRotatedDiv = function(g, box, axis, classes, html) {
   div = document.createElement("div");
   div.style.position = 'absolute';
   if (axis == 1) {
-    div.style.left = box.left;
+    // NOTE: this is cheating. Should be positioned relative to the box.
+    div.style.left = '0px';
   } else {
-    div.style.right = box.left;
+    div.style.left = box.x + 'px';
   }
-  div.style.top = box.top + 'px';
-  div.style.width = box.width + 'px';
-  div.style.height = box.height + 'px';
+  div.style.top = box.y + 'px';
+  div.style.width = box.w + 'px';
+  div.style.height = box.h + 'px';
   div.style.fontSize = (g.getOption('yLabelWidth') - 2) + 'px';
 
   var inner_div = document.createElement("div");
   inner_div.style.position = 'absolute';
-  inner_div.style.width = box.height + 'px';
-  inner_div.style.height = box.width + 'px';
-  inner_div.style.top = (box.height / 2 - box.width / 2) + 'px';
-  inner_div.style.left = (box.width / 2 - box.height / 2) + 'px';
+  inner_div.style.width = box.h + 'px';
+  inner_div.style.height = box.w + 'px';
+  inner_div.style.top = (box.h / 2 - box.w / 2) + 'px';
+  inner_div.style.left = (box.w / 2 - box.h / 2) + 'px';
   inner_div.style.textAlign = 'center';
 
   // CSS rotation is an HTML5 feature which is not standardized. Hence every
@@ -116,14 +117,30 @@ chart_labels.prototype.layout = function(e) {
     // QUESTION: should this return an absolutely-positioned div instead?
     var title_rect = e.reserveSpaceTop(g.getOption('titleHeight'));
     this.title_div_ = createDivInRect(title_rect);
-    this.title_div_.className = 'dygraph-label dygraph-title';
-    this.title_div_.innerHTML = g.getOption('title');
     this.title_div_.style.textAlign = 'center';
     this.title_div_.style.fontSize = (g.getOption('titleHeight') - 8) + 'px';
     this.title_div_.style.fontWeight = 'bold';
+
+    var class_div = document.createElement("div");
+    class_div.className = 'dygraph-label dygraph-title';
+    class_div.innerHTML = g.getOption('title');
+    this.title_div_.appendChild(class_div);
     div.appendChild(this.title_div_);
   }
 
+  if (g.getOption('xlabel')) {
+    var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight'));
+    this.xlabel_div_ = createDivInRect(x_rect);
+    this.xlabel_div_.style.textAlign = 'center';
+    this.xlabel_div_.style.fontSize = (g.getOption('xLabelHeight') - 2) + 'px';
+
+    var class_div = document.createElement("div");
+    class_div.className = 'dygraph-label dygraph-xlabel';
+    class_div.innerHTML = g.getOption('xlabel');
+    this.xlabel_div_.appendChild(class_div);
+    div.appendChild(this.xlabel_div_);
+  }
+
   if (g.getOption('ylabel')) {
     // It would make sense to shift the chart here to make room for the y-axis
     // label, but the default yAxisLabelWidth is large enough that this results
@@ -139,24 +156,31 @@ chart_labels.prototype.layout = function(e) {
     div.appendChild(this.ylabel_div_);
   }
 
-  /*
-  if (g.getOption('xlabel')) {
-    var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight'));
-  }
-
-  if (g.getOption('y2label')) {
+  if (g.getOption('y2label') && g.numAxes() == 2) {
+    // same logic applies here as for ylabel.
     var y2_rect = e.reserveSpaceRight(0);
+    this.y2label_div_ = createRotatedDiv(
+        g, y2_rect,
+        2,  // secondary (right) y-axis
+        'dygraph-label dygraph-y2label',
+        g.getOption('y2label'));
+    div.appendChild(this.y2label_div_);
   }
-  */
 };
 
 chart_labels.prototype.drawChart = function(e) {
   var g = e.dygraph;
   if (this.title_div_) {
-    this.title_div_.innerHTML = g.getOption('title');
+    this.title_div_.children[0].innerHTML = g.getOption('title');
+  }
+  if (this.xlabel_div_) {
+    this.xlabel_div_.children[0].innerHTML = g.getOption('xlabel');
   }
   if (this.ylabel_div_) {
-    // this.ylabel_div_.
+    this.ylabel_div_.children[0].children[0].innerHTML = g.getOption('ylabel');
+  }
+  if (this.y2label_div_) {
+    this.y2label_div_.children[0].children[0].innerHTML = g.getOption('y2label');
   }
 };