Browse Source

Resolve conflicts

gh-pages
Yotam Berkowitz 7 years ago
parent
commit
ef798a7e79
34 changed files with 29509 additions and 28757 deletions
  1. +0
    -0
      .commits.tmp
  2. +8
    -8
      dist/vis-graph3d.min.js
  3. +16
    -16
      dist/vis-network.min.js
  4. +14
    -14
      dist/vis-timeline-graph2d.min.js
  5. +29130
    -28636
      dist/vis.js
  6. +1
    -1
      dist/vis.map
  7. +23
    -23
      dist/vis.min.js
  8. +2
    -0
      docs/css/style.css
  9. +2
    -1
      docs/data/dataset.html
  10. +2
    -1
      docs/data/dataview.html
  11. +2
    -1
      docs/data/index.html
  12. +3
    -2
      docs/graph2d/index.html
  13. +24
    -5
      docs/graph3d/index.html
  14. +1
    -0
      docs/network/configure.html
  15. +1
    -0
      docs/network/edges.html
  16. +2
    -1
      docs/network/groups.html
  17. +2
    -1
      docs/network/index.html
  18. +2
    -1
      docs/network/interaction.html
  19. +4
    -3
      docs/network/layout.html
  20. +2
    -1
      docs/network/manipulation.html
  21. +1
    -0
      docs/network/nodes.html
  22. +2
    -1
      docs/network/physics.html
  23. +87
    -13
      docs/timeline/index.html
  24. +3
    -1
      examples/graph3d/08_dot_cloud_size.html
  25. +2
    -0
      examples/network/events/interactionEvents.html
  26. +25
    -17
      examples/network/other/saveAndLoad.html
  27. +8
    -0
      examples/timeline/interaction/eventListeners.html
  28. +4
    -1
      examples/timeline/interaction/rollingMode.html
  29. +16
    -1
      examples/timeline/items/tooltip.html
  30. +111
    -0
      examples/timeline/styling/weekStyling.html
  31. BIN
      images/exampleScreenshots/timeline/styling/weekStyling.png
  32. +5
    -5
      index.html
  33. +3
    -3
      showcase/index.html
  34. +1
    -0
      timeline_examples.html

+ 0
- 0
.commits.tmp View File


+ 8
- 8
dist/vis-graph3d.min.js
File diff suppressed because it is too large
View File


+ 16
- 16
dist/vis-network.min.js
File diff suppressed because it is too large
View File


+ 14
- 14
dist/vis-timeline-graph2d.min.js
File diff suppressed because it is too large
View File


+ 29130
- 28636
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 23
- 23
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 2
- 0
docs/css/style.css View File

@ -106,6 +106,8 @@ table.events td:nth-child(2) {
pre { pre {
margin: 20px 0; margin: 20px 0;
white-space: pre-wrap;
max-width: 100%;
} }
a code { a code {

+ 2
- 1
docs/data/dataset.html View File

@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -601,7 +602,7 @@ function (event, properties, senderId) {
field <code>oldData</code> containing the original data of the items in the field <code>oldData</code> containing the original data of the items in the
dataset before the items were updated or removed. The <code>update</code> dataset before the items were updated or removed. The <code>update</code>
event also contains a field <code>data</code> containing the changes: event also contains a field <code>data</code> containing the changes:
the properties of the items that are being updated.
the properties of the items that are being updated.
</td> </td>
</tr> </tr>
<tr> <tr>

+ 2
- 1
docs/data/dataview.html View File

@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -409,4 +410,4 @@ view.on('*', function (event, properties, senderId) {
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 2
- 1
docs/data/index.html View File

@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -134,4 +135,4 @@
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 3
- 2
docs/graph2d/index.html View File

@ -96,6 +96,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -574,7 +575,7 @@ function (value) {
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
drawPoints: true // or false drawPoints: true // or false
</pre> </pre>
2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br /> 2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br />
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
drawPoints: { drawPoints: {
@ -582,7 +583,7 @@ drawPoints: {
style: 'square' style: 'square'
} }
</pre> </pre>
3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br /> 3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
drawPoints: function(item, group) { drawPoints: function(item, group) {

+ 24
- 5
docs/graph3d/index.html View File

@ -12,7 +12,7 @@
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<!-- Tipue vendor css --> <!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet"> <link href="../css/tipuesearch.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet">
@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -363,7 +364,7 @@ var options = {
<td>dataColor.fill</td> <td>dataColor.fill</td>
<td>string</td> <td>string</td>
<td>'#7DC1FF'</td> <td>'#7DC1FF'</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
</tr> </tr>
<tr> <tr>
<td>dataColor.stroke</td> <td>dataColor.stroke</td>
@ -385,6 +386,24 @@ var options = {
<td>Ratio of the size of the dots with respect to the width of the graph.</td> <td>Ratio of the size of the dots with respect to the width of the graph.</td>
</tr> </tr>
<tr>
<td>dotSizeMinFraction</td>
<td>number</td>
<td>0.5</td>
<td>Size of minimum-value dot as a fraction of dotSizeRatio.
Applicable when using style <code>dot-size</code>.</td>
</td>
</tr>
<tr>
<td>dotSizeMaxFraction</td>
<td>number</td>
<td>2.5</td>
<td>Size of maximum-value dot as a fraction of dotSizeRatio.
Applicable when using style <code>dot-size</code>.</td>
</td>
</tr>
<tr> <tr>
<td>gridColor</td> <td>gridColor</td>
<td>string</td> <td>string</td>
@ -456,8 +475,8 @@ var options = {
<td>showLegend</td> <td>showLegend</td>
<td>boolean</td> <td>boolean</td>
<td>none</td> <td>none</td>
<td>If true, a legend is drawn for the graph (if the graph type supports it).
By default a legend is drawn for dot and dot-color style graphs.
<td>If true, a legend is drawn for the graph (if the graph type supports it).
By default a legend is drawn for dot and dot-color style graphs.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -502,7 +521,7 @@ var options = {
<td>Object</td> <td>Object</td>
<td> <td>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
{
{
content: { content: {
padding: '10px', padding: '10px',
border: '1px solid #4d4d4d', border: '1px solid #4d4d4d',

+ 1
- 0
docs/network/configure.html View File

@ -59,6 +59,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

+ 1
- 0
docs/network/edges.html View File

@ -59,6 +59,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

+ 2
- 1
docs/network/groups.html View File

@ -57,6 +57,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -173,4 +174,4 @@ var options = {
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 2
- 1
docs/network/index.html View File

@ -88,6 +88,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -340,7 +341,7 @@ network.setOptions(options);
<code>'it'</code>, <code>'it'</code>,
<code>'nl'</code> <code>'nl'</code>
<code>'pt-br'</code>, <code>'pt-br'</code>,
<code>'ru'</code>
<code>'ru'</code>
are supported. Take a look at the are supported. Take a look at the
<a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a> <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
for more explaination on how to customize this. for more explaination on how to customize this.

+ 2
- 1
docs/network/interaction.html View File

@ -52,6 +52,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -168,4 +169,4 @@ network.setOptions(options);
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 4
- 3
docs/network/layout.html View File

@ -28,10 +28,10 @@
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
</script> </script>
<!-- Tipue vendor css --> <!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet"> <link href="../css/tipuesearch.css" rel="stylesheet">
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">
@ -56,6 +56,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -165,4 +166,4 @@ network.setOptions(options);
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 2
- 1
docs/network/manipulation.html View File

@ -52,6 +52,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -200,4 +201,4 @@ var options = {
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 1
- 0
docs/network/nodes.html View File

@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

+ 2
- 1
docs/network/physics.html View File

@ -53,6 +53,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -220,4 +221,4 @@ network.setOptions(options);
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 87
- 13
docs/timeline/index.html View File

@ -60,6 +60,7 @@
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li> <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li> <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li> <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li> <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@ -467,10 +468,10 @@ var groups = [
<td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td> <td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td>
</tr> </tr>
<tr> <tr>
<td>showNestedGroups</td>
<td>showNested</td>
<td>Boolean</td> <td>Boolean</td>
<td>no</td> <td>no</td>
<td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNestedGroups</code> is defaulted to <code>true</code>.</td>
<td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNested</code> is defaulted to <code>true</code>.</td>
</tr> </tr>
</table> </table>
@ -611,6 +612,7 @@ function (option, path) {
hour: 'HH:mm', hour: 'HH:mm',
weekday: 'ddd D', weekday: 'ddd D',
day: 'D', day: 'D',
week: 'w',
month: 'MMM', month: 'MMM',
year: 'YYYY' year: 'YYYY'
}, },
@ -621,6 +623,7 @@ function (option, path) {
hour: 'ddd D MMMM', hour: 'ddd D MMMM',
weekday: 'MMMM YYYY', weekday: 'MMMM YYYY',
day: 'MMMM YYYY', day: 'MMMM YYYY',
week: 'MMMM YYYY',
month: 'YYYY', month: 'YYYY',
year: '' year: ''
} }
@ -954,13 +957,29 @@ function (option, path) {
<td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td> <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
</tr> </tr>
<tr>
<td>rollingMode</td>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','rollingMode', this);">
<td><span parent="rollingMode" class="right-caret"></span> rollingMode</td>
<td>Object</td>
<td><code>Object</code></td>
<td>Specify how the timeline implements rolling mode.</td>
</tr>
<tr parent="rollingMode" class="hidden">
<td class="indent">rollingMode.follow</td>
<td>boolean</td> <td>boolean</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position.</td> <td>If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position.</td>
</tr> </tr>
<tr parent="rollingMode" class="hidden">
<td class="indent">rollingMode.offset</td>
<td>Number</td>
<td><code>'0.5'</code></td>
<td>
Set how far from the left the rolling mode is implemented from. A percentage (i.e. a decimal between 0 and 1)
Defaults to the middle or 0.5 (50%)
</td>
</tr>
<tr> <tr>
<td>rtl</td> <td>rtl</td>
<td>boolean</td> <td>boolean</td>
@ -1007,6 +1026,13 @@ function (option, path) {
visible.</td> visible.</td>
</tr> </tr>
<tr>
<td>showTooltips</td>
<td>boolean</td>
<td><code>true</code></td>
<td>If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.</td>
</tr>
<tr> <tr>
<td>stack</td> <td>stack</td>
<td>boolean</td> <td>boolean</td>
@ -1027,7 +1053,7 @@ function (option, path) {
<td>function</td> <td>function</td>
<td>When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The <code>snap</code> function can be replaced with a custom function, or can be set to <code>null</code> to disable snapping. The signature of the snap function is: <td>When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The <code>snap</code> function can be replaced with a custom function, or can be set to <code>null</code> to disable snapping. The signature of the snap function is:
<pre class="prettyprint lang-js">function snap(date: Date, scale: string, step: number) : Date or number</pre> <pre class="prettyprint lang-js">function snap(date: Date, scale: string, step: number) : Date or number</pre>
The parameter <code>scale</code> can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5.
The parameter <code>scale</code> can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'week', 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5.
</td> </td>
</tr> </tr>
@ -1054,11 +1080,11 @@ function (option, path) {
This would be used as an additional way to add content that is constant in size with the visible frame of the item and does not get visibly hidden with the item's internal container: <code>vis-item-overflow</code> which is <code>overflow:hidden</code>.</td> This would be used as an additional way to add content that is constant in size with the visible frame of the item and does not get visibly hidden with the item's internal container: <code>vis-item-overflow</code> which is <code>overflow:hidden</code>.</td>
</tr> </tr>
<tr class='depricated'>
<tr class='deprecated'>
<td>throttleRedraw</td> <td>throttleRedraw</td>
<td>number</td> <td>number</td>
<td><code>0</code></td> <td><code>0</code></td>
<td>This option is <b>DEPRICATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
<td>This option is <b>DEPRECATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
@ -1071,10 +1097,11 @@ function (option, path) {
<td class="indent">timeAxis.scale</td> <td class="indent">timeAxis.scale</td>
<td>String</td> <td>String</td>
<td>none</td> <td>none</td>
<td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
<td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'week'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
<pre class="prettyprint lang-js">var options = { <pre class="prettyprint lang-js">var options = {
timeAxis: {scale: 'minute', step: 5} timeAxis: {scale: 'minute', step: 5}
}</pre> }</pre>
<p>Note: The 'week' scale only works properly when <a href="#Localization">locales</a> are enabled.</p>
</td> </td>
</tr> </tr>
@ -1307,12 +1334,13 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr> </tr>
<tr> <tr>
<td>moveTo(time [, options])</td>
<td>moveTo(time [, options, callback])</td>
<td>none</td> <td>none</td>
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options: <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<ul> <ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li> <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul> </ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of moveTo function.
</td> </td>
</tr> </tr>
@ -1421,12 +1449,13 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr> </tr>
<tr> <tr>
<td>setWindow(start, end [, options])</td>
<td>setWindow(start, end [, options, callback])</td>
<td>none</td> <td>none</td>
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options: <td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
<ul> <ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li> <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul> </ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of setWindow function.
</td> </td>
</tr> </tr>
@ -1438,21 +1467,23 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr> </tr>
<tr> <tr>
<td>zoomIn(percentage [, options])</td>
<td>zoomIn(percentage [, options, callback])</td>
<td>none</td> <td>none</td>
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options: <td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul> <ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li> <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul> </ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomIn function.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>zoomOut(percentage [, options])</td>
<td>zoomOut(percentage [, options, callback])</td>
<td>none</td> <td>none</td>
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options: <td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul> <ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li> <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul> </ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomOut function.
</td> </td>
</tr> </tr>
@ -1541,6 +1572,16 @@ timeline.off('select', onSelect);
</td> </td>
</tr> </tr>
<tr>
<td>drop</td>
<td>
Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
<td>Fired when dropping inside the Timeline.
</td>
</tr>
<tr> <tr>
<td>mouseOver</td> <td>mouseOver</td>
<td> <td>
@ -1550,6 +1591,33 @@ timeline.off('select', onSelect);
</td> </td>
</tr> </tr>
<tr>
<td>mouseDown</td>
<td>
Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
<td>Fired when the mouse down event is triggered over a timeline element.
</td>
</tr>
<tr>
<td>mouseUp</td>
<td>
Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
<td>Fired when the mouse up event is triggered over a timeline element.
</td>
</tr>
<tr>
<td>mouseMove</td>
<td>
Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
<td>Fired when the mouse is moved over a timeline element.
</td>
</tr>
<tr> <tr>
<td>groupDragged</td> <td>groupDragged</td>
<td> <td>
@ -1990,7 +2058,10 @@ var options = {
<td>Weekday</td><td><code>vis-monday</code>, <code>vis-tuesday</code>, <code>vis-wednesday</code>, <code>vis-thursday</code>, <code>vis-friday</code>, <code>vis-saturday</code>, <code>vis-sunday</code></td> <td>Weekday</td><td><code>vis-monday</code>, <code>vis-tuesday</code>, <code>vis-wednesday</code>, <code>vis-thursday</code>, <code>vis-friday</code>, <code>vis-saturday</code>, <code>vis-sunday</code></td>
</tr> </tr>
<tr> <tr>
<td>Days</td><td><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
<td>Days</td><td><code>vis-day1</code>, <code>vis-day2</code>, ..., <code>vis-day31</code></td>
</tr>
<tr>
<td>Week</td><td><code>vis-week1</code>, <code>vis-week2</code>, ..., <code>vis-week53</code></td>
</tr> </tr>
<tr> <tr>
<td>Months</td><td><code>vis-january</code>, <code>vis-february</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td> <td>Months</td><td><code>vis-january</code>, <code>vis-february</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
@ -1999,6 +2070,9 @@ var options = {
<td>Years</td><td><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td> <td>Years</td><td><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>
</tr> </tr>
</table> </table>
<p>
Note: the 'week' scale is not included in the automatic zoom levels as its scale is not a direct logical successor of 'days' nor a logical predecessor of 'months'
</p>
<p>Examples:</p> <p>Examples:</p>

+ 3
- 1
examples/graph3d/08_dot_cloud_size.html View File

@ -49,7 +49,9 @@
horizontal: -0.54, horizontal: -0.54,
vertical: 0.5, vertical: 0.5,
distance: 1.6 distance: 1.6
}
},
dotSizeMinFraction: 0.5,
dotSizeMaxFraction: 2.5
}; };
// create our graph // create our graph

+ 2
- 0
examples/network/events/interactionEvents.html View File

@ -24,6 +24,7 @@
<pre id="eventSpan"></pre> <pre id="eventSpan"></pre>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = new vis.DataSet([ var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title: 'I have a popup!'}, {id: 1, label: 'Node 1', title: 'I have a popup!'},
@ -53,6 +54,7 @@
network.on("click", function (params) { network.on("click", function (params) {
params.event = "[original event]"; params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4); document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
}); });
network.on("doubleClick", function (params) { network.on("doubleClick", function (params) {
params.event = "[original event]"; params.event = "[original event]";

+ 25
- 17
examples/network/other/saveAndLoad.html View File

@ -71,15 +71,6 @@
draw(); draw();
} }
function addContextualInformation(elem, index, array) {
addId(elem, index);
addConnections(elem, index);
}
function addId(elem, index) {
elem.id = index;
}
function addConnections(elem, index) { function addConnections(elem, index) {
// need to replace this with a tree of the network, then get child direct children of the element // need to replace this with a tree of the network, then get child direct children of the element
elem.connections = network.getConnectedNodes(index); elem.connections = network.getConnectedNodes(index);
@ -107,7 +98,7 @@
var nodes = objectToArray(network.getPositions()); var nodes = objectToArray(network.getPositions());
nodes.forEach(addContextualInformation);
nodes.forEach(addConnections);
// pretty print node data // pretty print node data
var exportValue = JSON.stringify(nodes, undefined, 2); var exportValue = JSON.stringify(nodes, undefined, 2);
@ -141,30 +132,47 @@
return new vis.DataSet(networkNodes); return new vis.DataSet(networkNodes);
} }
function getNodeById(data, id) {
for (var n = 0; n < data.length; n++) {
if (data[n].id == id) { // double equals since id can be numeric or string
return data[n];
}
};
throw 'Can not find id \'' + id + '\' in data';
}
function getEdgeData(data) { function getEdgeData(data) {
var networkEdges = []; var networkEdges = [];
data.forEach(function(node, index, array) {
data.forEach(function(node) {
// add the connection // add the connection
node.connections.forEach(function(connId, cIndex, conns) { node.connections.forEach(function(connId, cIndex, conns) {
networkEdges.push({from: node.id, to: connId}); networkEdges.push({from: node.id, to: connId});
let cNode = getNodeById(data, connId);
var elementConnections = array[connId].connections;
var elementConnections = cNode.connections;
// remove the connection from the other node to prevent duplicate connections // remove the connection from the other node to prevent duplicate connections
var duplicateIndex = elementConnections.findIndex(function(connection) { var duplicateIndex = elementConnections.findIndex(function(connection) {
connection === node.id;
return connection == node.id; // double equals since id can be numeric or string
}); });
elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length))
});
if (duplicateIndex != -1) {
elementConnections.splice(duplicateIndex, 1);
};
});
}); });
return new vis.DataSet(networkEdges); return new vis.DataSet(networkEdges);
} }
function objectToArray(obj) { function objectToArray(obj) {
return Object.keys(obj).map(function (key) { return obj[key]; });
return Object.keys(obj).map(function (key) {
obj[key].id = key;
return obj[key];
});
} }
function resizeExportArea() { function resizeExportArea() {
@ -174,4 +182,4 @@
init(); init();
</script> </script>
</body> </body>
</html>
</html>

+ 8
- 0
examples/timeline/interaction/eventListeners.html View File

@ -72,6 +72,14 @@
logEvent('contextmenu', properties); logEvent('contextmenu', properties);
}); });
timeline.on('mouseDown', function (properties) {
logEvent('mouseDown', properties);
});
timeline.on('mouseUp', function (properties) {
logEvent('mouseUp', properties);
});
// other possible events: // other possible events:
// timeline.on('mouseOver', function (properties) { // timeline.on('mouseOver', function (properties) {

+ 4
- 1
examples/timeline/interaction/rollingMode.html View File

@ -33,7 +33,10 @@
var options = { var options = {
start: new Date(), start: new Date(),
end: new Date(new Date().getTime() + 1000000), end: new Date(new Date().getTime() + 1000000),
rollingMode: true
rollingMode: {
follow: true,
offset: 0.5
}
}; };
// create a Timeline // create a Timeline

+ 16
- 1
examples/timeline/items/tooltip.html View File

@ -12,7 +12,7 @@
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
@ -38,6 +38,12 @@
<div id="tooltips-cap"></div> <div id="tooltips-cap"></div>
<p>
Disable item tooltips.
</p>
<div id="tooltips-hide"></div>
<script type="text/javascript"> <script type="text/javascript">
// Create a DataSet (allows two way data-binding) // Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([ var items = new vis.DataSet([
@ -78,6 +84,15 @@
var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'), var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
items, cap_options); items, cap_options);
// Hide options
var hide_options = {
showTooltips: false
}
var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
items, hide_options);
</script> </script>
</body> </body>

+ 111
- 0
examples/timeline/styling/weekStyling.html View File

@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Grid styling</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
body, html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
</style>
</head>
<body>
<p>
Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version
of moment.js including locales.</p>
<p>To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.</p>
<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
numbers will be calculated according to the US week calendar numbering scheme.</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en">en</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de" selected>de</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var itemCount = 26;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// just a group for the effects
var groups = new vis.DataSet();
groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
// create a localized moment object based on the current date
var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0);
// use the locale-aware weekday function to move to the begin of the current week
USdate.weekday(0);
// Iterate and just add a week to use it again in the next iteration
for (var i = 0; i < itemCount; i++) {
var USweekNumber = USdate.format('w');
var USweekStart = USdate.format();
var USweekEnd = USdate.add(1, 'week').format();
items.add({
id: i,
group: 2,
content: 'US week ' + USweekNumber,
start: USweekStart,
end: USweekEnd
});
}
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0);
DEdate.weekday(0);
for (var j = 0; j < itemCount; j++) {
var DEweekNumber = DEdate.format('w');
var DEweekStart = DEdate.format();
var DEweekEnd = DEdate.add(1, 'week').format();
items.add({
id: itemCount + j,
group: 1,
content: 'ISO week ' + DEweekNumber,
start: DEweekStart,
end: DEweekEnd
});
}
// Configuration for the Timeline
var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

BIN
images/exampleScreenshots/timeline/styling/weekStyling.png View File

Before After
Width: 250  |  Height: 150  |  Size: 14 KiB

+ 5
- 5
index.html View File

@ -29,7 +29,7 @@
<script src="./js/smooth-scroll.min.js"></script> <script src="./js/smooth-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -37,7 +37,7 @@
function evalLinks() { function evalLinks() {
if (typeof vis === 'undefined') { if (typeof vis === 'undefined') {
console.log(document.getElementById("linkStatus")); console.log(document.getElementById("linkStatus"));
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.19.1) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.20.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("cdn_vis").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
} }
@ -205,13 +205,13 @@
<pre class="prettyprint">bower install vis</pre> <pre class="prettyprint">bower install vis</pre>
<h3>link from cdnjs.com</h3> <h3>link from cdnjs.com</h3>
<p> <p>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" target="_blank">vis.min.css</a> <br>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" target="_blank">vis.min.css</a> <br>
<span id="linkStatus"></span> <span id="linkStatus"></span>
</p> </p>
<h3>download</h3> <h3>download</h3>
<p> <p>
<a href="https://github.com/almende/vis/archive/v4.19.1.zip">v4.19.1.zip</a>
<a href="https://github.com/almende/vis/archive/v4.20.0.zip">v4.20.0.zip</a>
</p> </p>
</div> </div>
</div> </div>

+ 3
- 3
showcase/index.html View File

@ -316,7 +316,7 @@
</div> </div>
</div> </div>
<div class="col-md-12 col-lg-6">
<div class="col-md-12 col-lg-6">
<a href="https://gbrault.github.io/railroad-diagrams/live/live.html"> <a href="https://gbrault.github.io/railroad-diagrams/live/live.html">
<img src="./images/expression-results.png" class="showcase img-responsive"> <img src="./images/expression-results.png" class="showcase img-responsive">
</a> </a>
@ -333,7 +333,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12 col-lg-6">
<div class="col-md-12 col-lg-6">
<a href="http://www.iftekhar.me/ibm/ibm-project-timeline/"> <a href="http://www.iftekhar.me/ibm/ibm-project-timeline/">
<img src="./images/timeline_clustering.gif" class="showcase img-responsive"> <img src="./images/timeline_clustering.gif" class="showcase img-responsive">
</a> </a>
@ -348,6 +348,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12 col-lg-6"> <div class="col-md-12 col-lg-6">
<a href="http://www.widgetblender.com/code/php7/pv/form_for_google_patent_page_scraper.php"> <a href="http://www.widgetblender.com/code/php7/pv/form_for_google_patent_page_scraper.php">
<img src="./images/patentsearcher.png" class="showcase img-responsive"> <img src="./images/patentsearcher.png" class="showcase img-responsive">
@ -361,7 +362,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<br /><br /><br /><br /> <br /><br /><br /><br />

+ 1
- 0
timeline_examples.html View File

@ -110,6 +110,7 @@
<a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br /> <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
<a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br /> <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
<a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br /> <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
<a class='exampleLink' href="examples/timeline/styling/weekStyling.html">week styling</a><br />
<h3>data handling</h3> <h3>data handling</h3>
<a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br /> <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />

Loading…
Cancel
Save