<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>
</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>
* 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).
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;
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 } );
};
--- /dev/null
+<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>
projects / dygraphs.git / commitdiff