UNPKG

3.78 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Graph 3D tooltips</title>
5
6 <style>
7 body {font: 10pt arial;}
8 div#info {
9 width : 600px;
10 text-align: center;
11 margin-top: 2em;
12 font-size : 1.2em;
13 }
14 </style>
15
16 <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
17
18 <script type="text/javascript">
19 var data = null;
20 var graph = null;
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 vis.DataSet();
33 var extra_content = [
34 'Arbitrary information',
35 'You can access data from the point source object',
36 'Tooltip example content',
37 ];
38
39 // create some nice looking data with sin/cos
40 var steps = 5; // number of datapoints will be steps*steps
41 var axisMax = 10;
42 var axisStep = axisMax / steps;
43 for (var x = 0; x <= axisMax; x+=axisStep) {
44 for (var y = 0; y <= axisMax; y+=axisStep) {
45 var z = custom(x,y);
46 if (withValue) {
47 var value = (y - x);
48 data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]});
49 }
50 else {
51 data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
52 }
53 }
54 }
55
56 // specify options
57 var options = {
58 width: '600px',
59 height: '600px',
60 style: style,
61 showPerspective: true,
62 showLegend: true,
63 showGrid: true,
64 showShadow: false,
65
66 // Option tooltip can be true, false, or a function returning a string with HTML contents
67 tooltip: function (point) {
68 // parameter point contains properties x, y, z, and data
69 // data is the original object passed to the point constructor
70 return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
71 },
72
73 // Tooltip default styling can be overridden
74 tooltipStyle: {
75 content: {
76 background : 'rgba(255, 255, 255, 0.7)',
77 padding : '10px',
78 borderRadius : '10px'
79 },
80 line: {
81 borderLeft : '1px dotted rgba(0, 0, 0, 0.5)'
82 },
83 dot: {
84 border : '5px solid rgba(0, 0, 0, 0.5)'
85 }
86 },
87
88 keepAspectRatio: true,
89 verticalRatio: 0.5
90 };
91
92 var camera = graph ? graph.getCameraPosition() : null;
93
94 // create our graph
95 var container = document.getElementById('mygraph');
96 graph = new vis.Graph3d(container, data, options);
97
98 if (camera) graph.setCameraPosition(camera); // restore camera position
99
100 document.getElementById('style').onchange = drawVisualization;
101 }
102 </script>
103
104</head>
105
106<body onload="drawVisualization()">
107
108<p>
109 <label for="style"> Style:
110 <select id="style">
111 <option value="bar">bar</option>
112 <option value="bar-color">bar-color</option>
113 <option value="bar-size">bar-size</option>
114
115 <option value="dot">dot</option>
116 <option value="dot-line">dot-line</option>
117 <option value="dot-color">dot-color</option>
118 <option value="dot-size">dot-size</option>
119
120 <option value="grid">grid</option>
121 <option value="line">line</option>
122 <option value="surface">surface</option>
123 </select>
124 </label>
125</p>
126
127<div id="mygraph"></div>
128
129<div id="info">Hover the mouse cursor over the graph to see tooltips.</div>
130
131</body>
132</html>