UNPKG

30.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en"><head>
3 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta name="description" content="">
7 <meta name="author" content="">
8 <link rel="icon" HREF="favicon.ico">
9 <title>graph3d - vis.js - A dynamic, browser based visualization library.</title>
10
11 <!-- Bootstrap core CSS -->
12 <link href="../css/bootstrap.css" rel="stylesheet">
13 <!-- Tipue vendor css -->
14 <link href="../css/tipuesearch.css" rel="stylesheet">
15
16 <link href="../css/style.css" rel="stylesheet">
17
18
19 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
20 <!--[if lt IE 9]>
21 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
22 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
23 <![endif]-->
24
25
26 <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
27 <script type="text/javascript" src="../js/prettify/prettify.js"></script>
28
29 <script src="../js/smooth-scroll.min.js"></script>
30 <script language="JavaScript">
31 smoothScroll.init();
32 </script>
33
34 <script type="text/javascript" src="../js/toggleTable.js"></script>
35</head>
36<body onload="prettyPrint();">
37
38<div class="navbar-wrapper">
39 <div class="container">
40 <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
41 <div class="container">
42 <div class="navbar-header">
43 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
44 aria-expanded="false" aria-controls="navbar">
45 <span class="sr-only">Toggle navigation</span>
46 <span class="icon-bar"></span>
47 <span class="icon-bar"></span>
48 <span class="icon-bar"></span>
49 </button>
50 <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
51 </div>
52 <div id="navbar" class="navbar-collapse collapse">
53 <ul class="nav navbar-nav">
54 </ul>
55 <form class="navbar-form navbar-right" role="search">
56 <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords">
57 <button type="submit" class="btn btn-default">Go!</button>
58 </form>
59 <div id="search-results-wrapper" class="panel panel-default">
60 <div class="panel-body">
61 <div id="tipue_search_content"></div>
62 </div>
63 </div>
64 <div id="keyword-info" class="panel panel-success">
65 <div class="panel-body">
66 Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence!
67 </div>
68 </div>
69 </div>
70 </div>
71 </nav>
72 </div>
73</div>
74
75<div class="container full">
76 <h1>Graph3d</h1>
77
78 <h2 id="Overview">Overview</h2>
79 <p>
80 Graph3d is an interactive visualization chart to draw data in a three dimensional
81 graph. You can freely move and zoom in the graph by dragging and scrolling in the
82 window. Graph3d also supports animation of a graph.
83 </p>
84 <p>
85 Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
86 to render graphs, and can render up to a few thousands of data points smoothly.
87 </p>
88
89 <h2 id="Contents">Contents</h2>
90 <ul>
91 <li><a href="#Overview">Overview</a></li>
92 <li><a href="#Loading">Loading</a></li>
93 <li><a href="#Data_Format">Data Format</a></li>
94 <li><a href="#Configuration_Options">Configuration Options</a></li>
95 <li><a href="#Methods">Methods</a></li>
96 <li><a href="#Events">Events</a></li>
97 <li><a href="#Data_Policy">Data Policy</a></li>
98 </ul>
99
100 <h2 id="Example">Example</h2>
101 <p>
102 The following code shows how to create a Graph3d and provide it with data.
103 More examples can be found in the <a href="../../examples/graph3d/">examples</a> directory.
104 </p>
105
106<pre class="prettyprint lang-html">
107&lt;!DOCTYPE HTML&gt;
108&lt;html&gt;
109&lt;head&gt;
110 &lt;title&gt;Graph 3D demo&lt;/title&gt;
111
112 &lt;style&gt;
113 body {font: 10pt arial;}
114 &lt;/style&gt;
115
116 &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
117
118 &lt;script type="text/javascript"&gt;
119 var data = null;
120 var graph = null;
121
122 function custom(x, y) {
123 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
124 }
125
126 // Called when the Visualization API is loaded.
127 function drawVisualization() {
128 // Create and populate a data table.
129 var data = new vis.DataSet();
130 // create some nice looking data with sin/cos
131 var steps = 50; // number of datapoints will be steps*steps
132 var axisMax = 314;
133 var axisStep = axisMax / steps;
134 for (var x = 0; x &lt; axisMax; x+=axisStep) {
135 for (var y = 0; y &lt; axisMax; y+=axisStep) {
136 var value = custom(x, y);
137 data.add({
138 x: x,
139 y: y,
140 z: value,
141 style: value
142 });
143 }
144 }
145
146 // specify options
147 var options = {
148 width: '600px',
149 height: '600px',
150 style: 'surface',
151 showPerspective: true,
152 showGrid: true,
153 showShadow: false,
154 keepAspectRatio: true,
155 verticalRatio: 0.5
156 };
157
158 // create a graph3d
159 var container = document.getElementById('mygraph');
160 graph3d = new vis.Graph3d(container, data, options);
161 }
162 &lt;/script&gt;
163&lt;/head&gt;
164
165&lt;body onload="drawVisualization();"&gt;
166 &lt;div id="mygraph"&gt;&lt;/div&gt;
167&lt;/body&gt;
168&lt;/html&gt;
169
170</pre>
171
172
173 <h2 id="Loading">Loading</h2>
174
175 <p>
176 The class name of the Graph3d is <code>vis.Graph3d</code>.
177 When constructing a Graph3d, an HTML DOM container must be provided to attach
178 the graph to. Optionally, data and options can be provided.
179 Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
180 section <a href="#Data_Format">Data Format</a>.
181 Options is a name-value map in the JSON format. The available options
182 are described in section <a href="#Configuration_Options">Configuration Options</a>.
183 </p>
184 <pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
185
186 <p>
187 Data and options can be set or changed later on using the functions
188 <code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
189 </p>
190
191 <h2 id="Data_Format">Data Format</h2>
192 <p>
193 Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> (offering 2 way data binding), or a <code>DataView</code> (offering 1 way data binding).
194 JSON objects are added to this DataSet by using the <code>add()</code> function.
195 Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
196 and can optionally have a property <code>style</code> and <code>filter</code>.
197
198 <h3>Definition</h3>
199 <p>
200 The DataSet JSON objects are defined as:
201 </p>
202
203 <table class="properties">
204 <tr>
205 <th>Name</th>
206 <th>Type</th>
207 <th>Required</th>
208 <th>Description</th>
209 </tr>
210 <tr>
211 <td>x</td>
212 <td>number</td>
213 <td>yes</td>
214 <td>Location on the x-axis.</td>
215 </tr>
216 <tr>
217 <td>y</td>
218 <td>number</td>
219 <td>yes</td>
220 <td>Location on the y-axis.</td>
221 </tr>
222 <tr>
223 <td>z</td>
224 <td>number</td>
225 <td>yes</td>
226 <td>Location on the z-axis.</td>
227 </tr>
228 <tr>
229 <td>style</td>
230 <td>number</td>
231 <td>no</td>
232 <td>The data value, required for graph styles <code>dot-color</code> and
233 <code>dot-size</code>.
234 </td>
235 </tr>
236 <tr>
237 <td>filter</td>
238 <td>*</td>
239 <td>no</td>
240 <td>Filter values used for the animation.
241 This column may have any type, such as a number, string, or Date.</td>
242 </tr>
243 </table>
244
245
246
247 <h2 id="Configuration_Options">Configuration Options</h2>
248
249 <p>
250 Options can be used to customize the graph. Options are defined as a JSON object.
251 All options are optional.
252 </p>
253
254<pre class="prettyprint lang-js">
255var options = {
256 width: '100%',
257 height: '400px',
258 style: 'surface'
259};
260</pre>
261
262 <p>
263 The following options are available.
264 </p>
265
266 <table class="options" id="optionTable">
267 <tr>
268 <th>Name</th>
269 <th>Type</th>
270 <th>Default</th>
271 <th>Description</th>
272 </tr>
273
274 <tr>
275 <td>animationInterval</td>
276 <td>number</td>
277 <td>1000</td>
278 <td>The animation interval in milliseconds. This determines how fast
279 the animation runs.</td>
280 </tr>
281 <tr>
282 <td>animationPreload</td>
283 <td>boolean</td>
284 <td>false</td>
285 <td>If false, the animation frames are loaded as soon as they are requested.
286 if <code>animationPreload</code> is true, the graph will automatically load
287 all frames in the background, resulting in a smoother animation as soon as
288 all frames are loaded. The load progress is shown on screen.</td>
289 </tr>
290 <tr>
291 <td>animationAutoStart</td>
292 <td>boolean</td>
293 <td>false</td>
294 <td>If true, the animation starts playing automatically after the graph
295 is created.</td>
296 </tr>
297
298 <tr>
299 <td>axisColor</td>
300 <td>string</td>
301 <td>'#4D4D4D'</td>
302 <td>The color of the axis lines and the text along the axis.</td>
303 </tr>
304
305 <tr class='toggle collapsible' onclick="toggleTable('optionTable','backgroundColor', this);">
306 <td><span parent="backgroundColor" class="right-caret"></span> backgroundColor</td>
307 <td>string or Object</td>
308 <td>Object</td>
309 <td>The background color for the main area of the chart.
310 Can be either a simple HTML color string, for example: 'red' or '#00cc00',
311 or an object with the following properties.</td>
312 </tr>
313 <tr parent="backgroundColor" class="hidden">
314 <td class="indent">backgroundColor.fill</td>
315 <td>string</td>
316 <td>'white'</td>
317 <td>The chart fill color, as an HTML color string.</td>
318 </tr>
319 <tr parent="backgroundColor" class="hidden">
320 <td class="indent">backgroundColor.stroke</td>
321 <td>string</td>
322 <td>'gray'</td>
323 <td>The color of the chart border, as an HTML color string.</td>
324 </tr>
325 <tr>
326 <tr parent="backgroundColor" class="hidden">
327 <td class="indent">backgroundColor.strokeWidth</td>
328 <td>number</td>
329 <td>1</td>
330 <td>The border width, in pixels.</td>
331 </tr>
332
333 <tr class='toggle collapsible' onclick="toggleTable('optionTable','cameraPosition', this);">
334 <td><span parent="cameraPosition" class="right-caret"></span> cameraPosition</td>
335 <td>Object</td>
336 <td>Object</td>
337 <td>Set the initial rotation and position of the camera.
338 All parameters are optional.
339 </tr>
340 <tr parent="cameraPosition" class="hidden">
341 <td class="indent">cameraPosition.horizontal</td>
342 <td>number</td>
343 <td>1.0</td>
344 <td>Value in radians. It can have any
345 value, but is normally in the range of 0 and 2*Pi.</td>
346 </tr>
347 <tr parent="cameraPosition" class="hidden">
348 <td class="indent">cameraPosition.vertical</td>
349 <td>number</td>
350 <td>0.5</td>
351 <td>Value in radians between 0 and 0.5*Pi.</td>
352 </tr>
353 <tr parent="cameraPosition" class="hidden">
354 <td class="indent">cameraPosition.distance</td>
355 <td>number</td>
356 <td>1.7</td>
357 <td>The (normalized) distance from the
358 camera to the center of the graph, in the range of 0.71 to 5.0. A
359 larger distance puts the graph further away, making it smaller.</p>
360 </tr>
361
362 <tr class='toggle collapsible' onclick="toggleTable('optionTable','dataColor', this);">
363 <td><span parent="dataColor" class="right-caret"></span> dataColor</td>
364 <td>string or object</td>
365 <td>Object</td>
366 <td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
367 </tr>
368 <tr parent="dataColor" class="hidden">
369 <td class="indent">dataColor.fill</td>
370 <td>string</td>
371 <td>'#7DC1FF'</td>
372 <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
373 </tr>
374 <tr parent="dataColor" class="hidden">
375 <td class="indent">dataColor.stroke</td>
376 <td>string</td>
377 <td>'#3267D2'</td>
378 <td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
379 </tr>
380 <tr parent="dataColor" class="hidden">
381 <td class="indent">dataColor.strokeWidth</td>
382 <td>number</td>
383 <td>1</td>
384 <td>The line width of dots, bars and lines. Applicable for all styles.</td>
385 </tr>
386
387 <tr>
388 <td>dotSizeRatio</td>
389 <td>number</td>
390 <td>0.02</td>
391 <td>Ratio of the size of the dots with respect to the width of the graph.</td>
392 </tr>
393
394 <tr>
395 <td>dotSizeMinFraction</td>
396 <td>number</td>
397 <td>0.5</td>
398 <td>Size of minimum-value dot as a fraction of dotSizeRatio.
399 Applicable when using style <code>dot-size</code>.</td>
400 </td>
401 </tr>
402
403 <tr>
404 <td>dotSizeMaxFraction</td>
405 <td>number</td>
406 <td>2.5</td>
407 <td>Size of maximum-value dot as a fraction of dotSizeRatio.
408 Applicable when using style <code>dot-size</code>.</td>
409 </td>
410 </tr>
411
412 <tr>
413 <td>gridColor</td>
414 <td>string</td>
415 <td>'#D3D3D3'</td>
416 <td>The color of the grid lines.</td>
417 </tr>
418
419 <tr>
420 <td>height</td>
421 <td>string</td>
422 <td>'400px'</td>
423 <td>The height of the graph in pixels or as a percentage.</td>
424 </tr>
425
426 <tr>
427 <td>keepAspectRatio</td>
428 <td>boolean</td>
429 <td>true</td>
430 <td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
431 keep their aspect ratio. If false, the axes are scaled such that they
432 both have the same, maximum with.</td>
433 </tr>
434
435 <tr>
436 <td>onclick</td>
437 <td>function</td>
438 <td>none</td>
439 <td>Event handler for a click event with signature <code>function onclick(point)</code>.<br>
440 Parameter <code>point</code> contains data for the nearest graph element relative to the click in
441 the line of sight. It is an object with the fields:
442 <ul>
443 <li><code>id </code> - id of nearest node to the click</li>
444 <li><code>x </code> - x-coordinate in graph units</li>
445 <li><code>y </code> - y-coordinate in graph units</li>
446 <li><code>z </code> - z-coordinate in graph units</li>
447 <li><code>style</code> - if present, the data value for this point</li>
448 </ul>
449
450 </td>
451 </tr>
452
453 <tr>
454 <td>showAnimationControls</td>
455 <td>boolean</td>
456 <td>true</td>
457 <td>If true, animation controls are created at the bottom of the Graph.
458 The animation controls consists of buttons previous, start/stop, next,
459 and a slider showing the current frame.
460 Only applicable when the provided data contains an animation.</td>
461 </tr>
462 <tr>
463 <td>showGrid</td>
464 <td>boolean</td>
465 <td>true</td>
466 <td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
467 graph).</td>
468 </tr>
469 <tr>
470 <td>showXAxis</td>
471 <td>boolean</td>
472 <td>true</td>
473 <td>If true, X axis and X axis labels are drawn.</td>
474 </tr>
475 <tr>
476 <td>showYAxis</td>
477 <td>boolean</td>
478 <td>true</td>
479 <td>If true, Y axis and Y axis labels are drawn.</td>
480 </tr>
481 <tr>
482 <td>showZAxis</td>
483 <td>boolean</td>
484 <td>true</td>
485 <td>If true, Z axis and Z axis labels are drawn.</td>
486 </tr>
487 <tr>
488 <td>showPerspective</td>
489 <td>boolean</td>
490 <td>true</td>
491 <td>If true, the graph is drawn in perspective: points and lines which
492 are further away are drawn smaller.
493 Note that the graph currently does not support a gray colored bottom side
494 when drawn in perspective.
495 </td>
496 </tr>
497 <tr>
498 <td>showLegend</td>
499 <td>boolean</td>
500 <td>none</td>
501 <td>If true, a legend is drawn for the graph (if the graph type supports it).
502 By default a legend is drawn for dot and dot-color style graphs.
503 </td>
504 </tr>
505 <tr>
506 <td>showShadow</td>
507 <td>boolean</td>
508 <td>false</td>
509 <td>Show shadow on the graph.</td>
510 </tr>
511 <tr>
512 <td>style</td>
513 <td>string</td>
514 <td>'dot'</td>
515 <td>The style of the 3d graph. Available styles:
516 <code>bar</code>,
517 <code>bar-color</code>,
518 <code>bar-size</code>,
519 <code>dot</code>,
520 <code>dot-line</code>,
521 <code>dot-color</code>,
522 <code>dot-size</code>,
523 <code>line</code>,
524 <code>grid</code>,
525 or <code>surface</code></td>
526 </tr>
527
528 <tr>
529 <td>tooltip</td>
530 <td>boolean | function</td>
531 <td>false</td>
532 <td>Show a tooltip showing the values of the hovered data point.
533 The contents of the tooltip can be customized by providing a callback
534 function as <code>tooltip</code>. In this case the function is called
535 with an object containing parameters <code>x</code>,
536 <code>y</code>, <code>z</code>, and <code>data</code>
537 (the source JS object for the point) as an argument,
538 and must return a string which may contain HTML.
539 </td>
540 </tr>
541
542 <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltipStyle', this);">
543 <td><span parent="tooltipStyle" class="right-caret"></span> tooltipStyle</td>
544 <td>Object</td>
545 <td>Object</td>
546 </td>
547 <td>Tooltip style properties.
548 Provided properties will be merged with the default object.
549 </td>
550 </tr>
551 <!-- Can't define separate entries for content, line and dot objects here,
552 because toggleTable() can't handle multiple levels of collapsibles -->
553 <tr parent="tooltipStyle" class="hidden">
554 <td class="indent">tooltipStyle.content.padding</td>
555 <td>string</td>
556 <td>'10px'</td>
557 <td></td>
558 </tr>
559 <tr parent="tooltipStyle" class="hidden">
560 <td class="indent">tooltipStyle.content.border</td>
561 <td>string</td>
562 <td>'1px solid #4d4d4d'</td>
563 <td></td>
564 </tr>
565 <tr parent="tooltipStyle" class="hidden">
566 <td class="indent">tooltipStyle.content.color</td>
567 <td>string</td>
568 <td>'#1a1a1a'</td>
569 <td></td>
570 </tr>
571 <tr parent="tooltipStyle" class="hidden">
572 <td class="indent">tooltipStyle.content.background</td>
573 <td>string</td>
574 <td>'rgba(255,255,255,0.7)'</td>
575 <td></td>
576 </tr>
577 <tr parent="tooltipStyle" class="hidden">
578 <td class="indent">tooltipStyle.content.borderRadius</td>
579 <td>string</td>
580 <td>'2px'</td>
581 <td></td>
582 </tr>
583 <tr parent="tooltipStyle" class="hidden">
584 <td class="indent">tooltipStyle.content.boxShadow</td>
585 <td>string</td>
586 <td>'5px 5px 10px rgba(128,128,128,0.5)'</td>
587 <td></td>
588 </tr>
589 <tr parent="tooltipStyle" class="hidden">
590 <td class="indent">tooltipStyle.line.height</td>
591 <td>string</td>
592 <td>'40px'</td>
593 <td></td>
594 </tr>
595 <tr parent="tooltipStyle" class="hidden">
596 <td class="indent">tooltipStyle.line.width</td>
597 <td>string</td>
598 <td>'0'</td>
599 <td></td>
600 </tr>
601 <tr parent="tooltipStyle" class="hidden">
602 <td class="indent">tooltipStyle.line.borderLeft</td>
603 <td>string</td>
604 <td>'1px solid #4d4d4d'</td>
605 <td></td>
606 </tr>
607 <tr parent="tooltipStyle" class="hidden">
608 <td class="indent">tooltipStyle.dot.height</td>
609 <td>string</td>
610 <td>'0'</td>
611 <td></td>
612 </tr>
613 <tr parent="tooltipStyle" class="hidden">
614 <td class="indent">tooltipStyle.dot.width</td>
615 <td>string</td>
616 <td>'0'</td>
617 <td></td>
618 </tr>
619 <tr parent="tooltipStyle" class="hidden">
620 <td class="indent">tooltipStyle.dot.border</td>
621 <td>string</td>
622 <td>'5px solid #4d4d4d'</td>
623 <td></td>
624 </tr>
625 <tr parent="tooltipStyle" class="hidden">
626 <td class="indent">tooltipStyle.dot.borderRadius</td>
627 <td>string</td>
628 <td>'5px'</td>
629 <td></td>
630 </tr>
631
632 <tr>
633 <td>valueMax</td>
634 <td>number</td>
635 <td>none</td>
636 <td>The maximum value for the value-axis. Only available in combination
637 with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
638 </tr>
639 <tr>
640 <td>valueMin</td>
641 <td>number</td>
642 <td>none</td>
643 <td>The minimum value for the value-axis. Only available in combination
644 with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
645 </tr>
646 <tr>
647 <td>verticalRatio</td>
648 <td>number</td>
649 <td>0.5</td>
650 <td>A value between 0.1 and 1.0. This scales the vertical size of the graph
651 When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
652 the graph will be a cube.</td>
653 </tr>
654
655 <tr>
656 <td>width</td>
657 <td>string</td>
658 <td>'400px'</td>
659 <td>The width of the graph in pixels or as a percentage.</td>
660 </tr>
661
662 <tr>
663 <td>xBarWidth</td>
664 <td>number</td>
665 <td>none</td>
666 <td>The width of bars in x direction. By default, the width is equal to the smallest distance
667 between the data points.
668 Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
669 </tr>
670
671 <tr>
672 <td>xCenter</td>
673 <td>string</td>
674 <td>'55%'</td>
675 <td>The horizontal center position of the graph, as a percentage or in
676 pixels.</td>
677 </tr>
678 <tr>
679 <td>xMax</td>
680 <td>number</td>
681 <td>from data</td>
682 <td>The maximum value for the x-axis.
683 If not set, the largest value for x in the data set is used.
684 </td>
685 </tr>
686 <tr>
687 <td>xMin</td>
688 <td>number</td>
689 <td>from data</td>
690 <td>The minimum value for the x-axis.
691 If not set, the smallest value for x in the data set is used.
692 </td>
693 </tr>
694 <tr>
695 <td>xStep</td>
696 <td>number</td>
697 <td>none</td>
698 <td>Step size for the grid on the x-axis.</td>
699 </tr>
700 <tr>
701 <td>xValueLabel</td>
702 <td>function</td>
703 <td>none</td>
704 <td>A function for custom formatting of the labels along the x-axis,
705 for example <code>function (x) {return (x * 100) + '%'}</code>.
706 </td>
707 </tr>
708
709 <tr>
710 <td>yBarWidth</td>
711 <td>number</td>
712 <td>none</td>
713 <td>The width of bars in y direction. By default, the width is equal to the smallest distance
714 between the data points.
715 Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
716 </tr>
717
718 <tr>
719 <td>yCenter</td>
720 <td>string</td>
721 <td>'45%'</td>
722 <td>The vertical center position of the graph, as a percentage or in
723 pixels.</td>
724 </tr>
725 <tr>
726 <td>yMax</td>
727 <td>number</td>
728 <td>from data</td>
729 <td>The maximum value for the y-axis.
730 If not set, the largest value for y in the data set is used.
731 </td>
732 </tr>
733 <tr>
734 <td>yMin</td>
735 <td>number</td>
736 <td>from data</td>
737 <td>The minimum value for the y-axis.
738 If not set, the smallest value for y in the data set is used.
739 </td>
740 </tr>
741 <tr>
742 <td>yStep</td>
743 <td>number</td>
744 <td>none</td>
745 <td>Step size for the grid on the y-axis.</td>
746 </tr>
747 <tr>
748 <td>yValueLabel</td>
749 <td>function</td>
750 <td>none</td>
751 <td>A function for custom formatting of the labels along the y-axis,
752 for example <code>function (y) {return (y * 100) + '%'}</code>.
753 </td>
754 </tr>
755
756 <tr>
757 <td>zMax</td>
758 <td>number</td>
759 <td>from data</td>
760 <td>The maximum value for the z-axis.
761 If not set, the largest value for z in the data set is used.
762 </td>
763 </tr>
764 <tr>
765 <td>zMin</td>
766 <td>number</td>
767 <td>from data</td>
768 <td>The minimum value for the z-axis.
769 If not set, the smallest value for z in the data set is used.
770 </td>
771 </tr>
772 <tr>
773 <td>zStep</td>
774 <td>number</td>
775 <td>none</td>
776 <td>Step size for the grid on the z-axis.</td>
777 </tr>
778 <tr>
779 <td>zValueLabel</td>
780 <td>function</td>
781 <td>none</td>
782 <td>A function for custom formatting of the labels along the z-axis,
783 for example <code>function (z) {return (z * 100) + '%'}</code>.
784 </td>
785 </tr>
786
787 <tr>
788 <td>xLabel</td>
789 <td>String</td>
790 <td>x</td>
791 <td>Label on the X axis.</td>
792 </tr>
793 <tr>
794 <td>yLabel</td>
795 <td>String</td>
796 <td>y</td>
797 <td>Label on the Y axis.</td>
798 </tr>
799 <tr>
800 <td>zLabel</td>
801 <td>String</td>
802 <td>z</td>
803 <td>Label on the Z axis.</td>
804 </tr>
805 <tr>
806 <td>filterLabel</td>
807 <td>String</td>
808 <td>time</td>
809 <td>Label for the filter column.</td>
810 </tr>
811 <tr>
812 <td>legendLabel</td>
813 <td>String</td>
814 <td>value</td>
815 <td>Label for the style description.</td>
816 </tr>
817 </table>
818
819
820 <h2 id="Methods">Methods</h2>
821 <p>
822 Graph3d supports the following methods.
823 </p>
824
825 <table class="methods">
826 <tr>
827 <th>Method</th>
828 <th>Return Type</th>
829 <th>Description</th>
830 </tr>
831
832 <tr>
833 <td>animationStart()</td>
834 <td>none</td>
835 <td>Start playing the animation.
836 Only applicable when animation data is available.</td>
837 </tr>
838
839 <tr>
840 <td>animationStop()</td>
841 <td>none</td>
842 <td>Stop playing the animation.
843 Only applicable when animation data is available.</td>
844 </tr>
845
846 <tr>
847 <td>getCameraPosition()</td>
848 <td>An object with parameters <code>horizontal</code>,
849 <code>vertical</code> and <code>distance</code></td>
850 <td>Returns an object with parameters <code>horizontal</code>,
851 <code>vertical</code> and <code>distance</code>,
852 which each one of them is a number, representing the rotation and position
853 of the camera.</td>
854 </tr>
855
856 <tr>
857 <td>redraw()</td>
858 <td>none</td>
859 <td>Redraw the graph. Useful after the camera position is changed externally,
860 when data is changed, or when the layout of the webpage changed.</td>
861 </tr>
862
863 <tr>
864 <td>setData(data)</td>
865 <td>none</td>
866 <td>Replace the data in the Graph3d.</td>
867 </tr>
868
869 <tr>
870 <td>setOptions(options)</td>
871 <td>none</td>
872 <td>Update options of Graph3d.
873 The provided options will be merged with current options.</td>
874 </tr>
875
876 <tr>
877 <td>setSize(width, height)</td>
878 <td>none</td>
879 <td>Parameters <code>width</code> and <code>height</code> are strings,
880 containing a new size for the graph. Size can be provided in pixels
881 or in percentages.</td>
882 </tr>
883
884 <tr>
885 <td>setCameraPosition (pos)</td>
886 <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
887 <td>Set the rotation and position of the camera. Parameter <code>pos</code>
888 is an object which contains three parameters: <code>horizontal</code>,
889 <code>vertical</code>, and <code>distance</code>.
890 Parameter <code>horizontal</code> is a value in radians and can have any
891 value (but normally in the range of 0 and 2*Pi).
892 Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
893 Parameter <code>distance</code> is the (normalized) distance from the
894 camera to the center of the graph, in the range of 0.71 to 5.0. A
895 larger distance puts the graph further away, making it smaller.
896 All parameters are optional.
897 </td>
898 </tr>
899
900 </table>
901
902 <h2 id="Events">Events</h2>
903 <p>
904 Graph3d fires events after the camera position has been changed.
905 The event can be catched by creating a listener.
906 Here an example on how to catch a <code>cameraPositionChange</code> event.
907 </p>
908
909<pre class="prettyprint lang-js">
910function onCameraPositionChange(event) {
911 alert('The camera position changed to:\n' +
912 'Horizontal: ' + event.horizontal + '\n' +
913 'Vertical: ' + event.vertical + '\n' +
914 'Distance: ' + event.distance);
915}
916// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
917graph3d.on('cameraPositionChange', onCameraPositionChange);
918</pre>
919
920 <p>
921 The following events are available.
922 </p>
923
924 <table class="events">
925 <tr>
926 <th>name</th>
927 <th>Properties</th>
928 <th>Description</th>
929 </tr>
930
931 <tr>
932 <td>cameraPositionChange</td>
933 <td>
934 <ul>
935 <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
936 <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
937 <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
938 </ul>
939 </td>
940 <td>The camera position changed. Fired after the user modified the camera position
941 by moving (dragging) the graph, or by zooming (scrolling),
942 but not after a call to <code>setCameraPosition</code> method.
943 The new camera position can be retrieved by calling the method
944 <code>getCameraPosition</code>.</td>
945 </tr>
946 </table>
947
948 <h2 id="Data_Policy">Data Policy</h2>
949 <p>
950 All code and data are processed and rendered in the browser. No data is sent to any server.
951 </p>
952
953</div>
954
955<!-- Bootstrap core JavaScript
956================================================== -->
957<!-- Placed at the end of the document so the pages load faster -->
958<script src="../js/jquery.min.js"></script>
959<script src="../js/bootstrap.min.js"></script>
960<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
961<script src="../js/ie10-viewport-bug-workaround.js"></script>
962<!-- jquery extensions -->
963<script src="../js/jquery.highlight.js"></script>
964<script src="../js/jquery.url.min.js"></script>
965<!-- Tipue vendor js -->
966<script src="../js/tipuesearch.config.js"></script>
967<script src="../js/tipuesearch.js"></script>
968<!-- controller -->
969<script src="../js/main.js"></script>