diff --git a/docs/css/graph3d.css b/docs/css/graph3d.css deleted file mode 100644 index f0c251df..00000000 --- a/docs/css/graph3d.css +++ /dev/null @@ -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; -} diff --git a/docs/graph3d.html b/docs/graph3d.html index 2f893c83..d5b3cacf 100644 --- a/docs/graph3d.html +++ b/docs/graph3d.html @@ -1,11 +1,12 @@
-+ 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. +
+- 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 examples directory.
-<!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 @@-The class name of the Graph3d is
vis.Graph3d
+
+ The class name of the Graph3d is vis.Graph3d
+
var graph = new vis.Graph3d(container);-After being loaded, the graph can be drawn via the function
draw()
,
-provided with data and options.
+
+ After being loaded, the graph can be drawn via the function draw()
,
+ provided with data and options.
+
graph.draw(data, options);-where data is a vis
DataSet
, and options is a name-value map in the JSON format.
+
+ where data is a vis DataSet
, and options is a name-value map in the JSON format.
+
- Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the add()
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 add()
function.
+ These JSON objects have 5 fields, of which 2 are optional. These are described below.
- The DataSet JSON objects are defined as: + The DataSet JSON objects are defined as:
Name | -Type | -Required | -Description | -
---|---|---|---|
x | -number | -yes | -Location on the x-axis. | -
y | -number | -yes | -Location on the y-axis. | -
z | -number | -yes | -Location on the z-axis. | -
style | -number | -no | -The data value, required for graph styles dot-color and
- dot-size .
- |
-
filter | -anytype | -no | -Filter values used for the animation. - This column may have any type, such as a number, string, or Date. | -
Name | +Type | +Required | +Description | +
x | +number | +yes | +Location on the x-axis. | +
y | +number | +yes | +Location on the y-axis. | +
z | +number | +yes | +Location on the z-axis. | +
style | +number | +no | +The data value, required for graph styles dot-color and
+ dot-size .
+ |
+
filter | +anytype | +no | +Filter values used for the animation. + This column may have any type, such as a number, string, or Date. | +
DataSet
, and options is a name-value map in the
- 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.
@@ -181,394 +196,394 @@ options = {
- The following options are available. + The following options are available.
Name | -Type | -Default | -Description | +Name | +Type | +Default | +Description |
---|---|---|---|---|---|---|---|
animationInterval | -number | -1000 | -The animation interval in milliseconds. This determines how fast - the animation runs. | +animationInterval | +number | +1000 | +The animation interval in milliseconds. This determines how fast + the animation runs. |
animationPreload | -boolean | -false | -If false, the animation frames are loaded as soon as they are requested.
- if animationPreload 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. |
+ animationPreload | +boolean | +false | +If false, the animation frames are loaded as soon as they are requested.
+ if animationPreload 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. |
animationAutoStart | -boolean | -false | -If true, the animation starts playing automatically after the graph - is created. | +animationAutoStart | +boolean | +false | +If true, the animation starts playing automatically after the graph + is created. |
backgroundColor | -string or Object | -"white" | -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. | +backgroundColor | +string or Object | +"white" | +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. |
backgroundColor.stroke | -string | -"gray" | -The color of the chart border, as an HTML color string. | +backgroundColor.stroke | +string | +"gray" | +The color of the chart border, as an HTML color string. |
backgroundColor.strokeWidth | -number | -1 | -The border width, in pixels. | +backgroundColor.strokeWidth | +number | +1 | +The border width, in pixels. |
backgroundColor.fill | -string | -"white" | -The chart fill color, as an HTML color string. | +backgroundColor.fill | +string | +"white" | +The chart fill color, as an HTML color string. |
cameraPosition | -Object | -{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7} | -Set the initial rotation and position of the camera.
- The object cameraPosition contains three parameters:
- horizontal , vertical , and distance .
- Parameter horizontal is a value in radians and can have any
- value (but normally in the range of 0 and 2*Pi).
- Parameter vertical is a value in radians between 0 and 0.5*Pi.
- Parameter distance 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.
+ | cameraPosition | +Object | +{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7} | +Set the initial rotation and position of the camera.
+ The object cameraPosition contains three parameters:
+ horizontal , vertical , and distance .
+ Parameter horizontal is a value in radians and can have any
+ value (but normally in the range of 0 and 2*Pi).
+ Parameter vertical is a value in radians between 0 and 0.5*Pi.
+ Parameter distance 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.
|
height | -string | -"400px" | -The height of the graph in pixels or as a percentage. | +height | +string | +"400px" | +The height of the graph in pixels or as a percentage. |
keepAspectRatio | -boolean | -true | -If keepAspectRatio 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. |
+ keepAspectRatio | +boolean | +true | +If keepAspectRatio 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. |
showAnimationControls | -boolean | -true | -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. | +showAnimationControls | +boolean | +true | +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. |
showGrid | -boolean | -true | -If true, grid lines are draw in the x-y surface (the bottom of the 3d - graph). | +showGrid | +boolean | +true | +If true, grid lines are draw in the x-y surface (the bottom of the 3d + graph). |
showPerspective | -boolean | -true | -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. - | +showPerspective | +boolean | +true | +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. + |
showShadow | -boolean | -false | -Show shadow on the graph. | +showShadow | +boolean | +false | +Show shadow on the graph. |
style | -string | -"dot" | -The style of the 3d graph. Available styles:
- bar ,
- bar-color ,
- bar-size ,
- dot ,
- dot-line ,
- dot-color ,
- dot-size ,
- line ,
- grid ,
- or surface |
-||||
tooltip | -boolean | function | -false | -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 tooltip . In this case the function is called
- with an object containing parameters x ,
- y , and z argument,
- and must return a string which may contain HTML.
- |
+ style | +string | +"dot" | +The style of the 3d graph. Available styles:
+ bar ,
+ bar-color ,
+ bar-size ,
+ dot ,
+ dot-line ,
+ dot-color ,
+ dot-size ,
+ line ,
+ grid ,
+ or surface |
valueMax | -number | -none | -The maximum value for the value-axis. Only available in combination
- with the styles dot-color and dot-size . |
+ tooltip | +boolean | function | +false | +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 tooltip . In this case the function is called
+ with an object containing parameters x ,
+ y , and z argument,
+ and must return a string which may contain HTML.
+ |
+
valueMax | +number | +none | +The maximum value for the value-axis. Only available in combination
+ with the styles dot-color and dot-size . |
||||
valueMin | -number | -none | -The minimum value for the value-axis. Only available in combination
- with the styles dot-color and dot-size . |
+ valueMin | +number | +none | +The minimum value for the value-axis. Only available in combination
+ with the styles dot-color and dot-size . |
verticalRatio | -number | -0.5 | -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. | +verticalRatio | +number | +0.5 | +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. |
width | -string | -"400px" | -The width of the graph in pixels or as a percentage. | +width | +string | +"400px" | +The width of the graph in pixels or as a percentage. |
xBarWidth | -number | -none | -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 "bar" and "bar-color" . |
+ xBarWidth | +number | +none | +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 "bar" and "bar-color" . |
xCenter | -string | -"55%" | -The horizontal center position of the graph, as a percentage or in - pixels. | +xCenter | +string | +"55%" | +The horizontal center position of the graph, as a percentage or in + pixels. |
xMax | -number | -none | -The maximum value for the x-axis. | +xMax | +number | +none | +The maximum value for the x-axis. |
xMin | -number | -none | -The minimum value for the x-axis. | +xMin | +number | +none | +The minimum value for the x-axis. |
xStep | -number | -none | -Step size for the grid on the x-axis. | +xStep | +number | +none | +Step size for the grid on the x-axis. |
yBarWidth | -number | -none | -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 "bar" and "bar-color" . |
+ yBarWidth | +number | +none | +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 "bar" and "bar-color" . |
yCenter | -string | -"45%" | -The vertical center position of the graph, as a percentage or in - pixels. | +yCenter | +string | +"45%" | +The vertical center position of the graph, as a percentage or in + pixels. |
yMax | -number | -none | -The maximum value for the y-axis. | +yMax | +number | +none | +The maximum value for the y-axis. |
yMin | -number | -none | -The minimum value for the y-axis. | +yMin | +number | +none | +The minimum value for the y-axis. |
yStep | -number | -none | -Step size for the grid on the y-axis. | +yStep | +number | +none | +Step size for the grid on the y-axis. |
zMin | -number | -none | -The minimum value for the z-axis. | +zMin | +number | +none | +The minimum value for the z-axis. |
zMax | -number | -none | -The maximum value for the z-axis. | +zMax | +number | +none | +The maximum value for the z-axis. |
zStep | -number | -none | -Step size for the grid on the z-axis. | +zStep | +number | +none | +Step size for the grid on the z-axis. |
xLabel | -String | -x | -Label on the X axis. | +xLabel | +String | +x | +Label on the X axis. |
yLabel | -String | -y | -Label on the Y axis. | +yLabel | +String | +y | +Label on the Y axis. |
zLabel | -String | -z | -Label on the Z axis. | +zLabel | +String | +z | +Label on the Z axis. |
filterLabel | -String | -time | -Label for the filter column. | +filterLabel | +String | +time | +Label for the filter column. |
legendLabel | -String | -value | -Label for the style description. | +legendLabel | +String | +value | +Label for the style description. |
- Graph3d supports the following methods. + Graph3d supports the following methods.
Method | -Return Type | -Description | -
---|---|---|
animationStart() | -none | -Start playing the animation. - Only applicable when animation data is available. | -
animationStop() | -none | -Stop playing the animation. - Only applicable when animation data is available. | -
draw(data, options) | -none | -Loads data, sets the provided options, and draws the 3d graph. | -
getCameraPosition() | -An object with parameters horizontal ,
- vertical and distance |
- Returns an object with parameters horizontal ,
- vertical and distance ,
- which each one of them is a number, representing the rotation and position
- of the camera. |
-
redraw() | -none | -Redraw the graph. Useful after the camera position is changed externally, - when data is changed, or when the layout of the webpage changed. | -
setSize(width, height) | -none | -Parameters width and height are strings,
- containing a new size for the graph. Size can be provided in pixels
- or in percentages. |
-
setCameraPosition (pos) | -{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7} | -Set the rotation and position of the camera. Parameter pos
- is an object which contains three parameters: horizontal ,
- vertical , and distance .
- Parameter horizontal is a value in radians and can have any
- value (but normally in the range of 0 and 2*Pi).
- Parameter vertical is a value in radians between 0 and 0.5*Pi.
- Parameter distance 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.
- |
-
Method | +Return Type | +Description | +
animationStart() | +none | +Start playing the animation. + Only applicable when animation data is available. | +
animationStop() | +none | +Stop playing the animation. + Only applicable when animation data is available. | +
draw(data, options) | +none | +Loads data, sets the provided options, and draws the 3d graph. | +
getCameraPosition() | +An object with parameters horizontal ,
+ vertical and distance |
+ Returns an object with parameters horizontal ,
+ vertical and distance ,
+ which each one of them is a number, representing the rotation and position
+ of the camera. |
+
redraw() | +none | +Redraw the graph. Useful after the camera position is changed externally, + when data is changed, or when the layout of the webpage changed. | +
setSize(width, height) | +none | +Parameters width and height are strings,
+ containing a new size for the graph. Size can be provided in pixels
+ or in percentages. |
+
setCameraPosition (pos) | +{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7} | +Set the rotation and position of the camera. Parameter pos
+ is an object which contains three parameters: horizontal ,
+ vertical , and distance .
+ Parameter horizontal is a value in radians and can have any
+ value (but normally in the range of 0 and 2*Pi).
+ Parameter vertical is a value in radians between 0 and 0.5*Pi.
+ Parameter distance 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.
+ |
+
- 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 camerapositionchange
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 camerapositionchange
event.
@@ -583,40 +598,40 @@ graph3d.on("camerapositionchange",oncamerapositionchange);
- The following events are available. + The following events are available.
name | -Description | -Properties | -
---|---|---|
camerapositionchange | -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 setCameraPosition method.
- The new camera position can be retrieved by calling the method
- getCameraPosition . |
-
-
|
-
name | +Description | +Properties | +
camerapositionchange | +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 setCameraPosition method.
+ The new camera position can be retrieved by calling the method
+ getCameraPosition . |
+
+
|
+
- 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.
diff --git a/docs/index.html b/docs/index.html index 75686de5..48eff665 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,11 +49,13 @@ Graph. Display a graph or network with nodes and edges. +