Merge pull request #353 from fabriziofortino/develop

graph3d: added custom ticks labels for z axis

HISTORY.md

@@ -26,8 +26,8 @@ http://visjs.org
 
 ### Graph3d
 
-- Implemented options `xValueLabel` and `yValueLabel` for custom labels along
-  the x and y axis. Thanks @fabriziofortino.
+- Implemented options `xValueLabel`, `yValueLabel` and `zValueLabel` for custom labels along
+  the x, y, z axis. Thanks @fabriziofortino.
 
 
 ## 2014-09-16, version 3.5.0

docs/graph3d.html

@@ -489,6 +489,14 @@ var options = {
   <td>none</td>
   <td>Step size for the grid on the z-axis.</td>
 </tr>
+<tr>
+  <td>zValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the z-axis,
+    for example <code>function (z) {return (z * 100) + '%'}</code>.
+  </td>
+</tr>
 
 <tr>
   <td>xLabel</td>

examples/graph3d/example12_ticks.html

@@ -14,7 +14,7 @@
     var graph = null;
 
     function custom(x, y) {
-      return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
+      return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10) * 1000;
     }
 
     // Called when the Visualization API is loaded.
@@ -66,6 +66,10 @@
             return value * 10 + '%';
         },
 
+        zValueLabel: function(value) {
+            return value / 1000 + 'K';
+        },
+
         keepAspectRatio: true,
         verticalRatio: 0.5
       };

lib/graph3d/Graph3d.js

@@ -37,8 +37,10 @@ function Graph3d(container, data, options) {
   this.yLabel = 'y';
   this.zLabel = 'z';
 
-  this.xValueLabel = function(v) { return v; };
-  this.yValueLabel = function(v) { return v; };
+  var passValueFn = function(v) { return v; };
+  this.xValueLabel = passValueFn;
+  this.yValueLabel = passValueFn;
+  this.zValueLabel = passValueFn;
   
   this.filterLabel = 'time';
   this.legendLabel = 'value';
@@ -835,6 +837,7 @@ Graph3d.prototype.setOptions = function (options) {
 
     if (options.xValueLabel !== undefined)     this.xValueLabel = options.xValueLabel;
     if (options.yValueLabel !== undefined)     this.yValueLabel = options.yValueLabel;
+    if (options.zValueLabel !== undefined)     this.zValueLabel = options.zValueLabel;
 
     if (options.style !== undefined) {
       var styleNumber = this._getStyleNumber(options.style);
@@ -1270,7 +1273,7 @@ Graph3d.prototype._redrawAxis = function() {
     ctx.textAlign = 'right';
     ctx.textBaseline = 'middle';
     ctx.fillStyle = this.colorAxis;
-    ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
+    ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
 
     step.next();
   }