jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated styling of graph3d docs

css_transitions
jos 10 years ago
parent
f2d792435c
commit
5977b5bf8a
7 changed files with 403 additions and 471 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -87
      docs/css/graph3d.css
  2. +389
    -374
      docs/graph3d.html
  3. +5
    -3
      docs/index.html
  4. +2
    -4
      examples/graph3d/example01_basis.html
  5. +3
    -0
      examples/graph3d/index.html
  6. +3
    -3
      examples/graph3d/playground/playground.css
  7. +1
    -0
      examples/index.html

+ 0
- 87
docs/css/graph3d.css View File

@ -1,87 +0,0 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 389
- 374
docs/graph3d.html View File

@ -1,11 +1,12 @@
<html> <html>
<head> <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> </head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">
@ -13,27 +14,33 @@
<h1>Graph3d documentation</h1> <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> <h2 id="Contents">Contents</h2>
<ul> <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> </ul>
<h2 id="Overview">Overview</h2>
<h2 id="Example">Example</h2>
<p> <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> </p>
<pre class="prettyprint lang-html"> <pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;!DOCTYPE HTML&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Graph 3D demo&lt;/title&gt; &lt;title&gt;Graph 3D demo&lt;/title&gt;
@ -103,64 +110,72 @@
</pre> </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> <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> <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> <h2 id="Data_Format">Data Format</h2>
<p> <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> <h3>Definition</h3>
<p> <p>
The DataSet JSON objects are defined as:
The DataSet JSON objects are defined as:
</p> </p>
<table> <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> </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> <h2 id="Configuration_Options">Configuration Options</h2>
<p> <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> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
@ -181,394 +196,394 @@ options = {
</pre> </pre>
<p> <p>
The following options are available.
The following options are available.
</p> </p>
<table> <table>
<tr> <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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<tr> <tr>
<td>cameraPosition</td>
<td>Object</td>
<td>{"horizontal":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;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":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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> </tr>
</table> </table>
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
<p> <p>
Graph3d supports the following methods.
Graph3d supports the following methods.
</p> </p>
<table> <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":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;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":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;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> </table>
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>
<p> <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> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
@ -583,40 +598,40 @@ graph3d.on("camerapositionchange",oncamerapositionchange);
</pre> </pre>
<p> <p>
The following events are available.
The following events are available.
</p> </p>
<table> <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> </table>
<h2 id="Data_Policy">Data Policy</h2> <h2 id="Data_Policy">Data Policy</h2>
<p> <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> </p>
</div> </div>

+ 5
- 3
docs/index.html View File

@ -49,11 +49,13 @@
<a href="graph.html"><b>Graph</b></a>. <a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges. Display a graph or network with nodes and edges.
</li> </li>
<li>
<a href="graph3d.html"><b>Graph3d</b></a>.
Display data in a three dimensional graph.
</li>
<li> <li>
<a href="timeline.html"><b>Timeline</b></a>. <a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
Display different types of data on a timeline.
</li> </li>
</ul> </ul>

+ 2
- 4
examples/graph3d/example01_basis.html View File

@ -20,7 +20,7 @@
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function drawVisualization() { function drawVisualization() {
// Create and populate a data table. // Create and populate a data table.
var data = new vis.DataSet({});
var data = [];
// create some nice looking data with sin/cos // create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314; var axisMax = 314;
@ -28,9 +28,7 @@
for (var x = 0; x < axisMax; x+=axisStep) { for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y); var value = custom(x,y);
data.add([
{x:x,y:y,z:value,style:value}
]);
data.push({x:x,y:y,z:value,style:value});
} }
} }

+ 3
- 0
examples/graph3d/index.html View File

@ -19,6 +19,9 @@
<p><a href="example10_styles.html">example10_styles.html</a></p> <p><a href="example10_styles.html">example10_styles.html</a></p>
<p><a href="example11_tooltips.html">example11_tooltips.html</a></p> <p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
<h1>Playground</h1>
<p><a href="playground">Open the playground</a></p>
</div> </div>
</body> </body>
</html> </html>

+ 3
- 3
examples/graph3d/playground/playground.css View File

@ -14,9 +14,9 @@ h1
h2 h2
{ {
font-size: 140%; font-size: 140%;
color: white;
background-color: #7F8FB1;
padding: 5px; padding: 5px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
} }
h3 h3
@ -27,7 +27,7 @@ h3
hr hr
{ {
border: none 0; border: none 0;
border-top: 1px solid #7F8FB1;
border-top: 1px solid #a0c0f0;
height: 1px; height: 1px;
} }

+ 1
- 0
examples/index.html View File

@ -13,6 +13,7 @@
<h1>vis.js examples</h1> <h1>vis.js examples</h1>
<p><a href="graph">graph</a></p> <p><a href="graph">graph</a></p>
<p><a href="graph3d">graph3d</a></p>
<p><a href="timeline">timeline</a></p> <p><a href="timeline">timeline</a></p>
</div> </div>

Write Preview
Loading…
Cancel
Save