From: Neal Nelson <neal@makalumedia.com>
Date: Thu, 17 Jun 2010 12:36:56 +0000 (+0200)
Subject: Add yAxisLabelFormatter option and make it's default value yValueFormatter.
X-Git-Tag: v1.0.0~636^2~8
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=84fc6aa72eaae08080d95d56123d495a1cb11cde;p=dygraphs.git

Add yAxisLabelFormatter option and make it's default value yValueFormatter.
---

diff --git a/docs/index.html b/docs/index.html
index a36fd2e..e95d540 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -706,6 +706,16 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
           <td>Function to call to format values along the x axis.
             <div class="tests">Tests: <a href="tests/x-axis-formatter.html">xAxisLabelFormatter</a></div>
           </td>
+        </tr>
+        <tr>
+          <td><strong>yAxisLabelFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td><code>yValueFormatter</code></td>
+          <td>
+            Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified.
+            <div class="tests">Tests: <a href="tests/y-axis-formatter.html">yAxisLabelFormatter</a></div>
+          </td>
+        </tr>
         <tr>
           <td><strong>rightGap</strong></td>
           <td><code>integer</code></td>
@@ -823,6 +833,25 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
           </td>
         </tr>
 
+        <tr>
+          <td><strong>xValueFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td></td>
+          <td>
+            Function to provide a custom display format the X value for mouseover.
+          </td>
+        </tr>
+
+        <tr>
+          <td><strong>yValueFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td>(Round to 2 decimal places)</td>
+          <td>
+            Function to provide a custom display format for the Y value for mouseover.
+            <div class="tests">Tests: <a href="tests/y-axis-formatter.html">yAxisLabelFormatter</a></div>
+          </td>
+        </tr>
+
       </tbody>
     </table>
 
diff --git a/dygraph.js b/dygraph.js
index ee5306c..ee08802 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -1378,10 +1378,12 @@ Dygraph.dateTicker = function(startDate, endDate, self) {
  * Add ticks when the x axis has numbers on it (instead of dates)
  * @param {Number} startDate Start of the date window (millis since epoch)
  * @param {Number} endDate End of the date window (millis since epoch)
+ * @param self
+ * @param {function} formatter: Optional formatter to use for each tick value
  * @return {Array.<Object>} Array of {label, value} tuples.
  * @public
  */
-Dygraph.numericTicks = function(minV, maxV, self) {
+Dygraph.numericTicks = function(minV, maxV, self, formatter) {
   // Basic idea:
   // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
   // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
@@ -1433,7 +1435,12 @@ Dygraph.numericTicks = function(minV, maxV, self) {
   for (var i = 0; i < nTicks; i++) {
     var tickV = low_val + i * scale;
     var absTickV = Math.abs(tickV);
-    var label = Dygraph.round_(tickV, 2);
+    var label;
+    if (formatter != undefined) {
+      label = formatter(tickV);
+    } else {
+      label = Dygraph.round_(tickV, 2);
+    }
     if (k_labels.length) {
       // Round up to an appropriate unit.
       var n = k*k*k*k;
@@ -1458,7 +1465,8 @@ Dygraph.numericTicks = function(minV, maxV, self) {
 Dygraph.prototype.addYTicks_ = function(minY, maxY) {
   // Set the number of ticks so that the labels are human-friendly.
   // TODO(danvk): make this an attribute as well.
-  var ticks = Dygraph.numericTicks(minY, maxY, this);
+  var formatter = this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
+  var ticks = Dygraph.numericTicks(minY, maxY, this, formatter);
   this.layout_.updateOptions( { yAxis: [minY, maxY],
                                 yTicks: ticks } );
 };
diff --git a/tests/y-axis-formatter.html b/tests/y-axis-formatter.html
new file mode 100644
index 0000000..346f319
--- /dev/null
+++ b/tests/y-axis-formatter.html
@@ -0,0 +1,86 @@
+<html>
+    <head>
+        <title>dygraph</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>
+    </head>
+    <body>
+
+        <h1>Potential Y Axis formatting problems for small values</h1>
+
+        <p>The problem using default y axis formatting for very small values:</p>
+        <div id="graph1"></div>
+        <script type="text/javascript">
+            new Dygraph(
+                document.getElementById("graph1"),
+                [
+                    [1, 0.0],
+                    [2, 0.0001],
+                    [3, 0.0002],
+                    [4, 0.0004],
+                    [5, 0.0005]
+                ],
+                {
+                    stepPlot: true,
+                    labels: ["X", "Data"]
+                }
+            );
+        </script>
+
+        <p>The solution using a Y axis formatting function:</p>
+        <div id="graph2"></div>
+        <script type="text/javascript">
+            new Dygraph(
+                document.getElementById("graph2"),
+                [
+                    [1, 0.0],
+                    [2, 0.0001],
+                    [3, 0.0002],
+                    [4, 0.0004],
+                    [5, 0.0005]
+                ],
+                {
+                    stepPlot: true,
+                    yValueFormatter: function(x) {
+                        var shift = Math.pow(10, 5)
+                        return Math.round(x * shift) / shift
+                    },
+                    labels: ["X", "Data"]
+                }
+            );
+        </script>
+
+        <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
+        <div id="graph3"></div>
+        <script type="text/javascript">
+            new Dygraph(
+                document.getElementById("graph3"),
+                [
+                    [1, 0.0],
+                    [2, 0.0001],
+                    [3, 0.0002],
+                    [4, 0.0004],
+                    [5, 0.0005]
+                ],
+                {
+                    stepPlot: true,
+                    yValueFormatter: function(x) {
+                        var shift = Math.pow(10, 5)
+                        return "*" + Math.round(x * shift) / shift
+                    },
+                    yAxisLabelFormatter: function(x) {
+                        var shift = Math.pow(10, 5)
+                        return "+" + Math.round(x * shift) / shift
+                    },
+                    labels: ["X", "Data"]
+                }
+            );
+        </script>
+
+    </body>
+</html>