Skip to content

Commit 226465e

Browse files
josdejongjosdejong
committed
Tooltip implemented and mainly working
1 parent b615a93 commit 226465e

File tree

4 files changed

+339
-5
lines changed

4 files changed

+339
-5
lines changed

‎js/src/graph3d/doc/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,19 @@ <h2 id="Configuration_Options">Configuration Options</h2>
491491
or <code>surface</code></td>
492492
</tr>
493493

494+
<tr>
495+
<td>tooltip</td>
496+
<td>boolean | function</td>
497+
<td>true</td>
498+
<td>Show a tooltip showing the values of the hovered data point.
499+
The contents of the tooltip can be customized by providing a callback
500+
function as <code>tooltip</code>. In this case the function is called
501+
with an object containing parameters <code>x</code>,
502+
<code>y</code>, and <code>z</code> argument,
503+
and must return a string which may contain HTML.
504+
</td>
505+
</tr>
506+
494507
<tr>
495508
<td>valueMax</td>
496509
<td>number</td>

‎js/src/graph3d/examples/example15_tooltips.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html>
3+
<head>
4+
<title>Graph 3D tooltips</title>
5+
6+
<style>
7+
body {font: 10pt arial;}
8+
</style>
9+
10+
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
11+
<script type="text/javascript" src="../graph3d.js"></script>
12+
13+
<script type="text/javascript">
14+
var data = null;
15+
var graph = null;
16+
17+
google.load("visualization", "1");
18+
19+
// Set callback to run when API is loaded
20+
google.setOnLoadCallback(drawVisualization);
21+
22+
function custom(x, y) {
23+
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
24+
}
25+
26+
// Called when the Visualization API is loaded.
27+
function drawVisualization() {
28+
var style = document.getElementById("style").value;
29+
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
30+
31+
// Create and populate a data table.
32+
data = new google.visualization.DataTable();
33+
data.addColumn('number', 'x');
34+
data.addColumn('number', 'y');
35+
data.addColumn('number', 'z');
36+
if (withValue) data.addColumn('number', 'value');
37+
38+
// create some nice looking data with sin/cos
39+
var steps = 5; // number of datapoints will be steps*steps
40+
var axisMax = 10;
41+
var axisStep = axisMax / steps;
42+
for (var x = 0; x <= axisMax; x+=axisStep) {
43+
for (var y = 0; y <= axisMax; y+=axisStep) {
44+
var z = custom(x,y);
45+
var values = [x, y, z];
46+
if (withValue) {
47+
var value = (y - x);
48+
values.push(value);
49+
}
50+
data.addRow(values);
51+
}
52+
}
53+
54+
// specify options
55+
var options = {
56+
width: "600px",
57+
height: "600px",
58+
style: style,
59+
showPerspective: true,
60+
showGrid: true,
61+
showShadow: false,
62+
63+
// A tooltip can be true, false, or a function returning a string with HTML contents
64+
//tooltip: true,
65+
tooltip: function (point) {
66+
// parameter point contains properties x, y, z
67+
return 'value: <b>' + point.z + '</b>';
68+
},
69+
70+
keepAspectRatio: true,
71+
verticalRatio: 0.5
72+
};
73+
74+
var camera = graph ? graph.getCameraPosition() : null;
75+
76+
// Instantiate our graph object.
77+
graph = new links.Graph3d(document.getElementById('mygraph'));
78+
79+
// Draw our graph with the created data and options
80+
graph.draw(data, options);
81+
82+
if (camera) graph.setCameraPosition(camera); // restore camera position
83+
84+
document.getElementById("style").onchange = drawVisualization;
85+
}
86+
</script>
87+
</head>
88+
89+
<body>
90+
91+
<p>
92+
<label for="style"> Style:
93+
<select id="style">
94+
<option value="bar">bar</option>
95+
<option value="bar-color">bar-color</option>
96+
<option value="bar-size">bar-size</option>
97+
98+
<option value="dot">dot</option>
99+
<option value="dot-line">dot-line</option>
100+
<option value="dot-color">dot-color</option>
101+
<option value="dot-size">dot-size</option>
102+
103+
<option value="grid">grid</option>
104+
<option value="line">line</option>
105+
<option value="surface">surface</option>
106+
</select>
107+
</label>
108+
</p>
109+
110+
<div id="mygraph"></div>
111+
112+
<div id="info"></div>
113+
</body>
114+
</html>

‎js/src/graph3d/examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ <h1>Examples</h1>
2121
<p><a href="example12_datastream.html">example12_datastream.html</a></p>
2222
<p><a href="example13_mobile.html">example13_mobile.html</a></p>
2323
<p><a href="example14_styles.html">example14_styles.html</a></p>
24+
<p><a href="example15_tooltips.html">example15_tooltips.html</a></p>
2425

2526
</div>
2627
</body>

0 commit comments

Comments
 (0)