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>