|
|
@ -1,11 +1,12 @@ |
|
|
|
<html> |
|
|
|
|
|
|
|
<head> |
|
|
|
<title>Graph3d documentation</title> |
|
|
|
<link rel='stylesheet' href='css/graph3d.css' type='text/css'> |
|
|
|
<title>vis.js | graph3d documentation</title> |
|
|
|
|
|
|
|
<link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" /> |
|
|
|
<script type="text/javascript" src="lib/prettify/prettify.js"></script> |
|
|
|
<link href='css/prettify.css' type='text/css' rel='stylesheet'> |
|
|
|
<link href='css/style.css' type='text/css' rel='stylesheet'> |
|
|
|
|
|
|
|
<script type="text/javascript" src="lib/prettify/prettify.js"></script> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body onload="prettyPrint();"> |
|
|
@ -13,27 +14,33 @@ |
|
|
|
|
|
|
|
<h1>Graph3d documentation</h1> |
|
|
|
|
|
|
|
<h2 id="Overview">Overview</h2> |
|
|
|
<p> |
|
|
|
Graph3d is an interactive visualization chart to draw data in a three dimensional |
|
|
|
graph. You can freely move and zoom in the graph by dragging and scrolling in the |
|
|
|
window. |
|
|
|
Graph3d also supports animation of a graph. |
|
|
|
</p> |
|
|
|
|
|
|
|
<h2 id="Contents">Contents</h2> |
|
|
|
<ul> |
|
|
|
<li><a href="#Overview">Overview</a></li> |
|
|
|
<li><a href="#Loading">Loading</a></li> |
|
|
|
<li><a href="#Data_Format">Data Format</a></li> |
|
|
|
<li><a href="#Configuration_Options">Configuration Options</a></li> |
|
|
|
<li><a href="#Methods">Methods</a></li> |
|
|
|
<li><a href="#Events">Events</a></li> |
|
|
|
<li><a href="#Data_Policy">Data Policy</a></li> |
|
|
|
<li><a href="#Overview">Overview</a></li> |
|
|
|
<li><a href="#Loading">Loading</a></li> |
|
|
|
<li><a href="#Data_Format">Data Format</a></li> |
|
|
|
<li><a href="#Configuration_Options">Configuration Options</a></li> |
|
|
|
<li><a href="#Methods">Methods</a></li> |
|
|
|
<li><a href="#Events">Events</a></li> |
|
|
|
<li><a href="#Data_Policy">Data Policy</a></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<h2 id="Overview">Overview</h2> |
|
|
|
<h2 id="Example">Example</h2> |
|
|
|
<p> |
|
|
|
Graph3d is an interactive visualization chart to draw data in a three dimensional |
|
|
|
graph. You can freely move and zoom in the graph by dragging and scrolling in the |
|
|
|
window. |
|
|
|
Graph3d also supports animation of a graph. |
|
|
|
The following code shows how to create a Graph3d and provide it with data. |
|
|
|
More examples can be found in the <a href="../examples">examples</a> directory. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-html"> |
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
|
|
<!DOCTYPE HTML> |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<title>Graph 3D demo</title> |
|
|
@ -103,64 +110,72 @@ |
|
|
|
</pre> |
|
|
|
|
|
|
|
|
|
|
|
The class name of the Graph3d is <code>vis.Graph3d</code> |
|
|
|
<h2 id="Loading">Loading</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
The class name of the Graph3d is <code>vis.Graph3d</code> |
|
|
|
</p> |
|
|
|
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container);</pre> |
|
|
|
|
|
|
|
After being loaded, the graph can be drawn via the function <code>draw()</code>, |
|
|
|
provided with data and options. |
|
|
|
<p> |
|
|
|
After being loaded, the graph can be drawn via the function <code>draw()</code>, |
|
|
|
provided with data and options. |
|
|
|
</p> |
|
|
|
<pre class="prettyprint lang-js">graph.draw(data, options);</pre> |
|
|
|
where data is a vis <code>DataSet</code>, and options is a name-value map in the JSON format. |
|
|
|
<p> |
|
|
|
where data is a vis <code>DataSet</code>, and options is a name-value map in the JSON format. |
|
|
|
</p> |
|
|
|
|
|
|
|
<h2 id="Data_Format">Data Format</h2> |
|
|
|
<p> |
|
|
|
Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the <code>add()</code> function. |
|
|
|
These JSON objects have 5 fields, of which 2 are optional. These are described below. |
|
|
|
Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the <code>add()</code> function. |
|
|
|
These JSON objects have 5 fields, of which 2 are optional. These are described below. |
|
|
|
|
|
|
|
<h3>Definition</h3> |
|
|
|
<p> |
|
|
|
The DataSet JSON objects are defined as: |
|
|
|
The DataSet JSON objects are defined as: |
|
|
|
</p> |
|
|
|
|
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Required</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>x</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the x-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>y</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the y-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>z</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the z-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>style</td> |
|
|
|
<td>number</td> |
|
|
|
<td>no</td> |
|
|
|
<td>The data value, required for graph styles <code>dot-color</code> and |
|
|
|
<code>dot-size</code>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>filter</td> |
|
|
|
<td>anytype</td> |
|
|
|
<td>no</td> |
|
|
|
<td>Filter values used for the animation. |
|
|
|
This column may have any type, such as a number, string, or Date.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Required</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>x</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the x-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>y</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the y-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>z</td> |
|
|
|
<td>number</td> |
|
|
|
<td>yes</td> |
|
|
|
<td>Location on the z-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>style</td> |
|
|
|
<td>number</td> |
|
|
|
<td>no</td> |
|
|
|
<td>The data value, required for graph styles <code>dot-color</code> and |
|
|
|
<code>dot-size</code>. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>filter</td> |
|
|
|
<td>anytype</td> |
|
|
|
<td>no</td> |
|
|
|
<td>Filter values used for the animation. |
|
|
|
This column may have any type, such as a number, string, or Date.</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
@ -168,8 +183,8 @@ where data is a vis DataSet , and options is a name-value map in the |
|
|
|
<h2 id="Configuration_Options">Configuration Options</h2> |
|
|
|
|
|
|
|
<p> |
|
|
|
Options can be used to customize the graph. Options are defined as a JSON object. |
|
|
|
All options are optional. |
|
|
|
Options can be used to customize the graph. Options are defined as a JSON object. |
|
|
|
All options are optional. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
@ -181,394 +196,394 @@ options = { |
|
|
|
</pre> |
|
|
|
|
|
|
|
<p> |
|
|
|
The following options are available. |
|
|
|
The following options are available. |
|
|
|
</p> |
|
|
|
|
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Default</th> |
|
|
|
<th>Description</th> |
|
|
|
<th>Name</th> |
|
|
|
<th>Type</th> |
|
|
|
<th>Default</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>animationInterval</td> |
|
|
|
<td>number</td> |
|
|
|
<td>1000</td> |
|
|
|
<td>The animation interval in milliseconds. This determines how fast |
|
|
|
the animation runs.</td> |
|
|
|
<td>animationInterval</td> |
|
|
|
<td>number</td> |
|
|
|
<td>1000</td> |
|
|
|
<td>The animation interval in milliseconds. This determines how fast |
|
|
|
the animation runs.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>animationPreload</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>If false, the animation frames are loaded as soon as they are requested. |
|
|
|
if <code>animationPreload</code> is true, the graph will automatically load |
|
|
|
all frames in the background, resulting in a smoother animation as soon as |
|
|
|
all frames are loaded. The load progress is shown on screen.</td> |
|
|
|
<td>animationPreload</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>If false, the animation frames are loaded as soon as they are requested. |
|
|
|
if <code>animationPreload</code> is true, the graph will automatically load |
|
|
|
all frames in the background, resulting in a smoother animation as soon as |
|
|
|
all frames are loaded. The load progress is shown on screen.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>animationAutoStart</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>If true, the animation starts playing automatically after the graph |
|
|
|
is created.</td> |
|
|
|
<td>animationAutoStart</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>If true, the animation starts playing automatically after the graph |
|
|
|
is created.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>backgroundColor</td> |
|
|
|
<td>string or Object</td> |
|
|
|
<td>"white"</td> |
|
|
|
<td>The background color for the main area of the chart. |
|
|
|
Can be either a simple HTML color string, for example: 'red' or '#00cc00', |
|
|
|
or an object with the following properties.</td> |
|
|
|
<td>backgroundColor</td> |
|
|
|
<td>string or Object</td> |
|
|
|
<td>"white"</td> |
|
|
|
<td>The background color for the main area of the chart. |
|
|
|
Can be either a simple HTML color string, for example: 'red' or '#00cc00', |
|
|
|
or an object with the following properties.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>backgroundColor.stroke</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"gray"</td> |
|
|
|
<td>The color of the chart border, as an HTML color string.</td> |
|
|
|
<td>backgroundColor.stroke</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"gray"</td> |
|
|
|
<td>The color of the chart border, as an HTML color string.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>backgroundColor.strokeWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>1</td> |
|
|
|
<td>The border width, in pixels.</td> |
|
|
|
<td>backgroundColor.strokeWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>1</td> |
|
|
|
<td>The border width, in pixels.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>backgroundColor.fill</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"white"</td> |
|
|
|
<td>The chart fill color, as an HTML color string.</td> |
|
|
|
<td>backgroundColor.fill</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"white"</td> |
|
|
|
<td>The chart fill color, as an HTML color string.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>cameraPosition</td> |
|
|
|
<td>Object</td> |
|
|
|
<td>{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}</td> |
|
|
|
<td>Set the initial rotation and position of the camera. |
|
|
|
The object <code>cameraPosition</code> contains three parameters: |
|
|
|
<code>horizontal</code>, <code>vertical</code>, and <code>distance</code>. |
|
|
|
Parameter <code>horizontal</code> is a value in radians and can have any |
|
|
|
value (but normally in the range of 0 and 2*Pi). |
|
|
|
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi. |
|
|
|
Parameter <code>distance</code> is the (normalized) distance from the |
|
|
|
camera to the center of the graph, in the range of 0.71 to 5.0. A |
|
|
|
larger distance puts the graph further away, making it smaller. |
|
|
|
All parameters are optional. |
|
|
|
<td>cameraPosition</td> |
|
|
|
<td>Object</td> |
|
|
|
<td>{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}</td> |
|
|
|
<td>Set the initial rotation and position of the camera. |
|
|
|
The object <code>cameraPosition</code> contains three parameters: |
|
|
|
<code>horizontal</code>, <code>vertical</code>, and <code>distance</code>. |
|
|
|
Parameter <code>horizontal</code> is a value in radians and can have any |
|
|
|
value (but normally in the range of 0 and 2*Pi). |
|
|
|
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi. |
|
|
|
Parameter <code>distance</code> is the (normalized) distance from the |
|
|
|
camera to the center of the graph, in the range of 0.71 to 5.0. A |
|
|
|
larger distance puts the graph further away, making it smaller. |
|
|
|
All parameters are optional. |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>height</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"400px"</td> |
|
|
|
<td>The height of the graph in pixels or as a percentage.</td> |
|
|
|
<td>height</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"400px"</td> |
|
|
|
<td>The height of the graph in pixels or as a percentage.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>keepAspectRatio</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis |
|
|
|
keep their aspect ratio. If false, the axes are scaled such that they |
|
|
|
both have the same, maximum with.</td> |
|
|
|
<td>keepAspectRatio</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis |
|
|
|
keep their aspect ratio. If false, the axes are scaled such that they |
|
|
|
both have the same, maximum with.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>showAnimationControls</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, animation controls are created at the bottom of the Graph. |
|
|
|
The animation controls consists of buttons previous, start/stop, next, |
|
|
|
and a slider showing the current frame. |
|
|
|
Only applicable when the provided data contains an animation.</td> |
|
|
|
<td>showAnimationControls</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, animation controls are created at the bottom of the Graph. |
|
|
|
The animation controls consists of buttons previous, start/stop, next, |
|
|
|
and a slider showing the current frame. |
|
|
|
Only applicable when the provided data contains an animation.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>showGrid</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d |
|
|
|
graph).</td> |
|
|
|
<td>showGrid</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d |
|
|
|
graph).</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>showPerspective</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, the graph is drawn in perspective: points and lines which |
|
|
|
are further away are drawn smaller. |
|
|
|
Note that the graph currently does not support a gray colored bottom side |
|
|
|
when drawn in perspective. |
|
|
|
</td> |
|
|
|
<td>showPerspective</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>true</td> |
|
|
|
<td>If true, the graph is drawn in perspective: points and lines which |
|
|
|
are further away are drawn smaller. |
|
|
|
Note that the graph currently does not support a gray colored bottom side |
|
|
|
when drawn in perspective. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>showShadow</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>Show shadow on the graph.</td> |
|
|
|
<td>showShadow</td> |
|
|
|
<td>boolean</td> |
|
|
|
<td>false</td> |
|
|
|
<td>Show shadow on the graph.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>style</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"dot"</td> |
|
|
|
<td>The style of the 3d graph. Available styles: |
|
|
|
<code>bar</code>, |
|
|
|
<code>bar-color</code>, |
|
|
|
<code>bar-size</code>, |
|
|
|
<code>dot</code>, |
|
|
|
<code>dot-line</code>, |
|
|
|
<code>dot-color</code>, |
|
|
|
<code>dot-size</code>, |
|
|
|
<code>line</code>, |
|
|
|
<code>grid</code>, |
|
|
|
or <code>surface</code></td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>tooltip</td> |
|
|
|
<td>boolean | function</td> |
|
|
|
<td>false</td> |
|
|
|
<td>Show a tooltip showing the values of the hovered data point. |
|
|
|
The contents of the tooltip can be customized by providing a callback |
|
|
|
function as <code>tooltip</code>. In this case the function is called |
|
|
|
with an object containing parameters <code>x</code>, |
|
|
|
<code>y</code>, and <code>z</code> argument, |
|
|
|
and must return a string which may contain HTML. |
|
|
|
</td> |
|
|
|
<td>style</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"dot"</td> |
|
|
|
<td>The style of the 3d graph. Available styles: |
|
|
|
<code>bar</code>, |
|
|
|
<code>bar-color</code>, |
|
|
|
<code>bar-size</code>, |
|
|
|
<code>dot</code>, |
|
|
|
<code>dot-line</code>, |
|
|
|
<code>dot-color</code>, |
|
|
|
<code>dot-size</code>, |
|
|
|
<code>line</code>, |
|
|
|
<code>grid</code>, |
|
|
|
or <code>surface</code></td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>valueMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the value-axis. Only available in combination |
|
|
|
with the styles <code>dot-color</code> and <code>dot-size</code>.</td> |
|
|
|
<td>tooltip</td> |
|
|
|
<td>boolean | function</td> |
|
|
|
<td>false</td> |
|
|
|
<td>Show a tooltip showing the values of the hovered data point. |
|
|
|
The contents of the tooltip can be customized by providing a callback |
|
|
|
function as <code>tooltip</code>. In this case the function is called |
|
|
|
with an object containing parameters <code>x</code>, |
|
|
|
<code>y</code>, and <code>z</code> argument, |
|
|
|
and must return a string which may contain HTML. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>valueMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the value-axis. Only available in combination |
|
|
|
with the styles <code>dot-color</code> and <code>dot-size</code>.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>valueMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the value-axis. Only available in combination |
|
|
|
with the styles <code>dot-color</code> and <code>dot-size</code>.</td> |
|
|
|
<td>valueMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the value-axis. Only available in combination |
|
|
|
with the styles <code>dot-color</code> and <code>dot-size</code>.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>verticalRatio</td> |
|
|
|
<td>number</td> |
|
|
|
<td>0.5</td> |
|
|
|
<td>A value between 0.1 and 1.0. This scales the vertical size of the graph |
|
|
|
When keepAspectRatio is set to false, and verticalRatio is set to 1.0, |
|
|
|
the graph will be a cube.</td> |
|
|
|
<td>verticalRatio</td> |
|
|
|
<td>number</td> |
|
|
|
<td>0.5</td> |
|
|
|
<td>A value between 0.1 and 1.0. This scales the vertical size of the graph |
|
|
|
When keepAspectRatio is set to false, and verticalRatio is set to 1.0, |
|
|
|
the graph will be a cube.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>width</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"400px"</td> |
|
|
|
<td>The width of the graph in pixels or as a percentage.</td> |
|
|
|
<td>width</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"400px"</td> |
|
|
|
<td>The width of the graph in pixels or as a percentage.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>xBarWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The width of bars in x direction. By default, the width is equal to the distance |
|
|
|
between the data points, such that bars adjoin each other. |
|
|
|
Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td> |
|
|
|
<td>xBarWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The width of bars in x direction. By default, the width is equal to the distance |
|
|
|
between the data points, such that bars adjoin each other. |
|
|
|
Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>xCenter</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"55%"</td> |
|
|
|
<td>The horizontal center position of the graph, as a percentage or in |
|
|
|
pixels.</td> |
|
|
|
<td>xCenter</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"55%"</td> |
|
|
|
<td>The horizontal center position of the graph, as a percentage or in |
|
|
|
pixels.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>xMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the x-axis.</td> |
|
|
|
<td>xMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the x-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>xMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the x-axis.</td> |
|
|
|
<td>xMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the x-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>xStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the x-axis.</td> |
|
|
|
<td>xStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the x-axis.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>yBarWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The width of bars in y direction. By default, the width is equal to the distance |
|
|
|
between the data points, such that bars adjoin each other. |
|
|
|
Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td> |
|
|
|
<td>yBarWidth</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The width of bars in y direction. By default, the width is equal to the distance |
|
|
|
between the data points, such that bars adjoin each other. |
|
|
|
Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>yCenter</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"45%"</td> |
|
|
|
<td>The vertical center position of the graph, as a percentage or in |
|
|
|
pixels.</td> |
|
|
|
<td>yCenter</td> |
|
|
|
<td>string</td> |
|
|
|
<td>"45%"</td> |
|
|
|
<td>The vertical center position of the graph, as a percentage or in |
|
|
|
pixels.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>yMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the y-axis.</td> |
|
|
|
<td>yMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the y-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>yMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the y-axis.</td> |
|
|
|
<td>yMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the y-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>yStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the y-axis.</td> |
|
|
|
<td>yStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the y-axis.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>zMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the z-axis.</td> |
|
|
|
<td>zMin</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The minimum value for the z-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>zMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the z-axis.</td> |
|
|
|
<td>zMax</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>The maximum value for the z-axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>zStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the z-axis.</td> |
|
|
|
<td>zStep</td> |
|
|
|
<td>number</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Step size for the grid on the z-axis.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>xLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>x</td> |
|
|
|
<td>Label on the X axis.</td> |
|
|
|
<td>xLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>x</td> |
|
|
|
<td>Label on the X axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>yLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>y</td> |
|
|
|
<td>Label on the Y axis.</td> |
|
|
|
<td>yLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>y</td> |
|
|
|
<td>Label on the Y axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>zLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>z</td> |
|
|
|
<td>Label on the Z axis.</td> |
|
|
|
<td>zLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>z</td> |
|
|
|
<td>Label on the Z axis.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>filterLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>time</td> |
|
|
|
<td>Label for the filter column.</td> |
|
|
|
<td>filterLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>time</td> |
|
|
|
<td>Label for the filter column.</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>legendLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>value</td> |
|
|
|
<td>Label for the style description.</td> |
|
|
|
<td>legendLabel</td> |
|
|
|
<td>String</td> |
|
|
|
<td>value</td> |
|
|
|
<td>Label for the style description.</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
|
<h2 id="Methods">Methods</h2> |
|
|
|
<p> |
|
|
|
Graph3d supports the following methods. |
|
|
|
Graph3d supports the following methods. |
|
|
|
</p> |
|
|
|
|
|
|
|
<table> |
|
|
|
<tr> |
|
|
|
<th>Method</th> |
|
|
|
<th>Return Type</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>animationStart()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Start playing the animation. |
|
|
|
Only applicable when animation data is available.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>animationStop()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Stop playing the animation. |
|
|
|
Only applicable when animation data is available.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>draw(data, options)</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Loads data, sets the provided options, and draws the 3d graph.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>getCameraPosition()</td> |
|
|
|
<td>An object with parameters <code>horizontal</code>, |
|
|
|
<code>vertical</code> and <code>distance</code></td> |
|
|
|
<td>Returns an object with parameters <code>horizontal</code>, |
|
|
|
<code>vertical</code> and <code>distance</code>, |
|
|
|
which each one of them is a number, representing the rotation and position |
|
|
|
of the camera.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>redraw()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Redraw the graph. Useful after the camera position is changed externally, |
|
|
|
when data is changed, or when the layout of the webpage changed.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>setSize(width, height)</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Parameters <code>width</code> and <code>height</code> are strings, |
|
|
|
containing a new size for the graph. Size can be provided in pixels |
|
|
|
or in percentages.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>setCameraPosition (pos)</td> |
|
|
|
<td>{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}</td> |
|
|
|
<td>Set the rotation and position of the camera. Parameter <code>pos</code> |
|
|
|
is an object which contains three parameters: <code>horizontal</code>, |
|
|
|
<code>vertical</code>, and <code>distance</code>. |
|
|
|
Parameter <code>horizontal</code> is a value in radians and can have any |
|
|
|
value (but normally in the range of 0 and 2*Pi). |
|
|
|
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi. |
|
|
|
Parameter <code>distance</code> is the (normalized) distance from the |
|
|
|
camera to the center of the graph, in the range of 0.71 to 5.0. A |
|
|
|
larger distance puts the graph further away, making it smaller. |
|
|
|
All parameters are optional. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th>Method</th> |
|
|
|
<th>Return Type</th> |
|
|
|
<th>Description</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>animationStart()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Start playing the animation. |
|
|
|
Only applicable when animation data is available.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>animationStop()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Stop playing the animation. |
|
|
|
Only applicable when animation data is available.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>draw(data, options)</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Loads data, sets the provided options, and draws the 3d graph.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>getCameraPosition()</td> |
|
|
|
<td>An object with parameters <code>horizontal</code>, |
|
|
|
<code>vertical</code> and <code>distance</code></td> |
|
|
|
<td>Returns an object with parameters <code>horizontal</code>, |
|
|
|
<code>vertical</code> and <code>distance</code>, |
|
|
|
which each one of them is a number, representing the rotation and position |
|
|
|
of the camera.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>redraw()</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Redraw the graph. Useful after the camera position is changed externally, |
|
|
|
when data is changed, or when the layout of the webpage changed.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>setSize(width, height)</td> |
|
|
|
<td>none</td> |
|
|
|
<td>Parameters <code>width</code> and <code>height</code> are strings, |
|
|
|
containing a new size for the graph. Size can be provided in pixels |
|
|
|
or in percentages.</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>setCameraPosition (pos)</td> |
|
|
|
<td>{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}</td> |
|
|
|
<td>Set the rotation and position of the camera. Parameter <code>pos</code> |
|
|
|
is an object which contains three parameters: <code>horizontal</code>, |
|
|
|
<code>vertical</code>, and <code>distance</code>. |
|
|
|
Parameter <code>horizontal</code> is a value in radians and can have any |
|
|
|
value (but normally in the range of 0 and 2*Pi). |
|
|
|
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi. |
|
|
|
Parameter <code>distance</code> is the (normalized) distance from the |
|
|
|
camera to the center of the graph, in the range of 0.71 to 5.0. A |
|
|
|
larger distance puts the graph further away, making it smaller. |
|
|
|
All parameters are optional. |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
<h2 id="Events">Events</h2> |
|
|
|
<p> |
|
|
|
Graph3d fires events after the camera position has been changed. |
|
|
|
The event can be catched by creating a listener. |
|
|
|
Here an example on how to catch a <code>camerapositionchange</code> event. |
|
|
|
Graph3d fires events after the camera position has been changed. |
|
|
|
The event can be catched by creating a listener. |
|
|
|
Here an example on how to catch a <code>camerapositionchange</code> event. |
|
|
|
</p> |
|
|
|
|
|
|
|
<pre class="prettyprint lang-js"> |
|
|
@ -583,40 +598,40 @@ graph3d.on("camerapositionchange",oncamerapositionchange); |
|
|
|
</pre> |
|
|
|
|
|
|
|
<p> |
|
|
|
The following events are available. |
|
|
|
The following events are available. |
|
|
|
</p> |
|
|
|
|
|
|
|
<table> |
|
|
|
<col width="10%"> |
|
|
|
<col width="60%"> |
|
|
|
<col width="30%"> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<th>name</th> |
|
|
|
<th>Description</th> |
|
|
|
<th>Properties</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>camerapositionchange</td> |
|
|
|
<td>The camera position changed. Fired after the user modified the camera position |
|
|
|
by moving (dragging) the graph, or by zooming (scrolling), |
|
|
|
but not after a call to <code>setCameraPosition</code> method. |
|
|
|
The new camera position can be retrieved by calling the method |
|
|
|
<code>getCameraPosition</code>.</td> |
|
|
|
<td> |
|
|
|
<ul> |
|
|
|
<li><code>horizontal</code>: Number. The horizontal angle of the camera.</li> |
|
|
|
<li><code>vertical</code>: Number. The vertical angle of the camera.</li> |
|
|
|
<li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li> |
|
|
|
</ul> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<col width="10%"> |
|
|
|
<col width="60%"> |
|
|
|
<col width="30%"> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<th>name</th> |
|
|
|
<th>Description</th> |
|
|
|
<th>Properties</th> |
|
|
|
</tr> |
|
|
|
|
|
|
|
<tr> |
|
|
|
<td>camerapositionchange</td> |
|
|
|
<td>The camera position changed. Fired after the user modified the camera position |
|
|
|
by moving (dragging) the graph, or by zooming (scrolling), |
|
|
|
but not after a call to <code>setCameraPosition</code> method. |
|
|
|
The new camera position can be retrieved by calling the method |
|
|
|
<code>getCameraPosition</code>.</td> |
|
|
|
<td> |
|
|
|
<ul> |
|
|
|
<li><code>horizontal</code>: Number. The horizontal angle of the camera.</li> |
|
|
|
<li><code>vertical</code>: Number. The vertical angle of the camera.</li> |
|
|
|
<li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li> |
|
|
|
</ul> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
|
|
|
|
<h2 id="Data_Policy">Data Policy</h2> |
|
|
|
<p> |
|
|
|
All code and data are processed and rendered in the browser. No data is sent to any server. |
|
|
|
All code and data are processed and rendered in the browser. No data is sent to any server. |
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|