UNPKG

3.54 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Graph 3D styles</title>
5
6 <style>
7 body {font: 10pt arial;}
8 </style>
9
10 <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
11
12 <script type="text/javascript">
13 var data = null;
14 var graph = null;
15
16 function custom(x, y) {
17 return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
18 }
19
20 // Called when the Visualization API is loaded.
21 function drawVisualization() {
22 var style = document.getElementById('style').value;
23 var showPerspective = document.getElementById('perspective').checked;
24 var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
25 var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
26 var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
27
28 // Create and populate a data table.
29 data = [];
30
31 // create some nice looking data with sin/cos
32 var steps = 5; // number of datapoints will be steps*steps
33 var axisMax = 10;
34 var axisStep = axisMax / steps;
35 for (var x = 0; x <= axisMax; x+=axisStep) {
36 for (var y = 0; y <= axisMax; y+=axisStep) {
37 var z = custom(x,y);
38 if (withValue) {
39 var value = (y - x);
40 data.push({x:x, y:y, z: z, style:value});
41 }
42 else {
43 data.push({x:x, y:y, z: z});
44 }
45 }
46 }
47
48 // specify options
49 var options = {
50 width: '600px',
51 height: '600px',
52 style: style,
53 xBarWidth: xBarWidth,
54 yBarWidth: yBarWidth,
55 showPerspective: showPerspective,
56 showGrid: true,
57 showShadow: false,
58 keepAspectRatio: true,
59 verticalRatio: 0.5
60 };
61
62 var camera = graph ? graph.getCameraPosition() : null;
63
64 // create our graph
65 var container = document.getElementById('mygraph');
66 graph = new vis.Graph3d(container, data, options);
67
68 if (camera) graph.setCameraPosition(camera); // restore camera position
69
70 document.getElementById('style').onchange = drawVisualization;
71 document.getElementById('perspective').onchange = drawVisualization;
72 document.getElementById('xBarWidth').onchange = drawVisualization;
73 document.getElementById('yBarWidth').onchange = drawVisualization;
74 }
75 </script>
76
77</head>
78
79<body onload="drawVisualization()">
80
81<p>
82 <label for="style"> Style:
83 <select id="style">
84 <option value="bar">bar</option>
85 <option value="bar-color">bar-color</option>
86 <option value="bar-size">bar-size</option>
87
88 <option value="dot">dot</option>
89 <option value="dot-line">dot-line</option>
90 <option value="dot-color">dot-color</option>
91 <option value="dot-size">dot-size</option>
92
93 <option value="grid">grid</option>
94 <option value="line">line</option>
95 <option value="surface">surface</option>
96 </select>
97 </label>
98</p>
99
100<p>
101 <label for="perspective">
102 <input type="checkbox" id="perspective" checked> Show perspective
103 </label>
104</p>
105
106<p>
107 <label for="xBarWidth"> Bar width X:
108 <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
109 </label>
110</p>
111<p>
112 <label for="yBarWidth"> Bar width Y:
113 <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
114 </label>
115</p>
116
117<div id="mygraph"></div>
118
119<div id="info"></div>
120</body>
121</html>