merge master

[dygraphs.git] / dygraph.js

diff --git a/dygraph.js b/dygraph.js
index 00af051..fe677f2 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -193,6 +193,11 @@ Dygraph.DEFAULT_ATTRS = {
   stepPlot: false,
   avoidMinZero: false,
 
+  // Sizes of the various chart labels.
+  titleHeight: 28,
+  xLabelHeight: 18,
+  yLabelWidth: 18,
+
   interactionModel: null  // will be set to Dygraph.defaultInteractionModel.
 };
 
@@ -959,8 +964,9 @@ Dygraph.prototype.createStatusMessage_ = function() {
 };
 
 /**
- * Position the labels div so that its right edge is flush with the right edge
- * of the charting area.
+ * Position the labels div so that:
+ * - its right edge is flush with the right edge of the charting area
+ * - its top edge is flush with the top edge of the charting area
  */
 Dygraph.prototype.positionLabelsDiv_ = function() {
   // Don't touch a user-specified labelsDiv.
@@ -969,6 +975,7 @@ Dygraph.prototype.positionLabelsDiv_ = function() {
   var area = this.plotter_.area;
   var div = this.attr_("labelsDiv");
   div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
+  div.style.top = area.y + "px";
 };
 
 /**
@@ -986,10 +993,11 @@ Dygraph.prototype.createRollInterface_ = function() {
 
   var display = this.attr_('showRoller') ? 'block' : 'none';
 
+  var area = this.plotter_.area;
   var textAttr = { "position": "absolute",
                    "zIndex": 10,
-                   "top": (this.plotter_.area.h - 25) + "px",
-                   "left": (this.plotter_.area.x + 1) + "px",
+                   "top": (area.y + area.h - 25) + "px",
+                   "left": (area.x + 1) + "px",
                    "display": display
                   };
   this.roller_.size = "2";
@@ -4164,7 +4172,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
   "sigma": {
     "default": "2.0",
     "labels": ["Error Bars"],
-    "type": "integer",
+    "type": "float",
     "description": "When errorBars is set, shade this many standard deviations above/below each point."
   },
   "customBars": {
@@ -4198,6 +4206,42 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "default": "null",
     "description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
   },
+  "title": {
+    "labels": ["Chart labels"],
+    "type": "string",
+    "default": "null",
+    "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
+  },
+  "titleHeight": {
+    "default": "18",
+    "labels": ["Chart labels"],
+    "type": "integer",
+    "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
+  },
+  "xlabel": {
+    "labels": ["Chart labels"],
+    "type": "string",
+    "default": "null",
+    "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
+  },
+  "xLabelHeight": {
+    "labels": ["Chart labels"],
+    "type": "integer",
+    "default": "18",
+    "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
+  },
+  "ylabel": {
+    "labels": ["Chart labels"],
+    "type": "string",
+    "default": "null",
+    "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
+  },
+  "yLabelWidth": {
+    "labels": ["Chart labels"],
+    "type": "integer",
+    "default": "18",
+    "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
+  },
   "isZoomedIgnoreProgrammaticZoom" : {
     "default": "false",
     "labels": ["Zooming"],
@@ -4208,7 +4252,8 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
 ;  // </JSON>
 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
 // JSON. This assumption cannot be checked in JS, but it will be checked when
-// documentation is generated by the generate-documentation.py script.
+// documentation is generated by the generate-documentation.py script. For the
+// most part, this just means that you should always use double quotes.
 
 // Do a quick sanity check on the options reference.
 (function() {
@@ -4217,6 +4262,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
   var valid_cats = [ 
    'Annotations',
    'Axis display',
+   'Chart labels',
    'CSV parsing',
    'Callbacks',
    'Data Line display',