| x: | "+t.point.x+" |
| y: | "+t.point.y+" |
| z: | "+t.point.z+" |
| Options: | ||
| x: | "+t.point.x+" |
| y: | "+t.point.y+" |
| z: | "+t.point.z+" |
| Options: | ||
x, y, and z,
and can optionally have a property style and filter.
- Graph2d can be provided with two types of data: + Graph2d can be provided with two types of data:
- Like the items, groups are regular JavaScript Arrays and Objects.
- Using groups, items can be grouped together.
- Items are filtered per group, and displayed as individual graphs. Groups can contain the properties id,
- content, className (optional) and options (optional).
+ Like the items, groups are regular JavaScript Arrays and Objects.
+ Using groups, items can be grouped together.
+ Items are filtered per group, and displayed as individual graphs. Groups can contain the properties id,
+ content, className (optional) and options (optional).
- Groups can be applied to a timeline using the method setGroups.
- A table with groups can be created like:
+ Groups can be applied to a timeline using the method setGroups.
+ A table with groups can be created like:
@@ -203,51 +205,51 @@ groups.add({
- Groups can have the following properties:
+ Groups can have the following properties:
| Name | -Type | -Required | -Description | -
|---|---|---|---|
| id | -String | Number | -yes | -An id for the group. The group will display all items having a
- property group which matches the id
- of the group. |
-
| content | -String | -yes | -The contents of the group. This can be plain text or html code. | -
| className | -String | -no | -This field is optional. A className can be used to give groups - an individual css style. - | -
| options | -JSON object | -no | -This field is optional. The options can be used to give a group a specific draw style. - Any options that are colored green in the Configuration Options can be used as options here. - |
| visible | -Boolean | -true | -This field is optional. If false, the graph will not be drawn. - |
| Name | +Type | +Required | +Description | +
| id | +String | Number | +yes | +An id for the group. The group will display all items having a
+ property group which matches the id
+ of the group. |
+
| content | +String | +yes | +The contents of the group. This can be plain text or html code. | +
| className | +String | +no | +This field is optional. A className can be used to give groups + an individual css style. + | +
| options | +JSON object | +no | +This field is optional. The options can be used to give a group a specific draw style. + Any options that are colored green in the Configuration Options can be used as options here. + |
| visible | +Boolean | +true | +This field is optional. If false, this group will not be drawn. + |
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| yAxisOrientation | -String | -'left' | -This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled - with an axis, it will not be shown. | -
| defaultGroup | -String | -'default' | -This is the label for the default, ungrouped items when shown in a legend. | -
| sort | -Boolean | -true | -This determines if the items are sorted automatically. - They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance. | -
| sampling | -Boolean | -true | -If sampling is enabled, graph2D will automatically determine the amount of points per pixel. - If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance. | -
| graphHeight | -Number | String | -'400px' | -This is the height of the graph SVG canvas. - If it is larger than the height of the outer frame, you can drag up and down - the vertical direction as well as the usual horizontal direction. | -
| shaded | -Boolean | Object | -false | -Toggle a shaded area with the default settings. | -
| shaded.enabled | -Boolean | -false | -This toggles the shading. | -
| shaded.orientation | -String | -'bottom' | -This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'. | -
| style | -String | -'line' | -This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'. | -
| barChart.width | -Number | -50 | -The width of the bars. | -
| barChart.align | -String | -'center' | -The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'. | -
| catmullRom | -Boolean | Object | -true | -Toggle the interpolation with the default settings. For more customization use the JSON format. | -
| catmullRom.enabled | -Boolean | -true | -Toggle the interpolation. | -
| catmullRom.parametrization | -String | -'centripetal' | -Define the type of parametrizaion. Example 7 shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant. - If catmullRom is disabled, linear interpolation is used. | -
| drawPoints | -Boolean | Object | -true | -Toggle the drawing of the datapoints with the default settings. | -
| drawPoints.enabled | -Boolean | -true | -Toggle the drawing of the datapoints. | -
| drawPoints.size | -Number | -6 | -Determine the size at which the data points are drawn. | -
| drawPoints.style | -String | -'square' | -Determine the shape of the data points. The options are 'square' or 'circle'. | -
| dataAxis.showMinorLabels | -Boolean | -true | -Toggle the drawing of the minor labels on the Y axis. | -
| dataAxis.showMajorLabels | -Boolean | -true | -Toggle the drawing of the major labels on the Y axis. | -
| dataAxis.icons | -Boolean | -false | -Toggle the drawing of automatically generated icons the Y axis. | -
| dataAxis.width | -Number | String | -'40px' | -Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values. | -
| dataAxis.visible | -Boolean | -true | -Show or hide the data axis. | -
| legend | -Boolean | -false | -Toggle the legend with the default settings. | -
| legend.enabled | -Boolean | -false | -Toggle the legend. | -
| legend.icons | -Boolean | -true | -Show automatically generated icons on the legend. | -
| legend.left.visible | -Boolean | -true | -Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis. | -
| legend.left.position | -String | -'top-left' | -Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'. | -
| legend.right.visible | -Boolean | -true | -This toggles the visibility of the legend that is coupled with the right axis. | -
| legend.right.position | -String | -'top-right' | -Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'. | -
| Name | +Type | +Default | +Description | +
| yAxisOrientation | +String | +'left' | +This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled + with an axis, it will not be shown. | +
| defaultGroup | +String | +'default' | +This is the label for the default, ungrouped items when shown in a legend. | +
| sort | +Boolean | +true | +This determines if the items are sorted automatically. + They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance. | +
| sampling | +Boolean | +true | +If sampling is enabled, Graph2d will automatically determine the amount of points per pixel. + If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance. | +
| graphHeight | +Number | String | +'400px' | +This is the height of the graph SVG canvas. + If it is larger than the height of the outer frame, you can drag up and down + the vertical direction as well as the usual horizontal direction. | +
| shaded | +Boolean | Object | +false | +Toggle a shaded area with the default settings. | +
| shaded.enabled | +Boolean | +false | +This toggles the shading. | +
| shaded.orientation | +String | +'bottom' | +This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'. | +
| style | +String | +'line' | +This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'. | +
| barChart.width | +Number | +50 | +The width of the bars. | +
| barChart.align | +String | +'center' | +The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'. | +
| barChart.handleOverlap | +String | +'overlap' | +You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
+ overlap, sideBySide, stack.
+ See example 10 for more information.
+ When using groups, see example 11.
+ |
+
| catmullRom | +Boolean | Object | +true | +Toggle the interpolation with the default settings. For more customization use the JSON format. | +
| catmullRom.enabled | +Boolean | +true | +Toggle the interpolation. | +
| catmullRom.parametrization | +String | +'centripetal' | +Define the type of parametrizaion. Example 7 shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant. + If catmullRom is disabled, linear interpolation is used. | +
| drawPoints | +Boolean | Object | +true | +Toggle the drawing of the datapoints with the default settings. | +
| drawPoints.enabled | +Boolean | +true | +Toggle the drawing of the datapoints. | +
| drawPoints.size | +Number | +6 | +Determine the size at which the data points are drawn. | +
| drawPoints.style | +String | +'square' | +Determine the shape of the data points. The options are 'square' or 'circle'. | +
| dataAxis.showMinorLabels | +Boolean | +true | +Toggle the drawing of the minor labels on the Y axis. | +
| dataAxis.showMajorLabels | +Boolean | +true | +Toggle the drawing of the major labels on the Y axis. | +
| dataAxis.icons | +Boolean | +false | +Toggle the drawing of automatically generated icons the Y axis. | +
| dataAxis.width | +Number | String | +'40px' | +Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values. | +
| dataAxis.visible | +Boolean | +true | +Show or hide the data axis. | +
| groups.visibility | +Object | ++ | You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since + this is not communicated across instances of graph2d. Take a look at Example 14 + for more explaination. + | +
| legend | +Boolean | +false | +Toggle the legend with the default settings. | +
| legend.enabled | +Boolean | +false | +Toggle the legend. | +
| legend.icons | +Boolean | +true | +Show automatically generated icons on the legend. | +
| legend.left.visible | +Boolean | +true | +Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis. | +
| legend.left.position | +String | +'top-left' | +Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'. | +
| legend.right.visible | +Boolean | +true | +This toggles the visibility of the legend that is coupled with the right axis. | +
| legend.right.position | +String | +'top-right' | +Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'. | +
| Name | Type | Default | Description | -
|---|---|---|---|
| autoResize | boolean | true | If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function redraw(). |
-
| clickToUse | +boolean | +false | +When a Graph2d is configured to be clickToUse, it will react to mouse and touch events only when active.
+ When active, a blue shadow border is displayed around the Graph2d. The Graph2d is set active by clicking on it, and is changed to inactive again by clicking outside the Graph2d or by pressing the ESC key. |
+
| end | Date | Number | String | none | The initial end date for the axis of the timeline. - If not provided, the latest date present in the items set is taken as - end date. | -
| height | Number | String | none | The height of the timeline in pixels or as a percentage.
- When height is undefined or null, the height of the timeline is automatically
- adjusted to fit the contents.
- It is possible to set a maximum height using option maxHeight
- to prevent the timeline from getting too high in case of automatically
- calculated height.
+ When height is undefined or null, the height of the timeline is automatically
+ adjusted to fit the contents.
+ It is possible to set a maximum height using option maxHeight
+ to prevent the timeline from getting too high in case of automatically
+ calculated height.
|
-
| margin.axis | -Number | -20 | -The minimal margin in pixels between items and the time axis. | -
| locale | +String | +none | +Select a locale for the Graph2d. See section Localization for more information. | +
| margin.item | -Number | -10 | -The minimal margin in pixels between items. | -
| locales | +Object | +none | +A map with i18n locales. See section Localization for more information. | +
| max | Date | Number | String | none | Set a maximum Date for the visible range. - It will not be possible to move beyond this maximum. + It will not be possible to move beyond this maximum. | -
| maxHeight | Number | String | none | Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px". | -
| min | Date | Number | String | none | Set a minimum Date for the visible range. - It will not be possible to move beyond this minimum. + It will not be possible to move beyond this minimum. | -
| minHeight | Number | String | none | Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px". | -
| orientation | String | 'bottom' | Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top. | -
| showCurrentTime | boolean | true | Show a vertical bar at the current time. | -
| showCustomTime | boolean | false | Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event timechange is fired repeatedly. After the bar is dragged, the event timechanged is fired once. |
-
| showMajorLabels | boolean | true | By default, the timeline shows both minor and major date labels on the
- time axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMajorLabels is false, no major labels
- are shown. |
-
| showMinorLabels | boolean | true | By default, the timeline shows both minor and major date labels on the
- time axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMinorLabels is false, no minor labels
- are shown. When both showMajorLabels and
- showMinorLabels are false, no horizontal axis will be
- visible. |
-
| start | Date | Number | String | none | The initial start date for the axis of the timeline. - If not provided, the earliest date present in the events is taken as start date. | -
| width | String | '100%' | The width of the timeline in pixels or as a percentage. | -
| zoomMax | Number | 315360000000000 | Set a maximum zoom interval for the visible range in milliseconds. - It will not be possible to zoom out further than this maximum. - Default value equals about 10000 years. + It will not be possible to zoom out further than this maximum. + Default value equals about 10000 years. | -
| zoomMin | Number | 10 | Set a minimum zoom interval for the visible range in milliseconds. - It will not be possible to zoom in further than this minimum. + It will not be possible to zoom in further than this minimum. | -
- The Graph2d supports the following methods. + The Graph2d supports the following methods.
| Method | -Return Type | -Description | -
|---|---|---|
| clear([what]) | -none | -
- Clear the Graph2d. An object can be passed specifying which sections to clear: items, groups,
- and/or options. By Default, items, groups and options are cleared, i.e. what = {items: true, groups: true, options: true}. Example usage:
+ |
| Method | +Return Type | +Description | +
| clear([what]) | +none | +
+ Clear the Graph2d. An object can be passed specifying which sections to clear: items, groups,
+ and/or options. By Default, items, groups and options are cleared, i.e. what = {items: true, groups: true, options: true}. Example usage:
Graph2d.clear(); // clear items, groups, and options
Graph2d.clear({options: true}); // clear options only
- |
-
| destroy() | -none | -Destroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up. - | -
| getCustomTime() | -Date | -Retrieve the custom time. Only applicable when the option showCustomTime is true.
- |
-
| setCustomTime(time) | -none | -Adjust the custom time bar. Only applicable when the option showCustomTime is true. time is a Date object.
- |
-
| getLegend(groupId, iconWidth, iconHeight) | -SVGelement, String, String | -Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right). - | -
| getWindow() | -Object | -Get the current visible window. Returns an object with properties start: Date and end: Date. |
-
| getItemRange() | -Object | -Get the range of all the items as an object containing min: Date and max: Date. |
-
| fit() | -none | -Adjust the visible window such that it fits all items. - | -
| on(event, callback) | -none | -Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. |
-
| off(event, callback) | -none | -Remove an event listener created before via function on(event, callback). See section Events for more information. |
-
| redraw() | -none | -Force a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false. - | -
| isGroupVisible(groupId) | -Boolean | -This checks if the visible option of the supplied group (by ID) is true or false. - | -
| setGroups(groups) | -none | -Set a data set with groups for the Graph2d.
- groups can be an Array with Objects,
- a DataSet, or a DataView. For each of the groups, the items of the
- Graph2d are filtered on the property group, which
- must correspond with the id of the group.
- |
-
| setItems(items) | -none | -Set a data set with items for the Graph2d.
- items can be an Array with Objects,
- a DataSet, or a DataView.
- |
-
| setOptions(options) | -none | -Set or update options. It is possible to change any option of the Graph2d at any time. You can for example switch orientation on the fly. - | -
| setWindow(start, end) | -none | -Set the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. |
-
| destroy() | +none | +Destroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up. + | +
| getCurrentTime() | +Date | +Get the current time. Only applicable when option showCurrentTime is true.
+ |
+
| getCustomTime() | +Date | +Retrieve the custom time. Only applicable when the option showCustomTime is true.
+ |
+
| getLegend(groupId, iconWidth, iconHeight) | +SVGelement, String, String | +Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right). + | +
| getWindow() | +Object | +Get the current visible window. Returns an object with properties start: Date and end: Date. |
+
| getItemRange() | +Object | +Get the range of all the items as an object containing min: Date and max: Date. |
+
| fit() | +none | +Adjust the visible window such that it fits all items. + | +
| isGroupVisible(groupId) | +Boolean | +This checks if the visible option of the supplied group (by ID) is true or false. + | +
| moveTo(time [, options]) | +none | +Move the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options:
+
|
+
| on(event, callback) | +none | +Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. |
+
| off(event, callback) | +none | +Remove an event listener created before via function on(event, callback). See section Events for more information. |
+
| redraw() | +none | +Force a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false. + | +
| setCurrentTime(time) | +none | +Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
+ time can be a Date object, numeric timestamp, or ISO date string.
+ Only applicable when option showCurrentTime is true. |
+
| setCustomTime(time) | +none | +Adjust the custom time bar. Only applicable when the option showCustomTime is true. time can be a Date object, numeric timestamp, or ISO date string.
+ |
+
| setGroups(groups) | +none | +Set a data set with groups for the Graph2d.
+ groups can be an Array with Objects,
+ a DataSet, or a DataView. For each of the groups, the items of the
+ Graph2d are filtered on the property group, which
+ must correspond with the id of the group.
+ |
+
| setItems(items) | +none | +Set a data set with items for the Graph2d.
+ items can be an Array with Objects,
+ a DataSet, or a DataView.
+ |
+
| setOptions(options) | +none | +Set or update options. It is possible to change any option of the Graph2d at any time. You can for example switch orientation on the fly. + | +
| setWindow(start, end) | +none | +Set the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. |
+
- Graph2d fires events when changing the visible window by dragging, when - selecting items, and when dragging the custom time bar. + Graph2d fires events when changing the visible window by dragging, when + selecting items, and when dragging the custom time bar.
- Here an example on how to listen for a rangeChanged event.
+ Here an example on how to listen for a rangeChanged event.
@@ -786,7 +839,7 @@ Graph2d.on('select', function (properties) {
- A listener can be removed via the function off:
+ A listener can be removed via the function off:
@@ -805,87 +858,143 @@ Graph2d.off('rangechanged', onChange);
- The following events are available.
+ The following events are available.
| name | -Description | -Properties | -
|---|---|---|
| rangechange | -Fired repeatedly when the user is dragging the Graph2d window. - | -
-
|
-
| rangechanged | -Fired once after the user has dragged the Graph2d window. - | -
-
|
-
| timechange | -Fired repeatedly when the user is dragging the custom time bar. - Only available when the custom time bar is enabled. - | -
-
|
-
| timechanged | -Fired once after the user has dragged the custom time bar. - Only available when the custom time bar is enabled. - | -
-
|
-
| name | +Description | +Properties | +
| rangechange | +Fired repeatedly when the user is dragging the Graph2d window. + | +
+
|
+
| rangechanged | +Fired once after the user has dragged the Graph2d window. + | +
+
|
+
| timechange | +Fired repeatedly when the user is dragging the custom time bar. + Only available when the custom time bar is enabled. + | +
+
|
+
| timechanged | +Fired once after the user has dragged the custom time bar. + Only available when the custom time bar is enabled. + | +
+
|
+
+ Graph2d can be localized. For localization, Graph2d depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. +
+ +
+ To set a locale for the Graph2d, specify the option locale:
+
var options = {
+ locale: 'nl'
+};
+
+
+locales:
+
+var options = {
+ locales: {
+ // create a new locale
+ mylocale: {
+ current: 'current',
+ time: 'time',
+ }
+ },
+
+ // use the new locale
+ locale: 'mylocale'
+};
+
+
+| Language | Code |
|---|---|
| English | +
+ en+ en_EN+ en_US
+ |
+
| Dutch | +
+ nl+ nl_NL+ nl_BE
+ |
+
- All parts of the Graph2d have a class name and a default css style just like the Timeline. - The styles can be overwritten, which enables full customization of the layout - of the Graph2d. + All parts of the Graph2d have a class name and a default css style just like the Graph2d. + The styles can be overwritten, which enables full customization of the layout + of the Graph2d.
- Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten - as well, along with defining your own classes to style the graphs! Example 4 and - example 5 show the usage of custom styles. + Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten + as well, along with defining your own classes to style the graphs! Example 4 and + example 5 show the usage of custom styles.
- All code and data is processed and rendered in the browser. - No data is sent to any server. + All code and data is processed and rendered in the browser. + No data is sent to any server.
diff --git a/docs/network.html b/docs/network.html index 43e3d9fa..2319bf8e 100644 --- a/docs/network.html +++ b/docs/network.html @@ -31,9 +31,9 @@- Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option - that the user can use to explore which settings may be good for you. Use configurePhysics as described in the Physics section or by - example 25. + Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option + that the user can use to explore which settings may be good for you. Use configurePhysics as described in the Physics section or by + example 25.
@@ -68,8 +68,8 @@
| Name | -Type | -Required | -Description | -
|---|---|---|---|
| borderWidth | -Number | -1 | -The width of the border of the node when it is not selected, automatically limited by the width of the node. | -
| borderWidthSelected | -Number | -undefined | -The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used. | -
| color | -String | Object | -no | -Color for the node. | -
| Name | +Type | +Required | +Description | +
| color.background | -String | -no | -Background color for the node. | -
| borderWidth | +Number | +1 | +The width of the border of the node when it is not selected, automatically limited by the width of the node. | +
| color.border | -String | -no | -Border color for the node. | -
| color.highlight | -String | Object | -no | -Color of the node when selected. | -
| borderWidthSelected | +Number | +undefined | +The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used. | +
| color.highlight.background | -String | -no | -Background color of the node when selected. | -
| color | +String | Object | +no | +Color for the node. | +
| color.highlight.border | -String | -no | -Border color of the node when selected. | -
| color.background | +String | +no | +Background color for the node. | +
| color.hover.background | -String | -no | -Background color of the node when the node is hovered over and the hover option is enabled. | -
| color.border | +String | +no | +Border color for the node. | +
| color.hover.border | -String | -no | -Border color of the node when the node is hovered over and the hover option is enabled. | -
| color.highlight | +String | Object | +no | +Color of the node when selected. | +
| group | -Number | String | -no | -A group number or name. The type can be number,
- string, or an other type. All nodes with the same group get
- the same color schema. |
-
| color.highlight.background | +String | +no | +Background color of the node when selected. | +
| allowedToMoveX | -Boolean | -false | -If allowedToMoveX is false, then the node will not move from its supplied position. - If an X position has been supplied, it is fixed in the X-direction. - If no X value has been supplied, this argument will not do anything. | -
| allowedToMoveY | -Boolean | -false | -If allowedToMoveY is false, then the node will not move from its supplied position. - If an Y position has been supplied, it is fixed in the Y-direction. - If no Y value has been supplied, this argument will not do anything. | -
| fontColor | -String | -no | -Font color for label in the node. | -
| color.highlight.border | +String | +no | +Border color of the node when selected. | +
| fontFace | -String | -no | -Font face for label in the node, for example "verdana" or "arial". | -
| color.hover.background | +String | +no | +Background color of the node when the node is hovered over and the hover option is enabled. | +
| fontSize | -Number | -no | -Font size in pixels for label in the node. | -
| color.hover.border | +String | +no | +Border color of the node when the node is hovered over and the hover option is enabled. | +
| id | -Number | String | -yes | -A unique id for this node. - Nodes may not have duplicate id's. - Id's do not need to be consecutive. - An id is normally a number, but may be any type. | -
| group | +Number | String | +no | +A group number or name. The type can be number,
+ string, or an other type. All nodes with the same group get
+ the same color schema. |
+
| image | -string | -no | -Url of an image. Only applicable when the shape of the node is
- image. |
+
| allowedToMoveX | +Boolean | +false | +If allowedToMoveX is false, then the node will not move from its supplied position. + If an X position has been supplied, it is fixed in the X-direction. + If no X value has been supplied, this argument will not do anything. | +
| allowedToMoveY | +Boolean | +false | +If allowedToMoveY is false, then the node will not move from its supplied position. + If an Y position has been supplied, it is fixed in the Y-direction. + If no Y value has been supplied, this argument will not do anything. | +
| fontColor | +String | +no | +Font color for label in the node. |
| mass | -number | -1 | -When using the Barnes Hut simulation method (which is selected by default), - the mass of a node determines the gravitational repulsion during the simulation. Higher mass will push other nodes further away. | -
| level | -number | --1 | -This level is used in the hierarchical layout. If this is not selected, the level does not do anything. | -
| radius | -number | -no | -Radius for the node. Applicable for all shapes except box,
- circle, ellipse and database.
- The value of radius will override a value in
- property value. |
-
| fontFace | +String | +no | +Font face for label in the node, for example "verdana" or "arial". | +
| shape | -string | -no | -Define the shape for the node.
- Choose from
- ellipse (default), circle, box,
- database, image, label, dot,
- star, triangle, triangleDown, and square.
- + |
| fontSize | +Number | +no | +Font size in pixels for label in the node. | +
| id | +Number | String | +yes | +A unique id for this node. + Nodes may not have duplicate id's. + Id's do not need to be consecutive. + An id is normally a number, but may be any type. | +
| image | +string | +no | +Url of an image. Only applicable when the shape of the node is
+ image. |
+
| mass | +number | +1 | +When using the Barnes Hut simulation method (which is selected by default), + the mass of a node determines the gravitational repulsion during the simulation. Higher mass will push other nodes further away. | +
| level | +number | +-1 | +This level is used in the hierarchical layout. If this is not selected, the level does not do anything. | +
| radius | +number | +no | +Radius for the node. Applicable for all shapes except box,
+ circle, ellipse and database.
+ The value of radius will override a value in
+ property value. |
+
| shape | +string | +no | +Define the shape for the node.
+ Choose from
+ ellipse (default), circle, box,
+ database, image, label, dot,
+ star, triangle, triangleDown, and square.
+ + + In case of image, a property with name image must
+ be provided, containing image urls.
+ + + The shapes dot, star, triangle,
+ triangleDown, and square, are scalable.
+ The size is determined by the properties radius or
+ value.
+ + + When a property label is provided,
+ this label will be displayed inside the shape in case of shapes
+ box, circle, ellipse,
+ and database.
+ For all other shapes, the label will be displayed right below the shape.
+
+ |
+
| label | -string | -no | -Text label to be displayed in the node or under the image of the node.
- Multiple lines can be separated by a newline character \n . |
-
| label | +string | +no | +Text label to be displayed in the node or under the image of the node.
+ Multiple lines can be separated by a newline character \n . |
+
| title | -string | function | -no | -Title to be displayed when the user hovers over the node.
- The title can contain HTML code. If using a function, returning undefined
- will prevent the tooltip from being displayed. |
-
| title | +string | function | +no | +Title to be displayed when the user hovers over the node.
+ The title can contain HTML code. If using a function, returning undefined
+ will prevent the tooltip from being displayed. |
+
| value | -number | -no | -A value for the node.
- The radius of the nodes will be scaled automatically from minimum to
- maximum value.
- Only applicable when the shape of the node is dot.
- If a radius is provided for the node too, it will override the
- radius calculated from the value. |
-
| value | +number | +no | +A value for the node.
+ The radius of the nodes will be scaled automatically from minimum to
+ maximum value.
+ Only applicable when the shape of the node is dot.
+ If a radius is provided for the node too, it will override the
+ radius calculated from the value. |
+
| x | -number | -no | -Horizontal position in pixels. - The horizontal position of the node will be fixed. - The vertical position y may remain undefined. | -
| y | -number | -no | -Vertical position in pixels. - The vertical position of the node will be fixed. - The horizontal position x may remain undefined. | -
| x | +number | +no | +Horizontal position in pixels. + The horizontal position of the node will be fixed. + The vertical position y may remain undefined. | +
| y | +number | +no | +Vertical position in pixels. + The vertical position of the node will be fixed. + The horizontal position x may remain undefined. | +
"to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
- the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used."to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+ the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.- network can import data straight from an exported json file from gephi. You can get the JSON exporter here: - https://marketplace.gephi.org/plugin/json-exporter/. - An example exists showing how to get a JSON file into Vis: 30_importing_from_gephi. + network can import data straight from an exported json file from gephi. You can get the JSON exporter here: + https://marketplace.gephi.org/plugin/json-exporter/. + An example exists showing how to get a JSON file into Vis: 30_importing_from_gephi.
- Example usage: + Example usage:
@@ -815,29 +815,29 @@ var parserOptions = {
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);
| Name | Type | Default | Description | -
|---|---|---|---|
| allowedToMove | Boolean | false | - If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all. + If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all. | -
| parseColor | Boolean | false | - If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color. + If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color. | -
| Name | -Type | -Default | -Description | -||||
|---|---|---|---|---|---|---|---|
| Name | +Type | +Default | +Description | +||||
| physics | -Object | -none | -- Configuration of the physics system governing the simulation of the nodes and edges. - Barnes-Hut nBody simulation is used by default. See section Physics for an overview of the available options. - | -||||
| configurePhysics | -Boolean | -false | -- Enabling this setting will create a physics configuration div above the network. You can use this to fine tune the physics system to suit your needs. - Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset. - | -||||
| dataManipulation | -Object | -none | -- Settings for manipulating the Dataset. See section Data manipulation for an overview of the available options. - | -||||
| clustering | -Object | -none | -- Clustering configuration. Clustering is turned off by default. See section Clustering for an overview of the available options. - | -||||
| clickToUse | +boolean | +false | +When a Network is configured to be clickToUse, it will react to mouse, touch, and keyboard events only when active.
+ When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key. |
+||||
| edges | -Object | -none | -- Configuration options applied to all edges. See section Edges configuration for an overview of the available options. - | -||||
| physics | +Object | +none | ++ Configuration of the physics system governing the simulation of the nodes and edges. + Barnes-Hut nBody simulation is used by default. See section Physics for an overview of the available options. + | +||||
| configurePhysics | +Boolean | +false | ++ Enabling this setting will create a physics configuration div above the network. You can use this to fine tune the physics system to suit your needs. + Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset. + | +||||
| freezeForStabilization | -Boolean | -false | -- With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order - to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with - an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions. - | -||||
| dataManipulation | +Object | +none | ++ Settings for manipulating the Dataset. See section Data manipulation 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. - | -||||
| clustering | +Object | +none | ++ Clustering configuration. Clustering is turned off by default. See section Clustering for an overview of the available options. + | +||||
| height | -String | -"400px" | -The height of the network in pixels or as a percentage. | -||||
| edges | +Object | +none | ++ Configuration options applied to all edges. See section Edges configuration for an overview of the available options. + | +||||
| hover | -Boolean | -false | -Enabling the change of the colors of nodes and edges when the mouse hovers over them. Enabling this may have a minor impact on performance. | -||||
| freezeForStabilization | +Boolean | +false | ++ With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order + to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with + an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions. + | +||||
| keyboard | -Object | -none | -- Configuration options for shortcuts keys. Shortcut keys are turned off by default. See section Keyboard navigation for an overview of the available options. - | -||||
| dragNetwork | -Boolean | -true | -- Toggle if the network can be dragged. This will not affect the dragging of nodes. - | -||||
| dragNodes | -Boolean | -true | -- Toggle if the nodes can be dragged. This will not affect the dragging of the network. - | -||||
| hideNodesOnDrag | -Boolean | -false | -- Toggle if the nodes are drawn during a drag. This can greatly improve performance if you have many nodes. - | -||||
| hideEdgesOnDrag | -Boolean | -false | -- Toggle if the edges are drawn during a drag. This can greatly improve performance if you have many edges. - | -||||
| navigation | -Object | -none | -- Configuration options for the navigation controls. See section Navigation controls 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. + | +||||
| nodes | -Object | -none | -- Configuration options applied to all nodes. See section Nodes configuration for an overview of the available options. - | -||||
| height | +String | +"400px" | +The height of the network in pixels or as a percentage. | +||||
| smoothCurves | -Boolean || object | -object | -If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve. This can be further configured by the options below. | -||||
| smoothCurves.dynamic | -Boolean | -true | -By default, the edges are dynamic. This means there are support nodes placed in the middle of the edge. This support node is also handed by the physics simulation. If false, the smoothness will be based on the - relative positions of the to and from nodes. This is computationally cheaper but there is no self organisation. | -||||
| smoothCurves.type | -String | -"continuous" | -This option only affects NONdynamic smooth curves. The supported types are: continuous, discrete, diagonalCross, straightCross, horizontal, vertical. The effects of these types
- are shown in examples 26 and 27 |
- ||||
| smoothCurves.roundness | -Number | -0.5 | -This only affects NONdynamic smooth curves. The roundness can be tweaked with the parameter. The value range is from 0 to 1 with a maximum roundness at 0.5. | -||||
| selectable | -Boolean | -true | -If true, nodes in the network can be selected by clicking them. - Long press can be used to select multiple nodes. | -||||
| hover | +Boolean | +false | +Enabling the change of the colors of nodes and edges when the mouse hovers over them. Enabling this may have a minor impact on performance. | +||||
| stabilize | -Boolean | -true | -If true, the network is stabilized before displaying it. If false, - the nodes move to a stabe position visibly in an animated way. | -||||
| keyboard | +Object | +none | ++ Configuration options for shortcuts keys. Shortcut keys are turned off by default. See section Keyboard navigation for an overview of the available options. + | +||||
| dragNetwork | +Boolean | +true | ++ Toggle if the network can be dragged. This will not affect the dragging of nodes. + | +||||
| dragNodes | +Boolean | +true | ++ Toggle if the nodes can be dragged. This will not affect the dragging of the network. + | +||||
| hideNodesOnDrag | +Boolean | +false | ++ Toggle if the nodes are drawn during a drag. This can greatly improve performance if you have many nodes. + | +||||
| hideEdgesOnDrag | +Boolean | +false | ++ Toggle if the edges are drawn during a drag. This can greatly improve performance if you have many edges. + | +||||
| navigation | +Object | +none | ++ Configuration options for the navigation controls. See section Navigation controls for an overview of the available options. + | +||||
| stabilizationIterations | -Number | -1000 | -If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes - before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased. | +nodes | +Object | +none | ++ Configuration options applied to all nodes. See section Nodes configuration for an overview of the available options. + |
| width | -String | -"400px" | -The width of the network in pixels or as a percentage. | -||||
| zoomable | -Boolean | -true | -- Toggle if the network can be zoomed. - | -||||
| smoothCurves | +Boolean || object | +object | +If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve. This can be further configured by the options below. | +||||
| smoothCurves.dynamic | +Boolean | +true | +By default, the edges are dynamic. This means there are support nodes placed in the middle of the edge. This support node is also handed by the physics simulation. If false, the smoothness will be based on the + relative positions of the to and from nodes. This is computationally cheaper but there is no self organisation. | +||||
| smoothCurves.type | +String | +"continuous" | +This option only affects NONdynamic smooth curves. The supported types are: continuous, discrete, diagonalCross, straightCross, horizontal, vertical. The effects of these types
+ are shown in examples 26 and 27 |
+||||
| smoothCurves.roundness | +Number | +0.5 | +This only affects NONdynamic smooth curves. The roundness can be tweaked with the parameter. The value range is from 0 to 1 with a maximum roundness at 0.5. | +||||
| selectable | +Boolean | +true | +If true, nodes in the network can be selected by clicking them. + Long press can be used to select multiple nodes. | +||||
| stabilize | +Boolean | +true | +If true, the network is stabilized before displaying it. If false, + the nodes move to a stabe position visibly in an animated way. | +||||
| stabilizationIterations | +Number | +1000 | +If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes + before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased. | +||||
| width | +String | +"400px" | +The width of the network in pixels or as a percentage. | +||||
| zoomable | +Boolean | +true | ++ Toggle if the network can be zoomed. + | +
image.
Edges can be configured with different length and styling. To configure edges, provide an object named edges in the options for the Network.
Because the length of an edge is a property of the physics simulation, you can change the length of the edge by changing the springLength in your selected physics solver.
- To change the edge length of individual edges, you can use the length property in the edge definition.
+ To change the edge length of individual edges, you can use the length property in the edge definition.
@@ -1356,13 +1364,13 @@ var options = {
Only applicable when the line style is dash-line.
"to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
- the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used."to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+ the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.
- The original simulation method was based on particel physics with a repulsion field (potential) around each node,
- and the edges were modelled as springs. The new system employed the Barnes-Hut gravitational simulation model. The edges are still modelled as springs.
- To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
- If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option.
- When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
+ The original simulation method was based on particel physics with a repulsion field (potential) around each node,
+ and the edges were modelled as springs. The new system employed the Barnes-Hut gravitational simulation model. The edges are still modelled as springs.
+ To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
+ If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option.
+ When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
-
Note: if the behaviour of your network is not the way you want it, use configurePhysics as described below or by example 25.
+Note: if the behaviour of your network is not the way you want it, use configurePhysics as described below or by example 25.
// These variables must be defined in an options object named physics.
@@ -1563,135 +1571,135 @@ var options = {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| enabled | -Boolean | -true | -This switches the Barnes-Hut simulation on or off. If it is turned off, the old repulsion model is used. Barnes-Hut is generally faster and yields better results. | -
| gravitationalConstant | -Number | --2000 | -This is the gravitational constand used to calculate the gravity forces. More information is available here. | -
| centralGravity | -Number | -0.1 | -The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | -
| springLength | -Number | -95 | -In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. - To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | -
| springConstant | -Number | -0.04 | -This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | -
| damping | -Number | -0.09 | -This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | -
| Name | +Type | +Default | +Description | +
| enabled | +Boolean | +true | +This switches the Barnes-Hut simulation on or off. If it is turned off, the old repulsion model is used. Barnes-Hut is generally faster and yields better results. | +
| gravitationalConstant | +Number | +-2000 | +This is the gravitational constand used to calculate the gravity forces. More information is available here. | +
| centralGravity | +Number | +0.1 | +The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | +
| springLength | +Number | +95 | +In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. + To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | +
| springConstant | +Number | +0.04 | +This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | +
| damping | +Number | +0.09 | +This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| centralGravity | -Number | -0.1 | -The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | -
| nodeDistance | -Number | -100 | -This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero. | -
| springLength | -Number | -50 | -In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. - To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | -
| springConstant | -Number | -0.05 | -This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | -
| damping | -Number | -0.09 | -This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | -
| Name | +Type | +Default | +Description | +
| centralGravity | +Number | +0.1 | +The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | +
| nodeDistance | +Number | +100 | +This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero. | +
| springLength | +Number | +50 | +In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. + To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | +
| springConstant | +Number | +0.05 | +This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | +
| damping | +Number | +0.09 | +This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| centralGravity | -Number | -0.5 | -The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | -
| nodeDistance | -Number | -60 | -This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero. | -
| springLength | -Number | -100 | -In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. - To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | -
| springConstant | -Number | -0.01 | -This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | -
| damping | -Number | -0.09 | -This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | -
| Name | +Type | +Default | +Description | +
| centralGravity | +Number | +0.5 | +The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | +
| nodeDistance | +Number | +60 | +This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero. | +
| springLength | +Number | +100 | +In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. + To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | +
| springConstant | +Number | +0.01 | +This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | +
| damping | +Number | +0.09 | +This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | +
- By using the data manipulation feature of the network you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges. - The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions - into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In example 21, - two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection. To correctly display the manipulation icons, the vis.css file must be included. - The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. + By using the data manipulation feature of the network you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges. + The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions + into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In example 21, + two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection. To correctly display the manipulation icons, the vis.css file must be included. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
// These variables must be defined in an options object named dataManipulation.
@@ -1727,36 +1735,36 @@ var options: {
}
| Name | Type | Default | Description | -
|---|---|---|---|
| enabled | Boolean | false | Enabling or disabling of the data manipulation toolbar. If it is initially hidden, an edit button appears in the top left corner. | -
| initiallyVisible | Boolean | false | Initially hide or show the data manipulation toolbar. | -
- Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
- If the callback is NOT called, nothing happens. Example 21 has two working examples
- for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
- For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
- in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
- requires the same data structure that is supplied to the user.
- If there is no injected function supplied for the edit operation, the button will not be shown in the toolbar.
+ Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
+ If the callback is NOT called, nothing happens. Example 21 has two working examples
+ for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
+ For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
+ in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
+ requires the same data structure that is supplied to the user.
+ If there is no injected function supplied for the edit operation, the button will not be shown in the toolbar.
// If a variable is not supplied, the default value is used.
@@ -1818,9 +1826,9 @@ var options: {
};
- Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called resize. - A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly. - An code snippet from example 21 is shown below. + Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called resize. + A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly. + An code snippet from example 21 is shown below.
network.on("resize", function(params) {console.log(params.width,params.height)});
@@ -1940,12 +1948,12 @@ var options: {
4.0
This parameter denotes the increase in fontSize of the cluster when a single node is added to it.
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.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.Network has a menu with navigation controls, which is disabled by default. It can be configured with the following settings. To correctly display the navigation icons, the vis.css file must be included. - The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
@@ -2029,7 +2037,7 @@ var options: {
Keyboard navigation
The network can be navigated using shortcut keys.
- The default state for the keyboard navigation is off. The predefined keys can be found in the example 20_navigation.html.
+ The default state for the keyboard navigation is off. The predefined keys can be found in the example 20_navigation.html.
@@ -2082,10 +2090,10 @@ var options: {
Hierarchical layout
- The network can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
- If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method
- is shown in example 23 and the user-defined method is shown in example 24.
- This layout method does not support smooth curves or clustering. It automatically turns these features off.
+ The network can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
+ If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method
+ is shown in example 23 and the user-defined method is shown in example 24.
+ This layout method does not support smooth curves or clustering. It automatically turns these features off.
@@ -2100,7 +2108,8 @@ var options: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100,
- direction: "UD"
+ direction: "UD",
+ layout: "hubsize"
}
}
// partial configuration automatically sets enabled to true
@@ -2113,90 +2122,138 @@ var options: {
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| enabled | -Boolean | -false | -Enable or disable the hierarchical layout. - | -
| levelSeparation | -Number | -150 | -This defines the space between levels (in the Y-direction, considering UP-DOWN direction). | -
| nodeSpacing | -Number | -100 | -This defines the space between nodes in the same level (in the X-direction, considering UP-DOWN direction). - This is only relevant during the initial placing of nodes. | -
| direction | -String | -UD | -This defines the direction the network is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL). - These need to be supplied by the acronyms in parentheses. | -
| Name | +Type | +Default | +Description | +
| enabled | +Boolean | +false | +Enable or disable the hierarchical layout. + | +
| levelSeparation | +Number | +150 | +This defines the space between levels (in the Y-direction, considering UP-DOWN direction). | +
| nodeSpacing | +Number | +100 | +This defines the space between nodes in the same level (in the X-direction, considering UP-DOWN direction). + This is only relevant during the initial placing of nodes. | +
| direction | +String | +UD | +This defines the direction the network is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL). + These need to be supplied by the acronyms in parentheses. | +
| layout | +String | +hubsize | +This defines the way the nodes are distributed. Available options are hubsize and direction. The default value is hubsize, meaning the node with the most edges connected to it (largest hub) is on top.
+ Alternatively, direction arranges the nodes based on the direction of the edges. See example 32 for more information. |
+
- When using vis.js in other languages, one can use the localization option to overwrite the labels used in the data manipulation interface. + When using vis.js in other languages, one can use the localization option to get a localized data manipulation interface.
-
-var options: {
- labels:{
- add:"Add Node",
- edit:"Edit",
- link:"Add Link",
- del:"Delete selected",
- editNode:"Edit Node",
- editEdge:"Edit Edge",
- back:"Back",
- addDescription:"Click in an empty space to place a new node.",
- linkDescription:"Click on a node and drag the edge to another
- node to connect them.",
- editEdgeDescription:"Click on either one of the control points and drag them to another node to connect to it.".
- addError:"The function for add does not support two arguments
- (data,callback).",
- linkError:"The function for connect does not support two arguments
- (data,callback).",
- editError:"The function for edit does not support two arguments
- (data, callback).",
- editBoundError:"No edit function has been bound to this button.",
- deleteError:"The function for delete does not support two arguments
- (data, callback).",
- deleteClusterError:"Clusters cannot be deleted."
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| locale | +String | +none | +Select a locale for the Network. | +
| locales | +Object | +none | +A map with i18n locales. | +
+ To set a locale for the Network, specify the option locale:
+
var options = {
+ locale: 'nl'
+};
+
+
+locales:
+
+var options = {
+ locales: {
+ // create a new locale (text strings should be replaced with localized strings)
+ mylocale: {
+ add: 'Add Node',
+ edit: 'Edit',
+ link: 'Add Link',
+ del: 'Delete selected',
+ editNode: 'Edit Node',
+ editEdge: 'Edit Edge',
+ back: 'Back',
+ addDescription: 'Click in an empty space to place a new node.',
+ linkDescription: 'Click on a node and drag the edge to another node to connect them.',
+ editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
+ createEdgeError: 'Cannot link edges to a cluster.',
+ deleteClusterError: 'Clusters cannot be deleted.'
}
-}
+ },
+
+ // use the new locale
+ locale: 'mylocale'
+};
++ Network comes with support for the following locales: +
+| Name | -Type | -Default | -Description | -
|---|---|---|---|
| labels | -object | -(shown above) | -Overwrite one or all labels used in the datamanipulation interface with localized strings. - | -
| Language | Code | ||
| English | +
+ en+ en_EN+ en_US
+ |
+ ||
| Dutch | +
+ nl+ nl_NL+ nl_BE
+ |
+
selection is an array with ids of nodes to be selected.
- The array selection can contain zero or multiple ids.
- Example usage: network.selectNodes([3, 5]); will select
- nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
- selection is an array with ids of edges to be selected.
- The array selection can contain zero or multiple ids.
- Example usage: network.selectEdges([3, 5]); will select
- edges with id 3 and 5.
- selection is an array with ids of nodes to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: network.selectNodes([3, 5]); will select
+ nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
+ selection is an array with ids of edges to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: network.selectEdges([3, 5]); will select
+ edges with id 3 and 5.
+ selection is an array with ids of nodes to be selected.
- The array selection can contain zero or multiple ids.
- Example usage: network.setSelection([3, 5]); will select
- nodes with id 3 and 5.
+ selection is an array with ids of nodes to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: network.setSelection([3, 5]); will select
+ nodes with id 3 and 5.
nodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnode: an object with the id of the hovered node.node: an object with the id of the hovered node.width: the new width of the canvasheight: the new height of the canvasiterations: number of iterations used to stabilizedirection: "+" or "-" nodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnode: an object with the id of the hovered node.node: an object with the id of the hovered node.width: the new width of the canvasheight: the new height of the canvasiterations: number of iterations used to stabilizedirection: "+" or "-" redraw().clickToUse, it will react to mouse and touch events only when active.
+ When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.focus(id).
+ Available options:
+ animate: boolean | numberfit(). Available options:
+ animate: boolean | numbershowCustomTime is true.
+ showCurrentTime is true.
showCustomTime is true. time is a Date object.
+ showCustomTime is true.
start: Date and end: Date.time can be a Date, Number, or String. Available options:
+ animate: boolean | numbertime can be a Date object, numeric timestamp, or ISO date string.
+ Only applicable when option showCurrentTime is true.showCustomTime is true. time can be a Date object, numeric timestamp, or ISO date string.
+ focus: booleananimate: boolean | numberstart and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged.start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. Available options:
+ animate: boolean | numberonAdd(item, callback) Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.onUpdate(item, callback) Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.onMove(item, callback) Fired when an item has been moved. If not implemented, the move action will be accepted.onMoving(item, callback) Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.onRemove(item, callback) Fired when an item is about to be deleted. If not implemented, the item will be always removed.+ Timeline can be localized. For localization, Timeline depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. +
+ +
+ To set a locale for the Timeline, specify the option locale:
+
var options = {
+ locale: 'nl'
+};
+
+
+locales:
+
+var options = {
+ locales: {
+ // create a new locale (text strings should be replaced with localized strings)
+ mylocale: {
+ current: 'current',
+ time: 'time',
+ }
+ },
+
+ // use the new locale
+ locale: 'mylocale'
+};
+
+
++ Timeline comes with support for the following locales: +
+ +| Language | Code |
|---|---|
| English | +
+ en+ en_EN+ en_US
+ |
+
| Dutch | +
+ nl+ nl_NL+ nl_BE
+ |
+
@@ -1008,7 +1136,6 @@ A full example is available here: Data Policy
All code and data is processed and rendered in the browser.
diff --git a/download/vis.zip b/download/vis.zip
index 36952cc5..976eb303 100644
Binary files a/download/vis.zip and b/download/vis.zip differ
diff --git a/examples/graph2d/01_basic.html b/examples/graph2d/01_basic.html
index 45619ca0..f878d25c 100644
--- a/examples/graph2d/01_basic.html
+++ b/examples/graph2d/01_basic.html
@@ -2,8 +2,8 @@
+ To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option
+
+
+Graph2d | Bar Graphs Side by Side Example
+
+ Handle overlap:
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/graph2d/11_barsSideBySideGroups.html b/examples/graph2d/11_barsSideBySideGroups.html
new file mode 100644
index 00000000..22798d97
--- /dev/null
+++ b/examples/graph2d/11_barsSideBySideGroups.html
@@ -0,0 +1,87 @@
+
+
+
+ Graph2d | Bar Graphs Side by Side Example with Groups
+
+ Handle overlap:
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/graph2d/12_customRange.html b/examples/graph2d/12_customRange.html
new file mode 100644
index 00000000..1416e1af
--- /dev/null
+++ b/examples/graph2d/12_customRange.html
@@ -0,0 +1,94 @@
+
+
+
+ Graph2d | Custom axis range
+
+var options = {
+ dataAxis: {
+ customRange: {
+ left: {
+ min:-5, max:30
+ },
+ right: {
+ min:-5
+ }
+ },
+ }
+};
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/graph2d/13_localization.html b/examples/graph2d/13_localization.html
new file mode 100644
index 00000000..301396d4
--- /dev/null
+++ b/examples/graph2d/13_localization.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Graph2d | Localization
+{locale: STRING}.
+Graph2d | Groups Example
+
+ graph2d1.setOptions({
+ groups:{
+ visibility:{
+ 0:true, // group id:0 visible
+ 1:false, // group id:1 hidden
+ 2:false, // group id:2 hidden
+ 3:false, // group id:3 hidden
+ "__ungrouped__":false // default group hidden
+ }
+ }
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/graph2d/index.html b/examples/graph2d/index.html
index 76a156e5..ca5dfe0a 100644
--- a/examples/graph2d/index.html
+++ b/examples/graph2d/index.html
@@ -16,6 +16,11 @@
+
+
+
+
+
diff --git a/examples/network/01_basic_usage.html b/examples/network/01_basic_usage.html
index b22b11b1..e03e75fe 100644
--- a/examples/network/01_basic_usage.html
+++ b/examples/network/01_basic_usage.html
@@ -4,6 +4,7 @@