Contributions to the vis.js library are very welcome! We can't do this alone.
You can contribute in different ways: spread the word, report bugs, come up with
ideas and suggestions, and contribute to the code.
If you have any **general question** on how to use the vis.js library in your
project please check out
[stackoverflow](http://stackoverflow.com/questions/tagged/vis.js) for that.
There are a few preferences regarding **code contributions**:
- vis.js follows the node.js code style as described
[here](http://nodeguide.com/style.html).
- When implementing new features, please update the documentation accordingly.
- Send pull requests to the `develop` branch, not the `master` branch.
- Only commit changes done in the source files under `lib`, not to the builds
which are located in the folder `dist`.
Thanks!
[Contributions](//github.com/almende/vis/blob/master/misc/how_to_help.md) to the vis.js library are very welcome! [We can't do this alone](//github.com/almende/vis/blob/master/misc/we_need_help.md).
### Questions
If you have any *general question* on how to use the vis.js library in your own project please check out [stackoverflow](http://stackoverflow.com/questions/tagged/vis.js) for thinks like that. **This is NOT a JavaScript help forum!**
### Bugs, Problems and Feature-Requests
If you really want to open a new issue:
* Please use the [search functionality](//github.com/almende/vis/issues) to make sure that there is not already an issue concerning the same topic.
* Please make sure to **mention which module** of vis.js (network, timeline, graph3d, ...) your are referring to.
* If you think you found a bug please **provide a simple example** (e.g. on [jsbin](jsbin.com)) that demonstrates the problem.
* If you want to propose a feature-request please **describe what you are looking for in detail**, ideally providing a screenshot, drawing or something similar.
* **Close the issue later**, when the issue is no longer needed.
any way you want. This is also the style object that is provided in the processProperties function
any way you want. This is also the style object that is provided in the processProperties function
for
for
fine tuning. If undefined, default node options will be used.
fine tuning. If undefined, default node options will be used.<br/><br/>
Default functionality only allows clustering if the cluster will contain 2 or more nodes. To allow clustering of single nodes you can use the <code>allowSingleNodeCluster : true</code> property.
<code>editable</code> (optional), and <code>style</code> (optional).
<code>editable</code> (optional), and <code>style</code> (optional).
</p>
</p>
@ -557,7 +557,7 @@ function (option, path) {
<tr>
<tr>
<td>format</td>
<td>format</td>
<td>Object</td>
<td>Object or Function</td>
<td>none</td>
<td>none</td>
<td>
<td>
Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is:
Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is:
@ -583,8 +583,16 @@ function (option, path) {
year: ''
year: ''
}
}
}</pre>
}</pre>
For values which not provided in the customized <code>options.format</code>, the default values will be used.
For values which not provided in the customized <code>options.format</code>, the default values will be used.
All available formatting syntax is described in the <ahref="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>.
All available formatting syntax is described in the <ahref="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>.
<br>
You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label.
If no <code>order</code> properties are provided, the order will be undetermined.
If no <code>order</code> properties are provided, the order will be undetermined.
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>groupOrderSwap</td>
<td>groupOrderSwap</td>
<td>Function</td>
<td>Function</td>
@ -640,7 +648,7 @@ function (option, path) {
<td>groupTemplate</td>
<td>groupTemplate</td>
<td>function</td>
<td>function</td>
<td>none</td>
<td>none</td>
<td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
<td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
</tr>
</tr>
<tr>
<tr>
@ -787,7 +795,7 @@ function (option, path) {
Only applicable when option <code>selectable</code> is <code>true</code>.
Only applicable when option <code>selectable</code> is <code>true</code>.
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onAddGroup</td>
<td>onAddGroup</td>
<td>function</td>
<td>function</td>
@ -829,7 +837,7 @@ function (option, path) {
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onMoveGroup</td>
<td>onMoveGroup</td>
<td>function</td>
<td>function</td>
@ -853,7 +861,7 @@ function (option, path) {
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onRemoveGroup</td>
<td>onRemoveGroup</td>
<td>function</td>
<td>function</td>
@ -970,14 +978,7 @@ function (option, path) {
<td>template</td>
<td>template</td>
<td>function</td>
<td>function</td>
<td>none</td>
<td>none</td>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
</tr>
<tr>
<td>throttleRedraw</td>
<td>number</td>
<td><code>0</code></td>
<td>Limit the maximum number of redraws to once every x milliseconds. For example setting throttleRedraw to `100` milliseconds will limit the number of redraws to 10 times per second.</td>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as the first argument and the item element as the second, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
In this example, the network data can be exported to JSON and imported back into the network.
Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed.
The company that developed vis.js for the main part, *almende* is [not able to maintain the project at the moment](./we_need_help.md). So help from the community is very needed and welcome!
## There are many ways to help:
### Answering questions
There are new [issues with questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion+sort%3Acreated-desc) how to use vis.js opened almost every day. Be part of the community and help answer them!
A better way to ask questions on how to use vis.js is [stackoverflow](https://stackoverflow.com/tags/vis.js). Questions are posed here also and need to be answered by the community. [Please help answering questions](https://stackoverflow.com/tags/vis.js) here also.
### Closing old issues
A new issue is often opened fast and then forgotten. Please help go trough [the old issues](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc) (especially the [questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc+label%3Aquestion)) and ask the creator of the issues if the problem still exists before closing the issue. The support team uses the **issue inactive** label to mark these issues.
### Improve the webpage
The visjs.org webpage is hosted on the [gh-pages branch](//github.com/almende/vis/tree/gh-pages). If you find a typo or anything else that should be improved feel free to create a pull-request to *gh-pages*. Please make changes in your own fork of gh-pages so the support team can view the changes in your hosted fork.
### Create new examples
We have [a collection of examples](//github.com/almende/vis/tree/develop/examples). Please help by creating interesting new ones that show a specific problem or layout. Keep the examples easy to understand for beginners and remove unnecessary clutter.
### Provide interesting showcases
If you use vis.js to develop something beautiful feel free to create a pull-request to our show cases page in the gh-pages branch](//github.com/almende/vis/tree/gh-pages/showcase). [These showcases are displayed on our webpage](http://visjs.org/showcase/index.html) and we are always looking for new examples.
### Confirming and fixing bugs
Every software has bugs. We also have [quite a nice collection](https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) ;-)
Feel free to fix as many bugs as you want!
You can not only help by fixing bugs, but also by confirming the bug or even creating a minimal code example to prove this bug exists.
### Implementing Feature-Requests
A lot of people have a lot of ideas for improving vis.js. [We label these issues as **enhancement**](https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement). Feel free to implement a new feature by creating a new Pull-Request.
[Some issues are labeled **For everybody!**](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3A%22For+everyone%21%22+sort%3Areactions-%2B1-desc). These are a good starting point.
### Reviewing Pull-Requests
We use [GitHub's two-step review](//help.github.com/articles/about-pull-request-reviews/) to make sure pull-requests are clean. You can help by checking out pull-request branches and testing them. You also can comment on lines of code and make sure the pull-request introduces no new bugs or typos.
## Creating Pull Requests
There are some rules for pull-request:
* All pull-request must be to the [develop-branch](//github.com/almende/vis/tree/develop). Pull-request against the [master-branch](//github.com/almende/vis/tree/master) must be closed. (Changes to [gh-pages](//github.com/almende/vis/tree/gh-pages) are also ok.)
* Only commit changes done in the source files in the folder `lib`, not to the builds
which are located in the folder `dist`.
* Keep your changes small and clear. Only work on one topic at one time and only change lines of code that you have to change to reach your goal.
* Test your changes before creating a pull-request. The easiest way is to open the existing examples and playing with them.
* If you are fixing or implementing an existing issue, please refer to it in the description and in the commit message.
* If you are introducing a new feature, add some documentation and a new example to make it easy to adapt.
* If you introduce breaking changes, like changing the signature of a public function, point that out in your description. Breaking changes result in a new major release.
* Always adapt to the code style of the existing source. Never adapt existing code to your personal taste. :trollface:
Vis.js is looking for people who can help maintain and improve the library. We've put a lot of effort in building these visualizations, fixing bugs, and supporting users as much as we can. For some time now, we’ve been lacking the manpower to maintain the library the way we have in recent years. [@josdejong](//github.com/josdejong) has left the company for a new opportunity, and [@AlexDM0](//github.com/AlexDM0) has moved internally to a daughter company, with severe impact on his time and availability for Vis.js. At the moment [@ludost](//github.com/ludost) is the official maintainer from Almende, but does not have much time to help out.
Although Almende is looking to replace the expertise required for Vis.js, we don't expect to be able to do comprehensive project management any time soon. At the same time we’d like to spare Vis.js from becoming abandonware, especially given the relative healthy user base. For the longer term future we would be happy if vis.js could stand on its own feet, community supported.
**If you want to support the project please just start by [helping out](./how_to_help.md).**
If you have shown some commitment to the project you can ask [@ludost](//github.com/ludost) to become a member of the community support team. This team has write permissions to the repository and is helping maintaining it. Currently this team consists of: