Browse Source

Add the source data to Point3d objects in Graph3D (#1884)

* Add the source data to Point3d objects in Graph3D; This allows more complex tooltips, using information sent from the server + the source object
* Update PR as requested
* Convert tabs to spaces; Vim config was off, edited in sublime instead
codeClimate
Tom Manderson 8 years ago
committed by Alexander Wunschik
parent
commit
217299ed35
3 changed files with 15 additions and 7 deletions
  1. +2
    -1
      docs/graph3d/index.html
  2. +10
    -4
      examples/graph3d/11_tooltips.html
  3. +3
    -2
      lib/graph3d/Graph3d.js

+ 2
- 1
docs/graph3d/index.html View File

@ -474,7 +474,8 @@ var options = {
The contents of the tooltip can be customized by providing a callback The contents of the tooltip can be customized by providing a callback
function as <code>tooltip</code>. In this case the function is called function as <code>tooltip</code>. In this case the function is called
with an object containing parameters <code>x</code>, with an object containing parameters <code>x</code>,
<code>y</code>, and <code>z</code> argument,
<code>y</code>, <code>z</code>, and <code>data</code>
(the source JS object for the point) as an argument,
and must return a string which may contain HTML. and must return a string which may contain HTML.
</td> </td>
</tr> </tr>

+ 10
- 4
examples/graph3d/11_tooltips.html View File

@ -24,6 +24,11 @@
// Create and populate a data table. // Create and populate a data table.
data = new vis.DataSet(); 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 // create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps var steps = 5; // number of datapoints will be steps*steps
@ -34,10 +39,10 @@
var z = custom(x,y); var z = custom(x,y);
if (withValue) { if (withValue) {
var value = (y - x); 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 { 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 // Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true, //tooltip: true,
tooltip: function (point) { tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
// parameter point contains properties x, y, z, and data
// data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
}, },
keepAspectRatio: true, keepAspectRatio: true,

+ 3
- 2
lib/graph3d/Graph3d.js View File

@ -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 DataView = require('../DataView');
var util = require('../util'); var util = require('../util');
var Point3d = require('./Point3d'); var Point3d = require('./Point3d');
@ -561,6 +560,7 @@ Graph3d.prototype._getDataPoints = function (data) {
point3d.x = x; point3d.x = x;
point3d.y = y; point3d.y = y;
point3d.z = z; point3d.z = z;
point3d.data = data[i];
obj = {}; obj = {};
obj.point = point3d; obj.point = point3d;
@ -594,6 +594,7 @@ Graph3d.prototype._getDataPoints = function (data) {
point.x = data[i][this.colX] || 0; point.x = data[i][this.colX] || 0;
point.y = data[i][this.colY] || 0; point.y = data[i][this.colY] || 0;
point.z = data[i][this.colZ] || 0; point.z = data[i][this.colZ] || 0;
point.data = data[i];
if (this.colValue !== undefined) { if (this.colValue !== undefined) {
point.value = data[i][this.colValue] || 0; point.value = data[i][this.colValue] || 0;

Loading…
Cancel
Save