X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=522629cc024ddc09fd51fd9dc01a86e1c17f3b3b;hb=2e1fcf1a09ea34f1bacae7edf653e388409586bc;hp=2f8821e17fad93e0d16d743508c6e04eb2119f6c;hpb=e9fe4a2ff545eaaf9e350c03673f825db2a5269e;p=dygraphs.git

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 2f8821e..522629c 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -7,6 +7,24 @@
  * - grid overlays
  * - error bars
  * - dygraphs attribute system
+ *
+ * High level overview of classes:
+ *
+ * - DygraphLayout
+ *     This contains all the data to be charted.
+ *     It uses data coordinates, but also records the chart range (in data
+ *     coordinates) and hence is able to calculate percentage positions ('In
+ *     this view, Point A lies 25% down the x-axis.')
+ *     Two things that it does not do are:
+ *     1. Record pixel coordinates for anything.
+ *     2. (oddly) determine anything about the layout of chart elements.
+ *     The naming is a vestige of Dygraph's original PlotKit roots.
+ *
+ * - DygraphCanvasRenderer
+ *     This class determines the charting area (in pixel coordinates), maps the
+ *     percentage coordinates in the DygraphLayout to pixels and draws them.
+ *     It's also responsible for creating chart DOM elements, i.e. annotations,
+ *     tick mark labels, the title and the x/y-axis labels.
  */
 
 /**
@@ -301,6 +319,7 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) {
   this.xlabels = new Array();
   this.ylabels = new Array();
   this.annotations = new Array();
+  this.chartLabels = {};
 
   // TODO(danvk): consider all axes in this computation.
   this.area = {
@@ -321,6 +340,21 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) {
                         "to use " + this.dygraph_.numAxes() + ")");
   }
 
+  // Add space for chart labels: title, xlabel and ylabel.
+  if (this.attr_('title')) {
+    this.area.h -= this.attr_('titleHeight');
+    this.area.y += this.attr_('titleHeight');
+  }
+  if (this.attr_('xlabel')) {
+    this.area.h -= this.attr_('xLabelHeight');
+  }
+  if (this.attr_('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
+    // in overly-padded charts. The y-axis label should fit fine. If it
+    // doesn't, the yAxisLabelWidth option can be increased.
+  }
+
   this.container.style.position = "relative";
   this.container.style.width = this.width + "px";
 
@@ -374,9 +408,15 @@ DygraphCanvasRenderer.prototype.clear = function() {
     var el = this.annotations[i];
     if (el.parentNode) el.parentNode.removeChild(el);
   }
+  for (var k in this.chartLabels) {
+    if (!this.chartLabels.hasOwnProperty(k)) continue;
+    var el = this.chartLabels[k];
+    if (el.parentNode) el.parentNode.removeChild(el);
+  }
   this.xlabels = new Array();
   this.ylabels = new Array();
   this.annotations = new Array();
+  this.chartLabels = {};
 };
 
 
@@ -452,6 +492,7 @@ DygraphCanvasRenderer.prototype.render = function() {
   // Do the ordinary rendering, as before
   this._renderLineChart();
   this._renderAxis();
+  this._renderChartLabels(); 
   this._renderAnnotations();
 };
 
@@ -518,7 +559,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
           label.style.top = top + "px";
         }
         if (tick[0] == 0) {
-          label.style.left = "0px";
+          label.style.left = (this.area.x - this.options.yAxisLabelWidth - this.options.axisTickSize) + "px";
           label.style.textAlign = "right";
         } else if (tick[0] == 1) {
           label.style.left = (this.area.x + this.area.w +
@@ -575,7 +616,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
 
         var label = makeDiv(tick[1]);
         label.style.textAlign = "center";
-        label.style.bottom = "0px";
+        label.style.top = (y + this.options.axisTickSize) + 'px';
 
         var left = (x - this.options.axisLabelWidth/2);
         if (left + this.options.axisLabelWidth > this.width) {
@@ -605,6 +646,101 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
 };
 
 
+DygraphCanvasRenderer.prototype._renderChartLabels = function() {
+  // Generate divs for the chart title, xlabel and ylabel.
+  // Space for these divs has already been taken away from the charting area in
+  // the DygraphCanvasRenderer constructor.
+  if (this.attr_('title')) {
+    var div = document.createElement("div");
+    div.style.position = 'absolute';
+    div.style.top = '0px';
+    div.style.left = this.area.x + 'px';
+    div.style.width = this.area.w + 'px';
+    div.style.height = this.attr_('titleHeight') + 'px';
+    div.style.textAlign = 'center';
+    div.style.fontSize = (this.attr_('titleHeight') - 8) + 'px';
+    div.style.fontWeight = 'bold';
+    var class_div = document.createElement("div");
+    class_div.className = 'dygraph-label dygraph-title';
+    class_div.innerHTML = this.attr_('title');
+    div.appendChild(class_div);
+    this.container.appendChild(div);
+    this.chartLabels.title = div;
+  }
+
+  if (this.attr_('xlabel')) {
+    var div = document.createElement("div");
+    div.style.position = 'absolute';
+    div.style.bottom = 0;  // TODO(danvk): this is lazy. Calculate style.top.
+    div.style.left = this.area.x + 'px';
+    div.style.width = this.area.w + 'px';
+    div.style.height = this.attr_('xLabelHeight') + 'px';
+    div.style.textAlign = 'center';
+    div.style.fontSize = (this.attr_('xLabelHeight') - 2) + 'px';
+
+    var class_div = document.createElement("div");
+    class_div.className = 'dygraph-label dygraph-xlabel';
+    class_div.innerHTML = this.attr_('xlabel');
+    div.appendChild(class_div);
+    this.container.appendChild(div);
+    this.chartLabels.xlabel = div;
+  }
+
+  if (this.attr_('ylabel')) {
+    var box = {
+      left: 0,
+      top: this.area.y,
+      width: this.attr_('yLabelWidth'),
+      height: this.area.h
+    };
+    // TODO(danvk): is this outer div actually necessary?
+    var div = document.createElement("div");
+    div.style.position = 'absolute';
+    div.style.left = box.left;
+    div.style.top = box.top + 'px';
+    div.style.width = box.width + 'px';
+    div.style.height = box.height + 'px';
+    div.style.fontSize = (this.attr_('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.textAlign = 'center';
+
+    // CSS rotation is an HTML5 feature which is not standardized. Hence every
+    // browser has its own name for the CSS style.
+    inner_div.style.transform = 'rotate(-90deg)';        // HTML5
+    inner_div.style.WebkitTransform = 'rotate(-90deg)';  // Safari/Chrome
+    inner_div.style.MozTransform = 'rotate(-90deg)';     // Firefox
+    inner_div.style.OTransform = 'rotate(-90deg)';       // Opera
+    inner_div.style.msTransform = 'rotate(-90deg)';      // IE9
+
+    if (typeof(document.documentMode) !== 'undefined' &&
+        document.documentMode < 9) {
+      // We're dealing w/ an old version of IE, so we have to rotate the text
+      // using a BasicImage transform. This uses a different origin of rotation
+      // than HTML5 rotation (top left of div vs. its center).
+      inner_div.style.filter =
+       'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+      inner_div.style.left = '0px';
+      inner_div.style.top = '0px';
+    }
+
+    var class_div = document.createElement("div");
+    class_div.className = 'dygraph-label dygraph-ylabel';
+    class_div.innerHTML = this.attr_('ylabel');
+
+    inner_div.appendChild(class_div);
+    div.appendChild(inner_div);
+    this.container.appendChild(div);
+    this.chartLabels.ylabel = div;
+  }
+};
+
+
 DygraphCanvasRenderer.prototype._renderAnnotations = function() {
   var annotationStyle = {
     "position": "absolute",