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 |
|
12 | <link href="../css/bootstrap.css" rel="stylesheet">
|
13 |
|
14 | <link href="../css/tipuesearch.css" rel="stylesheet">
|
15 |
|
16 | <link href="../css/style.css" rel="stylesheet">
|
17 |
|
18 |
|
19 |
|
20 | |
21 |
|
22 |
|
23 |
|
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 | <!DOCTYPE HTML>
|
108 | <html>
|
109 | <head>
|
110 | <title>Graph 3D demo</title>
|
111 |
|
112 | <style>
|
113 | body {font: 10pt arial;}
|
114 | </style>
|
115 |
|
116 | <script type="text/javascript" src="../../dist/vis.js"></script>
|
117 |
|
118 | <script type="text/javascript">
|
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 < axisMax; x+=axisStep) {
|
135 | for (var y = 0; y < 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 | </script>
|
163 | </head>
|
164 |
|
165 | <body onload="drawVisualization();">
|
166 | <div id="mygraph"></div>
|
167 | </body>
|
168 | </html>
|
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">
|
255 | var 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 | |
552 |
|
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: 1.0, vertical: 0.5, distance: 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">
|
910 | function 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'));
|
917 | graph3d.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 |
|
956 |
|
957 |
|
958 | <script src="../js/jquery.min.js"></script>
|
959 | <script src="../js/bootstrap.min.js"></script>
|
960 |
|
961 | <script src="../js/ie10-viewport-bug-workaround.js"></script>
|
962 |
|
963 | <script src="../js/jquery.highlight.js"></script>
|
964 | <script src="../js/jquery.url.min.js"></script>
|
965 |
|
966 | <script src="../js/tipuesearch.config.js"></script>
|
967 | <script src="../js/tipuesearch.js"></script>
|
968 |
|
969 | <script src="../js/main.js"></script>
|