diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 16467484..429e2a98 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -474,7 +474,8 @@ var options = { The contents of the tooltip can be customized by providing a callback function as tooltip. In this case the function is called with an object containing parameters x, - y, and z argument, + y, z, and data + (the source JS object for the point) as an argument, and must return a string which may contain HTML. diff --git a/examples/graph3d/11_tooltips.html b/examples/graph3d/11_tooltips.html index 508e7e0a..39af19aa 100644 --- a/examples/graph3d/11_tooltips.html +++ b/examples/graph3d/11_tooltips.html @@ -24,6 +24,11 @@ // Create and populate a data table. data = new vis.DataSet(); + var extra_content = [ + 'Arbitrary information', + 'You can access data from the point source object', + 'Tooltip example content', + ]; // create some nice looking data with sin/cos var steps = 5; // number of datapoints will be steps*steps @@ -34,10 +39,10 @@ var z = custom(x,y); if (withValue) { var value = (y - x); - data.add({x:x, y:y, z: z, style:value}); + data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]}); } else { - data.add({x:x, y:y, z: z}); + data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]}); } } } @@ -55,8 +60,9 @@ // Option tooltip can be true, false, or a function returning a string with HTML contents //tooltip: true, tooltip: function (point) { - // parameter point contains properties x, y, z - return 'value: ' + point.z + ''; + // parameter point contains properties x, y, z, and data + // data is the original object passed to the point constructor + return 'value: ' + point.z + '
' + point.data.extra; }, keepAspectRatio: true, diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index f2c17507..01fe7445 100644 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -1,5 +1,4 @@ -var Emitter = require('emitter-component'); -var DataSet = require('../DataSet'); +var Emitter = require('emitter-component'); var DataSet = require('../DataSet'); var DataView = require('../DataView'); var util = require('../util'); var Point3d = require('./Point3d'); @@ -561,6 +560,7 @@ Graph3d.prototype._getDataPoints = function (data) { point3d.x = x; point3d.y = y; point3d.z = z; + point3d.data = data[i]; obj = {}; obj.point = point3d; @@ -594,6 +594,7 @@ Graph3d.prototype._getDataPoints = function (data) { point.x = data[i][this.colX] || 0; point.y = data[i][this.colY] || 0; point.z = data[i][this.colZ] || 0; + point.data = data[i]; if (this.colValue !== undefined) { point.value = data[i][this.colValue] || 0;