From ca49434a4cbc8f73fdf5a77128ba74f39cf7f529 Mon Sep 17 00:00:00 2001
From: Dan Vanderkam <dan@dygraphs.com>
Date: Mon, 4 Apr 2011 00:12:24 -0400
Subject: [PATCH] more chart label tweaks -- getting close!

---
 docs/index.html                |  3 +--
 dygraph-canvas.js              | 31 ++++++++++++++---------
 dygraph.js                     | 42 +++++++++++++++++++++++++++++--
 tests/styled-chart-labels.html | 56 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+), 16 deletions(-)
 create mode 100644 tests/styled-chart-labels.html

diff --git a/docs/index.html b/docs/index.html
index acb6250..6021647 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -110,7 +110,6 @@
             rollPeriod: 14,
             showRoller: true,
             customBars: true,
-            yAxisLabelWidth: 30,
             title: 'Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)'
           }
@@ -138,7 +137,7 @@
         <li>Plots time series without using an external server or Flash</li>
         <li>Works in Internet Explorer (using excanvas)</li>
         <li>Lightweight (69kb) and responsive</li>
-        <li>Displays values on mouseover (this makes it easily discoverable)</li>
+        <li>Displays values on mouseover, making interaction easily discoverable</li>
         <li>Supports error bands around data series</li>
         <li>Interactive zoom</li>
         <li>Displays Annotations on the chart</li>
diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 18cd8f6..cf4aa12 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -342,18 +342,17 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) {
 
   // Add space for chart labels: title, xlabel and ylabel.
   if (this.attr_('title')) {
-    // TODO(danvk): make this a parameter
     this.area.h -= this.attr_('titleHeight');
     this.area.y += this.attr_('titleHeight');
   }
   if (this.attr_('xlabel')) {
-    // TODO(danvk): make this a parameter
     this.area.h -= this.attr_('xLabelHeight');
   }
   if (this.attr_('ylabel')) {
-    var yLabelWidth = 16;
-    this.area.x += this.attr_('yLabelWidth');
-    this.area.w -= this.attr_('yLabelWidth');
+    // 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";
@@ -661,8 +660,10 @@ DygraphCanvasRenderer.prototype._renderChartLabels = function() {
     div.style.textAlign = 'center';
     div.style.fontSize = (this.attr_('titleHeight') - 2) + 'px';
     div.style.fontWeight = 'bold';
-    // div.style.border = '1px solid black';
-    div.innerHTML = this.attr_('title');
+    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;
   }
@@ -676,8 +677,11 @@ DygraphCanvasRenderer.prototype._renderChartLabels = function() {
     div.style.height = this.attr_('xLabelHeight') + 'px';
     div.style.textAlign = 'center';
     div.style.fontSize = (this.attr_('xLabelHeight') - 2) + 'px';
-    // div.style.border = '1px solid black';
-    div.innerHTML = this.attr_('xlabel');
+
+    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;
   }
@@ -689,6 +693,7 @@ DygraphCanvasRenderer.prototype._renderChartLabels = function() {
       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;
@@ -696,11 +701,9 @@ DygraphCanvasRenderer.prototype._renderChartLabels = function() {
     div.style.width = box.width + 'px';
     div.style.height = box.height + 'px';
     div.style.fontSize = (this.attr_('yLabelWidth') - 2) + 'px';
-    // div.style.border = '1px solid black';
 
     var inner_div = document.createElement("div");
     inner_div.style.position = 'absolute';
-    // inner_div.style.border = '1px solid red';
     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';
@@ -712,8 +715,12 @@ DygraphCanvasRenderer.prototype._renderChartLabels = function() {
     inner_div.style.OTransform = 'rotate(-90deg)';       // Opera
     inner_div.style.filter =
      'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
-    inner_div.innerHTML = this.attr_('ylabel');
 
+    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;
diff --git a/dygraph.js b/dygraph.js
index 9cbc50e..faf77e4 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -4110,7 +4110,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": {
@@ -4143,12 +4143,49 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "type": "float",
     "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."
   }
 }
 ;  // </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() {
@@ -4157,6 +4194,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
   var valid_cats = [ 
    'Annotations',
    'Axis display',
+   'Chart labels',
    'CSV parsing',
    'Callbacks',
    'Data Line display',
diff --git a/tests/styled-chart-labels.html b/tests/styled-chart-labels.html
new file mode 100644
index 0000000..f3d0785
--- /dev/null
+++ b/tests/styled-chart-labels.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>two series</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+    <script type="text/javascript" src="../dygraph-canvas.js"></script>
+    <script type="text/javascript" src="../dygraph.js"></script>
+    <script type="text/javascript" src="data.js"></script>
+    <style type="text/css">
+    .dygraph-label {
+      /* This applies to the title, x-axis label and y-axis label */
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    .dygraph-title {
+      /* This rule only applies to the chart title */
+      font-size: 24px;
+      text-shadow: gray 2px 2px 2px;  /* color, delta-x, delta-y, blur radius */
+    }
+    .dygraph-ylabel {
+      /* This rule only applies to the y-axis label */
+      font-size: 18px;
+      text-shadow: gray -2px 2px 2px;  /* (offsets are in a rotated frame) */
+    }
+    </style>
+  </head>
+  <body>
+    <div id="div_g" style="width:600px; height:300px;"></div>
+
+    <p>Each chart label is styled independently. View source to see how it
+    works.</p>
+
+    <script type="text/javascript">
+      g = new Dygraph(
+            document.getElementById("div_g"),
+            data, {
+              rollPeriod: 7,
+              legend: 'always',
+              title: 'High and Low Temperatures',
+              titleHeight: 32,
+              ylabel: 'Temperature (F)',
+              xlabel: 'Date (Pacific Time Zone)',
+              labelsDivStyles: {
+                'text-align': 'right',
+                'background': 'none'
+              },
+              strokeWidth: 1.5
+            }
+          );
+    </script>
+  </body>
+</html>
-- 
2.7.4