Graph is a visualization to display graphs and networks consisting of nodes @@ -54,6 +32,37 @@ vis.js library.
+ +Here a basic graph example. Note that unlike the @@ -150,7 +159,7 @@ The constructor accepts three parameters: -
The data parameter of the Graph constructor is an object
which can contain different types of data.
@@ -608,7 +617,7 @@ var graph = new vis.Graph(container, data);
-
Options can be used to customize the graph. Options are defined as a JSON object. @@ -631,239 +640,353 @@ var options = {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| edges.color | -String | -"#2B7CE9" | -The default color of a edge. | -
| edges.dash | -Object | -Object | -
- Object containing default properties for dashed lines.
- Available properties: length, gap,
- altLength.
- |
-
| edges.dash.altLength | -number | -none | -Default length of the alternated dash in pixels on a dashed line.
- Specifying dash.altLength allows for creating
- a dashed line with a dash-dot style, for example when
- dash.length=10 and dash.altLength=5.
- See also the option dahs.length.
- Only applicable when the line style is dash-line. |
-
| edges.dash.length | -number | -10 | -Default length of a dash in pixels on a dashed line.
- Only applicable when the line style is dash-line. |
-
| edges.dash.gap | -number | -5 | -Default length of a gap in pixels on a dashed line.
- Only applicable when the line style is dash-line. |
-
| edges.length | -Number | -100 | -The default length of a edge. | -
| edges.style | -String | -"line" | -The default style of a edge.
- Choose from line (default), arrow,
- arrow-center, dash-line. |
-
| edges.width | -Number | -1 | -The default width of a edge. | -
| groups | -Object | -none | -It is possible to specify custom styles for groups. - Each node assigned a group gets the specified style. - See Groups for an overview of the available styles - and an example. - | -
| height | -String | -"400px" | -The height of the graph in pixels or as a percentage. | -
| nodes.color | -String | Object | -Object | -Default color of the nodes. When color is a string, the color is applied - to both background as well as the border of the node. | -
| nodes.color.background | -String | -"#97C2FC" | -Default background color of the nodes | -
| nodes.color.border | -String | -"#2B7CE9" | -Default border color of the nodes | -
| nodes.color.highlight | -String | Object | -Object | -Default color of the node when the node is selected. Applied to - both border and background of the node. | -
| nodes.color.highlight.background | -String | -"#D2E5FF" | -Default background color of the node when selected. | -
| nodes.color.highlight.border | -String | -"#2B7CE9" | -Default border color of the node when selected. | -
| nodes.fontColor | -String | -"black" | -Default font color for the text label in the nodes. | -
| nodes.fontFace | -String | -"sans" | -Default font face for the text label in the nodes, for example "verdana" or "arial". | -
| nodes.fontSize | -Number | -14 | -Default font size in pixels for the text label in the nodes. | -
| nodes.group | -String | -none | -Default group for the nodes. | -
| nodes.image | -String | -none | -Default image url for the nodes. only applicable with shape image. |
-
| nodes.widthMin | -Number | -16 | -The minimum width for a scaled image. Only applicable with shape image. |
-
| nodes.widthMax | -Number | -64 | -The maximum width for a scaled image. Only applicable with shape image. |
-
| nodes.shape | -String | -"ellipse" | -The default shape for all nodes.
- Choose from
- ellipse (default), circle, box,
- database, image, label, dot,
- star, triangle, triangleDown, and square.
- This shape can be overridden by a group shape, or by a shape of an individual node. |
-
| nodes.radius | -Number | -5 | -The default radius for a node. Only applicable with shape dot. |
-
| nodes.radiusMin | -Number | -5 | -The minimum radius for a scaled node. Only applicable with shape dot. |
-
| nodes.radiusMax | -Number | -20 | -The maximum radius for a scaled node. Only applicable with shape dot. |
-
| selectable | -Boolean | -true | -If true, nodes in the graph can be selected by clicking them. - Long press can be used to select multiple nodes. | -
| stabilize | -Boolean | -true | -If true, the graph is stabilized before displaying it. If false, - the nodes move to a stabe position visibly in an animated way. | -
| width | -String | -"400px" | -The width of the graph in pixels or as a percentage. | -
| Name | +Type | +Default | +Description | +
| clustering | +Object | +none | ++ Clustering configuration. Clustering is turned off by default. See section Clustering for an overview of the available options. + | +
| edges | +Object | +none | ++ Configuration options applied to all edges. See section Edges configuration for an overview of the available options. + | +
| groups | +Object | +none | +It is possible to specify custom styles for groups. + Each node assigned a group gets the specified style. + See Groups configuration for an overview of the available styles + and an example. + | +
| height | +String | +"400px" | +The height of the graph in pixels or as a percentage. | +
| keyboardNavigation | +Object | +none | ++ Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section Keyboard navigation for an overview of the available options. + | +
| navigationUI | +Object | +none | ++ Configuration options for the navigation controls. See section Navigation controls for an overview of the available options. + | +
| nodes | +Object | +none | ++ Configuration options applied to all nodes. See section Nodes configuration for an overview of the available options. + | +
| selectable | +Boolean | +true | +If true, nodes in the graph can be selected by clicking them. + Long press can be used to select multiple nodes. | +
| stabilize | +Boolean | +true | +If true, the graph is stabilized before displaying it. If false, + the nodes move to a stabe position visibly in an animated way. | +
| width | +String | +"400px" | +The width of the graph in pixels or as a percentage. | +
+ Nodes can be configured with different styles and shapes. To configure nodes, provide an object named nodes in the options for the Graph.
+
+ For example to give the nodes a custom color, shape, and size: +
+
+var options = {
+ // ...
+ nodes: {
+ color: {
+ background: 'white',
+ border: 'red',
+ highlight: {
+ background: 'pink',
+ border: 'red'
+ }
+ },
+ shape: 'star',
+ radius: 24
+ }
+};
+
+
+
+ The following options are available for nodes. These options must be created
+ inside an object nodes in the graphs options object.
| color | +String | Object | +Object | +Default color of the nodes. When color is a string, the color is applied + to both background as well as the border of the node. | +
| color.background | +String | +"#97C2FC" | +Default background color of the nodes | +
| color.border | +String | +"#2B7CE9" | +Default border color of the nodes | +
| color.highlight | +String | Object | +Object | +Default color of the node when the node is selected. In case of a string, the color is applied to + both border and background of the node. | +
| color.highlight.background | +String | +"#D2E5FF" | +Default background color of the node when selected. | +
| color.highlight.border | +String | +"#2B7CE9" | +Default border color of the node when selected. | +
| fontColor | +String | +"black" | +Default font color for the text label in the nodes. | +
| fontFace | +String | +"sans" | +Default font face for the text label in the nodes, for example "verdana" or "arial". | +
| fontSize | +Number | +14 | +Default font size in pixels for the text label in the nodes. | +
| group | +String | +none | +Default group for the nodes. | +
| image | +String | +none | +Default image url for the nodes. only applicable to shape image. |
+
| widthMin | +Number | +16 | +The minimum width for a scaled image. Only applicable to shape image. |
+
| widthMax | +Number | +64 | +The maximum width for a scaled image. Only applicable to shape image. |
+
| shape | +String | +"ellipse" | +The default shape for all nodes.
+ Choose from
+ ellipse (default), circle, box,
+ database, image, label, dot,
+ star, triangle, triangleDown, and square.
+ This shape can be overridden by a group shape, or by a shape of an individual node. |
+
| radius | +Number | +5 | +The default radius for a node. Only applicable to shapes dot,
+ star, triangle, triangleDown, and square. |
+
| radiusMin | +Number | +5 | +The minimum radius for a scaled node. Only applicable to shapes dot,
+ star, triangle, triangleDown, and square. |
+
| radiusMax | +Number | +20 | +The maximum radius for a scaled node. Only applicable to shapes dot,
+ star, triangle, triangleDown, and square. |
+
+ Edges can be configured with different length and styling. To configure edges, provide an object named edges in the options for the Graph.
+
+ For example to set the width of all edges to 2 pixels and give them a red color: +
+
+var options = {
+ // ...
+ edges: {
+ color: 'red',
+ width: 2
+ }
+};
+
+
+
+ The following options are available for edges. These options must be created
+ inside an object edges in the graphs options object.
+
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| color | +String | +"#2B7CE9" | +The default color of a edge. | +
| dash | +Object | +Object | +
+ Object containing default properties for dashed lines.
+ Available properties: length, gap,
+ altLength.
+ |
+
| dash.altLength | +number | +none | +Default length of the alternated dash in pixels on a dashed line.
+ Specifying dash.altLength allows for creating
+ a dashed line with a dash-dot style, for example when
+ dash.length=10 and dash.altLength=5.
+ See also the option dahs.length.
+ Only applicable when the line style is dash-line. |
+
| dash.length | +number | +10 | +Default length of a dash in pixels on a dashed line.
+ Only applicable when the line style is dash-line. |
+
| dash.gap | +number | +5 | +Default length of a gap in pixels on a dashed line.
+ Only applicable when the line style is dash-line. |
+
| length | +Number | +100 | +The default length of a edge. | +
| style | +String | +"line" | +The default style of a edge.
+ Choose from line (default), arrow,
+ arrow-center, dash-line. |
+
| width | +Number | +1 | +The default width of a edge. | +
It is possible to specify custom styles for groups of nodes. Each node having assigned to this group gets the specified style. @@ -935,9 +1058,10 @@ var nodes = [
- The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
- sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
- responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
- connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
- Hubs are defined as the nodes with the top 3% highest amount of connections (assuming normal distribution). These hubs then "grow", meaning
- they contain the nodes they are connected to within themselves. The edges that were connected to the nodes that are absorbed will be reconnected to the cluster.
-
-
- A cluster is just a node that has references to the nodes and edges it contains. It has an internal counter to keep track of its size, which is then used
- to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system.
-
-
- The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well.
- The default state for clustering is off.
+ The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
+ sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
+ responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
+ connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
+ Hubs are defined as the nodes with the top 3% highest amount of connections (assuming normal distribution). These hubs then "grow", meaning
+ they contain the nodes they are connected to within themselves. The edges that were connected to the nodes that are absorbed will be reconnected to the cluster.
+
+
+ A cluster is just a node that has references to the nodes and edges it contains. It has an internal counter to keep track of its size, which is then used
+ to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system.
+
+
+ The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well.
+ The default state for clustering is off.
// These variables must be defined in an options object named clustering.
+// If a variable is not supplied, the default value is used.
+var options = {
+ clustering: {
+ enabled: false,
+ initialMaxNumberOfNodes: 100,
+ absoluteMaxNumberOfNodes:500,
+ reduceToMaxNumberOfNodes:300,
+ chainThreshold: 0.4,
+ clusterEdgeThreshold: 20,
+ sectorThreshold: 50,
+ screenSizeThreshold: 0.2,
+ fontSizeMultiplier: 4.0,
+ forceAmplification: 0.6,
+ distanceAmplification: 0.2,
+ edgeGrowth: 11,
+ clusterSizeWidthFactor: 10,
+ clusterSizeHeightFactor: 10,
+ clusterSizeRadiusFactor: 10,
+ activeAreaBoxSize: 100
+ }
+}
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| enabled | -Boolean | -false | -On/off switch for clustering. It is assumed clustering is enabled in the descriptions below. | -
| initialMaxNumberOfNodes | -Number | -100 | -If the initial amount of nodes is larger than this value, clustering starts until the total number of nodes is less than this value. | -
| absoluteMaxNumberOfNodes | -Number | -500 | -While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes,
- clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid. |
-
| reduceToMaxNumberOfNodes | -Number | -300 | -While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes,
- clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid. |
-
| chainThreshold | -Number | -0.4 | -Because of the clustering methods used, long chains of nodes can be formed. To reduce these chains, this threshold is used.
- A chainThreshold of 0.4 means that no more than 40% of all nodes are allowed to be a chain node (two connections).
- If there are more, they are clustered together. |
-
| clusterEdgeThreshold | -Number | -20 | -This is the absolute edge length threshold in pixels. If the edge is smaller on screen (that means zooming out reduces this length) - the node will be clustered. This is triggered when zooming out. | -
| sectorThreshold | -Integer | -50 | -If a cluster larger than sectorThreshold is opened, a seperate instance called a sector, will be created. All the simulation of
- nodes outside of this instance will be paused. This is to maintain performance and clarity when examining large clusters.
- A sector is collapsed when zooming out far enough. Also, when opening a cluster, if this cluster is smaller than this value, it is fully unpacked. |
-
| screenSizeThreshold | -Number | -0.2 | -When zooming in, the clusters become bigger. A screenSizeThreshold of 0.2 means that if the width or height of this cluster
- becomes bigger than 20% of the width or height of the canvas, the cluster is opened. If a sector has been created, if the sector is smaller than
- 20%, we collapse this sector. |
-
| fontSizeMultiplier | -Number | -4.0 | -This parameter denotes the increase in fontSize of the cluster when a single node is added to it. | -
| forceAmplification | -Number | -0.6 | -This factor is used to calculate the increase of the repulsive force of a cluster. It is calculated by the following
- formula: repulsingForce *= 1 + (clusterSize * forceAmplification). |
-
| distanceAmplification | -Number | -0.2 | -This factor is used to calculate the increase in effective range of the repulsive force of the cluster.
- A larger cluster has a longer range. It is calculated by the following
- formula: minDistance *= 1 + (clusterSize * distanceAmplification). |
-
| edgeGrowth | -Number | -11 | -This factor determines the elongation of edges connected to a cluster. | -
| clusterSizeWidthFactor | -Number | -10 | -This factor determines how much the width of a cluster increases in pixels per added node. | -
| clusterSizeHeightFactor | -Number | -10 | -This factor determines how much the height of a cluster increases in pixels per added node. | -
| clusterSizeRadiusFactor | -Number | -10 | -This factor determines how much the radius of a cluster increases in pixels per added node. | -
| activeAreaBoxSize | -Number | -100 | -Imagine a square with an edge length of activeAreaBoxSize pixels around your cursor.
- If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
- This is regardless of the zoom level. |
-
| Name | +Type | +Default | +Description | +
| enabled | +Boolean | +false | +On/off switch for clustering. It is assumed clustering is enabled in the descriptions below. | +
| initialMaxNumberOfNodes | +Number | +100 | +If the initial amount of nodes is larger than this value, clustering starts until the total number of nodes is less than this value. | +
| absoluteMaxNumberOfNodes | +Number | +500 | +While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes,
+ clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continuously fluid. |
+
| reduceToMaxNumberOfNodes | +Number | +300 | +While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes,
+ clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid. |
+
| chainThreshold | +Number | +0.4 | +Because of the clustering methods used, long chains of nodes can be formed. To reduce these chains, this threshold is used.
+ A chainThreshold of 0.4 means that no more than 40% of all nodes are allowed to be a chain node (two connections).
+ If there are more, they are clustered together. |
+
| clusterEdgeThreshold | +Number | +20 | +This is the absolute edge length threshold in pixels. If the edge is smaller on screen (that means zooming out reduces this length) + the node will be clustered. This is triggered when zooming out. | +
| sectorThreshold | +Integer | +50 | +If a cluster larger than sectorThreshold is opened, a seperate instance called a sector, will be created. All the simulation of
+ nodes outside of this instance will be paused. This is to maintain performance and clarity when examining large clusters.
+ A sector is collapsed when zooming out far enough. Also, when opening a cluster, if this cluster is smaller than this value, it is fully unpacked. |
+
| screenSizeThreshold | +Number | +0.2 | +When zooming in, the clusters become bigger. A screenSizeThreshold of 0.2 means that if the width or height of this cluster
+ becomes bigger than 20% of the width or height of the canvas, the cluster is opened. If a sector has been created, if the sector is smaller than
+ 20%, we collapse this sector. |
+
| fontSizeMultiplier | +Number | +4.0 | +This parameter denotes the increase in fontSize of the cluster when a single node is added to it. | +
| forceAmplification | +Number | +0.6 | +This factor is used to calculate the increase of the repulsive force of a cluster. It is calculated by the following
+ formula: repulsingForce *= 1 + (clusterSize * forceAmplification). |
+
| distanceAmplification | +Number | +0.2 | +This factor is used to calculate the increase in effective range of the repulsive force of the cluster.
+ A larger cluster has a longer range. It is calculated by the following
+ formula: minDistance *= 1 + (clusterSize * distanceAmplification). |
+
| edgeGrowth | +Number | +11 | +This factor determines the elongation of edges connected to a cluster. | +
| clusterSizeWidthFactor | +Number | +10 | +This factor determines how much the width of a cluster increases in pixels per added node. | +
| clusterSizeHeightFactor | +Number | +10 | +This factor determines how much the height of a cluster increases in pixels per added node. | +
| clusterSizeRadiusFactor | +Number | +10 | +This factor determines how much the radius of a cluster increases in pixels per added node. | +
| activeAreaBoxSize | +Number | +100 | +Imagine a square with an edge length of activeAreaBoxSize pixels around your cursor.
+ If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
+ This is regardless of the zoom level. |
+
- As of 0.4.0, a node-based navigation GUI system has been added to vis.js. - It can be configured with the following user-configurable settings. - The default state for the GUI navigation elements is off. + Graph has a menu with navigation controls, which is disabled by default. + It can be configured with the following settings.
// These variables must be defined in an options object named navigationUI.
// If a variable is not supplied, the default value is used.
-options: {
+var options: {
navigationUI: {
enabled: false,
initiallyVisible: true,
enableToggling: true,
iconPath: this._getIconURL() // automatic loading of the default icons
- },
+ }
}
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| enabled | -Boolean | -false | -On/off switch for the navigation UI elements. | -
| initiallyVisible | -Boolean | -true | -The UI elements can be toggled by pressing the "u" key. If initiallyVisible is false, the UI is hidden
- until "u" is pressed on the keyboard.
- |
-
| enableToggling | -Boolean | -true | -Enable or disable the option to press "u" to toggle the UI elements. If the UI is initially hidden and the toggling is off, the UI cannot be used! | -
| iconPath | -string | -[path to vis.js]/UI_icons/ | -The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js. | -
| Name | +Type | +Default | +Description | +
| enabled | +Boolean | +false | +On/off switch for the navigation UI elements. | +
| initiallyVisible | +Boolean | +true | +The UI elements can be toggled by pressing the "u" key. If initiallyVisible is false, the UI is hidden
+ until "u" is pressed on the keyboard.
+ |
+
| enableToggling | +Boolean | +true | +Enable or disable the option to press "u" to toggle the UI elements. If the UI is initially hidden and the toggling is off, the UI cannot be used! | +
| iconPath | +string | +[path to vis.js]/UI_icons/ | +The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js. | +
- As of 0.4.0, keyboard navigation has been added to vis.js. - It can be configured with the following user-configurable settings. - The default state for the keyboard navigation is off. The predefined keys can be found in the UI example. + The graph can be navigated using shortcut keys. + It can be configured with the following user-configurable settings. + The default state for the keyboard navigation is off. The predefined keys can be found in the UI example.
// These variables must be defined in an options object named keyboardNavigation.
// If a variable is not supplied, the default value is used
-options: {
+var options: {
keyboardNavigation: {
enabled: false,
xMovementSpeed: 10,
@@ -1217,38 +1361,38 @@ options: {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| enabled | -Boolean | -false | -On/off switch for the keyboard navigation. | -
| xMovementSpeed | -Number | -10 | -This defines the speed of the camera movement in the x direction when using the keyboard navigation. - | -
| yMovementSpeed | -Boolean | -10 | -This defines the speed of the camera movement in the y direction when using the keyboard navigation. | -
| zoomMovementSpeed | -string | -0.02 | -This defines the zoomspeed when using the keyboard navigation. | -
| Name | +Type | +Default | +Description | +
| enabled | +Boolean | +false | +On/off switch for the keyboard navigation. | +
| xMovementSpeed | +Number | +10 | +This defines the speed of the camera movement in the x direction when using the keyboard navigation. + | +
| yMovementSpeed | +Boolean | +10 | +This defines the speed of the camera movement in the y direction when using the keyboard navigation. | +
| zoomMovementSpeed | +string | +0.02 | +This defines the zoomspeed when using the keyboard navigation. | +
| name | Description | @@ -1364,7 +1504,7 @@ vis.events.addListener(graph, 'select', onSelect);
|---|
All code and data is processed and rendered in the browser. No data is sent to any server. diff --git a/docs/timeline.html b/docs/timeline.html index c2335c60..93dfc599 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -14,6 +14,16 @@
+ The Timeline is an interactive visualization chart to visualize data in time. + The data items can take place on a single date, or have a start and end date (a range). + You can freely move and zoom in the timeline by dragging and scrolling in the + Timeline. Items can be created, edited, and deleted in the timeline. + The time scale on the axis is adjusted automatically, and supports scales ranging + from milliseconds to years. +
+- The Timeline is an interactive visualization chart to visualize data in time. - The data items can take place on a single date, or have a start and end date (a range). - You can freely move and zoom in the timeline by dragging and scrolling in the - Timeline. Items can be created, edited, and deleted in the timeline. - The time scale on the axis is adjusted automatically, and supports scales ranging - from milliseconds to years. -
-The following code shows how to create a Timeline and provide it with data. diff --git a/examples/timeline/01_basic.html b/examples/timeline/01_basic.html index 514eefd1..9efa0301 100644 --- a/examples/timeline/01_basic.html +++ b/examples/timeline/01_basic.html @@ -7,6 +7,8 @@ body, html { font-family: sans-serif; } + +