UNPKG

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