Browse Source

updates for v4.19.0

gh-pages
Alexander Wunschik 7 years ago
parent
commit
7bbd16a718
75 changed files with 7711 additions and 1587 deletions
  1. +9
    -9
      dist/vis-graph3d.min.js
  2. +1
    -1
      dist/vis-network.min.css
  3. +17
    -17
      dist/vis-network.min.js
  4. +1
    -1
      dist/vis-timeline-graph2d.min.css
  5. +15
    -15
      dist/vis-timeline-graph2d.min.js
  6. +5
    -0
      dist/vis.css
  7. +1335
    -1159
      dist/vis.js
  8. +1
    -0
      dist/vis.js.map
  9. +1
    -0
      dist/vis.map
  10. +1
    -1
      dist/vis.min.css
  11. +24
    -24
      dist/vis.min.js
  12. +1
    -2
      docs/data/dataset.html
  13. +1
    -2
      docs/data/dataview.html
  14. +1
    -2
      docs/data/index.html
  15. +9
    -4
      docs/graph2d/index.html
  16. +85
    -24
      docs/graph3d/index.html
  17. +0
    -1
      docs/network/configure.html
  18. +1
    -2
      docs/network/edges.html
  19. +1
    -2
      docs/network/groups.html
  20. +1
    -2
      docs/network/index.html
  21. +1
    -2
      docs/network/interaction.html
  22. +3
    -4
      docs/network/layout.html
  23. +1
    -2
      docs/network/manipulation.html
  24. +17
    -4
      docs/network/nodes.html
  25. +1
    -2
      docs/network/physics.html
  26. +37
    -14
      docs/timeline/index.html
  27. +51
    -0
      examples/graph2d/21_barsWithEnd.html
  28. +0
    -9
      examples/graph2d/index.html
  29. +15
    -1
      examples/graph3d/11_tooltips.html
  30. +0
    -9
      examples/graph3d/index.html
  31. +13
    -0
      examples/graph3d/playground/index.html
  32. +3
    -0
      examples/graph3d/playground/playground.js
  33. +0
    -9
      examples/index.html
  34. +0
    -9
      examples/network/data/index.html
  35. +0
    -9
      examples/network/datasources/index.html
  36. +0
    -9
      examples/network/edgeStyles/index.html
  37. +0
    -9
      examples/network/events/index.html
  38. +0
    -9
      examples/network/exampleApplications/index.html
  39. BIN
      examples/network/imageSelected/broken-image.png
  40. +82
    -0
      examples/network/imageSelected/imageSelected.html
  41. +53
    -0
      examples/network/imageSelected/selected.svg
  42. +6
    -0
      examples/network/imageSelected/unselected.svg
  43. +0
    -9
      examples/network/img/index.html
  44. +0
    -9
      examples/network/index.html
  45. +0
    -9
      examples/network/labels/index.html
  46. +1894
    -0
      examples/network/layout/demo.jsonp
  47. +3762
    -0
      examples/network/layout/demo_big.jsonp
  48. +46
    -0
      examples/network/layout/hierarchicalLayoutBigUserDefined.html
  49. +0
    -9
      examples/network/layout/index.html
  50. +0
    -9
      examples/network/nodeStyles/index.html
  51. +0
    -9
      examples/network/other/index.html
  52. +0
    -9
      examples/network/physics/index.html
  53. +32
    -6
      examples/timeline/dataHandling/dataSerialization.html
  54. +0
    -9
      examples/timeline/dataHandling/index.html
  55. +0
    -9
      examples/timeline/editing/index.html
  56. +5
    -5
      examples/timeline/editing/individualEditableItems.html
  57. +7
    -6
      examples/timeline/editing/tooltipOnItemChange.html
  58. +0
    -9
      examples/timeline/groups/index.html
  59. +2
    -2
      examples/timeline/groups/subgroups.html
  60. +0
    -9
      examples/timeline/index.html
  61. +16
    -1
      examples/timeline/interaction/eventListeners.html
  62. +0
    -9
      examples/timeline/interaction/index.html
  63. +3
    -0
      examples/timeline/interaction/navigationMenu.html
  64. +9
    -9
      examples/timeline/items/expectedVsActualTimesItems.html
  65. +0
    -9
      examples/timeline/items/index.html
  66. +4
    -4
      examples/timeline/items/visibleFrameTemplateContent.html
  67. +95
    -0
      examples/timeline/other/customTimeBarsTooltip.html
  68. +0
    -9
      examples/timeline/other/index.html
  69. +3
    -2
      examples/timeline/other/rtl.html
  70. +3
    -2
      examples/timeline/other/verticalScroll.html
  71. +16
    -16
      examples/timeline/resources/data/wk2014.json
  72. +0
    -9
      examples/timeline/resources/index.html
  73. +0
    -9
      examples/timeline/styling/index.html
  74. +16
    -16
      examples/timeline/styling/itemTemplates.html
  75. +5
    -5
      index.html

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


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


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


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


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


+ 5
- 0
dist/vis.css View File

@ -900,6 +900,7 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
border-width: 1px; border-width: 1px;
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
z-index: 1;
/*overflow: hidden;*/ /*overflow: hidden;*/
} }
@ -997,6 +998,10 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
white-space: nowrap; white-space: nowrap;
padding: 5px; padding: 5px;
border-radius: 1px; border-radius: 1px;
transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
} }
.vis-item .vis-delete, .vis-item .vis-delete-rtl { .vis-item .vis-delete, .vis-item .vis-delete-rtl {

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


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


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


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


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


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

@ -53,7 +53,6 @@
<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>
@ -602,7 +601,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>

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

@ -53,7 +53,6 @@
<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>
@ -410,4 +409,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>

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

@ -53,7 +53,6 @@
<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>
@ -135,4 +134,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>

+ 9
- 4
docs/graph2d/index.html View File

@ -96,7 +96,6 @@
<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>
@ -297,7 +296,13 @@ var items = [
<td>label</td> <td>label</td>
<td>Object</td> <td>Object</td>
<td>no</td> <td>no</td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations.</td>
</tr>
<tr>
<td>end</td>
<td>Date</td>
<td>no</td>
<td>A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property.</td>
</tr> </tr>
</table> </table>
@ -569,7 +574,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: {
@ -577,7 +582,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) {

+ 85
- 24
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,7 +53,6 @@
<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>
@ -364,7 +363,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>
@ -422,9 +421,27 @@ var options = {
<td>showGrid</td> <td>showGrid</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
<td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
graph).</td> graph).</td>
</tr> </tr>
<tr>
<td>showXAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, X axis and X axis labels are drawn.</td>
</tr>
<tr>
<td>showYAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Y axis and Y axis labels are drawn.</td>
</tr>
<tr>
<td>showZAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Z axis and Z axis labels are drawn.</td>
</tr>
<tr> <tr>
<td>showPerspective</td> <td>showPerspective</td>
<td>boolean</td> <td>boolean</td>
@ -439,8 +456,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>
@ -480,6 +497,38 @@ var options = {
</td> </td>
</tr> </tr>
<tr>
<td>tooltipStyle</td>
<td>Object</td>
<td>
<pre class="prettyprint lang-js">
{
content: {
padding: '10px',
border: '1px solid #4d4d4d',
color: '#1a1a1a',
background: 'rgba(255,255,255,0.7)',
borderRadius: '2px',
boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
},
line: {
height: '40px',
width: '0',
borderLeft: '1px solid #4d4d4d'
},
dot: {
height: '0',
width: '0',
border: '5px solid #4d4d4d',
borderRadius: '5px'
}
}</pre>
</td>
<td>Tooltip style properties.
Provided properties will be merged with the default object.
</td>
</tr>
<tr> <tr>
<td>valueMax</td> <td>valueMax</td>
<td>number</td> <td>number</td>
@ -514,8 +563,8 @@ var options = {
<td>xBarWidth</td> <td>xBarWidth</td>
<td>number</td> <td>number</td>
<td>none</td> <td>none</td>
<td>The width of bars in x direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
<td>The width of bars in x direction. By default, the width is equal to the smallest distance
between the data points.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td> Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr> </tr>
@ -529,14 +578,18 @@ var options = {
<tr> <tr>
<td>xMax</td> <td>xMax</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The maximum value for the x-axis.</td>
<td>from data</td>
<td>The maximum value for the x-axis.
If not set, the largest value for x in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>xMin</td> <td>xMin</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The minimum value for the x-axis.</td>
<td>from data</td>
<td>The minimum value for the x-axis.
If not set, the smallest value for x in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>xStep</td> <td>xStep</td>
@ -557,8 +610,8 @@ var options = {
<td>yBarWidth</td> <td>yBarWidth</td>
<td>number</td> <td>number</td>
<td>none</td> <td>none</td>
<td>The width of bars in y direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
<td>The width of bars in y direction. By default, the width is equal to the smallest distance
between the data points.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td> Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr> </tr>
@ -572,14 +625,18 @@ var options = {
<tr> <tr>
<td>yMax</td> <td>yMax</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The maximum value for the y-axis.</td>
<td>from data</td>
<td>The maximum value for the y-axis.
If not set, the largest value for y in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>yMin</td> <td>yMin</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The minimum value for the y-axis.</td>
<td>from data</td>
<td>The minimum value for the y-axis.
If not set, the smallest value for y in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>yStep</td> <td>yStep</td>
@ -597,16 +654,20 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>zMin</td>
<td>zMax</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The minimum value for the z-axis.</td>
<td>from data</td>
<td>The maximum value for the z-axis.
If not set, the largest value for z in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>zMax</td>
<td>zMin</td>
<td>number</td> <td>number</td>
<td>none</td>
<td>The maximum value for the z-axis.</td>
<td>from data</td>
<td>The minimum value for the z-axis.
If not set, the smallest value for z in the data set is used.
</td>
</tr> </tr>
<tr> <tr>
<td>zStep</td> <td>zStep</td>

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

@ -59,7 +59,6 @@
<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
- 2
docs/network/edges.html View File

@ -59,7 +59,6 @@
<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>
@ -935,7 +934,7 @@ var options: {
<td>String</td> <td>String</td>
<td><code>'dynamic'</code></td> <td><code>'dynamic'</code></td>
<td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at our example 26 to see what these look like
'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at <a href="http://visjs.org/examples/network/edgeStyles/smooth.html">this example</a> to see what these look like
and pick the one that you like best! and pick the one that you like best!
<br><br> <br><br>
When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the

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

@ -57,7 +57,6 @@
<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>
@ -174,4 +173,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
- 2
docs/network/index.html View File

@ -88,7 +88,6 @@
<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>
@ -341,7 +340,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.

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

@ -52,7 +52,6 @@
<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>
@ -169,4 +168,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>

+ 3
- 4
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,7 +56,6 @@
<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>
@ -166,4 +165,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>

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

@ -52,7 +52,6 @@
<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>
@ -201,4 +200,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>

+ 17
- 4
docs/network/nodes.html View File

@ -53,7 +53,6 @@
<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>
@ -734,14 +733,28 @@ network.setOptions(options);
<td><code>undefined</code></td> <td><code>undefined</code></td>
<td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td> <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
</tr> </tr>
<tr>
<td>image</td>
<td>String</td>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','image', this);">
<td><span parent="image" class="right-caret"></span> image</td>
<td>Object or String</td>
<td><code>undefined</code></td> <td><code>undefined</code></td>
<td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL
to an image. If the image cannot be found, the brokenImage option can be used. to an image. If the image cannot be found, the brokenImage option can be used.
</td> </td>
</tr> </tr>
<tr parent="image" class="hidden">
<td class="indent">image.unselected</td>
<td>String</td>
<td><code>undefined</code></td>
<td>Unselected (default) image URL.
</td>
</tr>
<tr parent="image" class="hidden">
<td class="indent">image.selected</td>
<td>String</td>
<td><code>undefined</code></td>
<td>Selected image URL.
</td>
</tr>
<tr> <tr>
<td>label</td> <td>label</td>
<td>String</td> <td>String</td>

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

@ -53,7 +53,6 @@
<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>
@ -221,4 +220,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>

+ 37
- 14
docs/timeline/index.html View File

@ -60,7 +60,6 @@
<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>
@ -357,7 +356,7 @@ var items = new vis.DataSet([
<td class="indent">editable.updateTime</td> <td class="indent">editable.updateTime</td>
<td>boolean</td> <td>boolean</td>
<td>no</td> <td>no</td>
<td>If true, items can be dragged to another moment int time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
</table> </table>
@ -1044,7 +1043,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 the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</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, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
@ -1367,7 +1366,7 @@ document.getElementById('myTimeline').onclick = function (event) {
<td>setCustomTimeTitle(title [, id])</td> <td>setCustomTimeTitle(title [, id])</td>
<td>none</td> <td>none</td>
<td>Adjust the title attribute of a custom time bar. <td>Adjust the title attribute of a custom time bar.
Parameter <code>title</code> is the string to be set as title. Use empty string to hide the title completely.
Parameter <code>title</code> is the string or function to be set as title. Use empty string to hide the title completely.
Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default. Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
</td> </td>
</tr> </tr>
@ -1431,16 +1430,29 @@ document.getElementById('myTimeline').onclick = function (event) {
</td> </td>
</tr> </tr>
<tr>
<td>toggleRollingMode()</td>
<td>none</td>
<td>Toggle rollingMode.
</td>
</tr>
<tr> <tr>
<td>zoomIn(percentage)</td>
<td>zoomIn(percentage [, options])</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.
<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>
<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>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>zoomOut(percentage)</td>
<td>zoomOut(percentage [, options])</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.
<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>
<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>
</td> </td>
</tr> </tr>
@ -1691,6 +1703,14 @@ var items = new vis.DataSet([
]); ]);
</pre> </pre>
<p>
Individual manipulation actions (<code>updateTime</code>, <code>updateGroup</code> and <code>remove</code>) can also be set on individual items. If any of the item-level
actions are specified (and <code>overrideItems</code> is not <code>false</code>) then that takes precedence over the settings at the timeline level. Current behavior is
that if any of the item-level actions are not specified, those items get <code>undefined</code> value (rather than inheriting from the timeline level). This may change
in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using
<code>editable: {updateTime : true}</code>, use <code>editable: {updateTime : true, updateGroup: false, remove: false}</code>.
</p>
<p> <p>
One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose: One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
</p> </p>
@ -1736,11 +1756,11 @@ var items = new vis.DataSet([
<h2 id="Templates">Templates</h2> <h2 id="Templates">Templates</h2>
<p> <p>
Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML:
Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:
</p> </p>
<pre class="prettyprint lang-js">var options = { <pre class="prettyprint lang-js">var options = {
template: function (item) {
template: function (item, element, data) {
var html = ... // generate HTML markup for this item var html = ... // generate HTML markup for this item
return html; return html;
} }
@ -1752,8 +1772,11 @@ var items = new vis.DataSet([
The HTML for an item can be created manually: The HTML for an item can be created manually:
<pre class="prettyprint lang-js">var options = { <pre class="prettyprint lang-js">var options = {
template: function (item) {
return '&lt;h1&gt;' + item.header + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
template: function (item, element, data) {
return '&lt;h1&gt;' + item.header + data.moving?' '+ data.start:'' + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
},
onMoving: function (item, callback) {
item.moving = true;
} }
}; };
</pre> </pre>
@ -1788,7 +1811,7 @@ var template = Handlebars.compile(source);
You can use a React component for the templates by rendering them to the templates' element directly: You can use a React component for the templates by rendering them to the templates' element directly:
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
template: function (item, element) {
template: function (item, element, data) {
return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element); return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
}, },
</pre> </pre>
@ -1807,7 +1830,7 @@ var templates = {
}; };
var options = { var options = {
template: function (item) {
template: function (item, element, data) {
var template = templates[item.template]; // choose the right template var template = templates[item.template]; // choose the right template
return template(item); // execute the template return template(item); // execute the template
} }

+ 51
- 0
examples/graph2d/21_barsWithEnd.html View File

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graph With End Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how you can plot a bar chart and supply an end value to have it fill.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
{x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
{x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
{x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
{x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
{x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 0
- 9
examples/graph2d/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../graph3d_examples.html">
</head>
<body>
<a href="../../graph3d_examples.html">Back to overview...</a></p>
</body>
</html>

+ 15
- 1
examples/graph3d/11_tooltips.html View File

@ -64,12 +64,26 @@
showShadow: false, showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents // Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) { tooltip: function (point) {
// parameter point contains properties x, y, z, and data // parameter point contains properties x, y, z, and data
// data is the original object passed to the point constructor // data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra; return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
}, },
// Tooltip default styling can be overridden
tooltipStyle: {
content: {
background : 'rgba(255, 255, 255, 0.7)',
padding : '10px',
borderRadius : '10px'
},
line: {
borderLeft : '1px dotted rgba(0, 0, 0, 0.5)'
},
dot: {
border : '5px solid rgba(0, 0, 0, 0.5)'
}
},
keepAspectRatio: true, keepAspectRatio: true,
verticalRatio: 0.5 verticalRatio: 0.5

+ 0
- 9
examples/graph3d/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../graph3d_examples.html">
</head>
<body>
<a href="../../graph3d_examples.html">Back to overview...</a></p>
</body>
</html>

+ 13
- 0
examples/graph3d/playground/index.html View File

@ -112,6 +112,19 @@
<td>showGrid</td> <td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td> <td><input type="checkbox" id="showGrid" checked /></td>
</tr> </tr>
<tr>
<td>showXAxis</td>
<td><input type="checkbox" id="showXAxis" checked /></td>
</tr>
<tr>
<td>showYAxis</td>
<td><input type="checkbox" id="showYAxis" checked /></td>
</tr>
<tr>
<td>showZAxis</td>
<td><input type="checkbox" id="showZAxis" checked /></td>
</tr>
<tr> <tr>
<td>showPerspective</td> <td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td> <td><input type="checkbox" id="showPerspective" checked /></td>

+ 3
- 0
examples/graph3d/playground/playground.js View File

@ -406,6 +406,9 @@ function getOptions() {
style: document.getElementById("style").value, style: document.getElementById("style").value,
showAnimationControls: (document.getElementById("showAnimationControls").checked != false), showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
showGrid: (document.getElementById("showGrid").checked != false), showGrid: (document.getElementById("showGrid").checked != false),
showXAxis: (document.getElementById("showXAxis").checked != false),
showYAxis: (document.getElementById("showYAxis").checked != false),
showZAxis: (document.getElementById("showZAxis").checked != false),
showPerspective: (document.getElementById("showPerspective").checked != false), showPerspective: (document.getElementById("showPerspective").checked != false),
showLegend: (document.getElementById("showLegend").checked != false), showLegend: (document.getElementById("showLegend").checked != false),
showShadow: (document.getElementById("showShadow").checked != false), showShadow: (document.getElementById("showShadow").checked != false),

+ 0
- 9
examples/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../#modules">
</head>
<body>
<a href="../#modules">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/data/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/datasources/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/edgeStyles/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/events/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/exampleApplications/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

BIN
examples/network/imageSelected/broken-image.png View File

Before After
Width: 256  |  Height: 256  |  Size: 1.7 KiB

+ 82
- 0
examples/network/imageSelected/imageSelected.html View File

@ -0,0 +1,82 @@
<html>
<head>
<title>Network | Selected/Unselected Image</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([{
id: 1,
shape: 'image',
size: 20,
label: 'No select image',
image: './unselected.svg',
}, {
id: 2,
shape: 'image',
size: 20,
label: 'Select image broken',
image: {
unselected: './unselected.svg',
selected: './BROKEN_LINK/selected.svg',
},
}, {
id: 3,
shape: 'image',
size: 20,
label: 'Select works!',
image: {
unselected: './unselected.svg',
selected: './selected.svg',
},
shapeProperties: {
borderDashes: [15, 5],
interpolation: false,
}
}]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout:{
randomSeed: 5
},
nodes: {
brokenImage: './broken-image.png',
}
};
// initialize!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

+ 53
- 0
examples/network/imageSelected/selected.svg View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="504.566px"
height="577.672px" viewBox="0 0 504.566 577.672" enable-background="new 0 0 504.566 577.672" xml:space="preserve">
<g id="path4697_1_">
<polygon fill="#FFCB94" points="16,152.415 252.29,15.998 488.572,152.415 488.572,425.249 252.29,561.667 16.008,425.249 "/>
<g>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16,152.425 16,152.415 16.009,152.41
"/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2077,0,68.2077,68.2032" x1="75.075" y1="118.309" x2="222.748" y2="33.053"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.281,16.002 252.29,15.998
252.299,16.002 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2058,0,68.2058,68.2013" x1="311.363" y1="50.104" x2="459.031" y2="135.36"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.563,152.41 488.572,152.415
488.572,152.425 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="488.572" y1="220.626" x2="488.572" y2="391.138"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.572,425.239 488.572,425.249
488.563,425.253 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2059,0,68.2059,68.2014" x1="429.499" y1="459.354" x2="281.831" y2="544.611"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.299,561.662 252.29,561.667
252.281,561.662 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2061,0,68.2061,68.2016" x1="193.218" y1="527.561" x2="45.549" y2="442.304"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16.017,425.253 16.008,425.249
16.008,425.239 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="16.006" y1="357.038" x2="16.001" y2="186.525"/>
</g>
</g>
<g id="path4697">
<g>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="16.002,228.415 16,152.415
81.819,114.416 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="186.472,53.997 252.29,15.998
318.108,53.998 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="422.754,114.415 488.572,152.415
488.572,228.415 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="488.572,349.249 488.572,425.249
422.754,463.249 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="318.108,523.667 252.29,561.667
186.472,523.667 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="81.826,463.249 16.008,425.249
16.006,349.249 "/>
</g>
</g>
</svg>

+ 6
- 0
examples/network/imageSelected/unselected.svg View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="203.79mm" width="178mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 630.70347 722.08501">
<g id="layer1" transform="translate(61.066 -28.463)">
<path id="path4697" stroke-linejoin="round" fill="#f57f17" stroke="#37474e" stroke-linecap="round" stroke-miterlimit="100" stroke-width="40" d="m-41.066 218.98 295.36-170.52l295.35 170.52 0.00001 341.04-295.35 170.52-295.35-170.52z"/>
</g>
</svg>

+ 0
- 9
examples/network/img/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../network_examples.html">
</head>
<body>
<a href="../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/labels/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 1894
- 0
examples/network/layout/demo.jsonp
File diff suppressed because it is too large
View File


+ 3762
- 0
examples/network/layout/demo_big.jsonp
File diff suppressed because it is too large
View File


+ 46
- 0
examples/network/layout/hierarchicalLayoutBigUserDefined.html View File

@ -0,0 +1,46 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var network = null;
function p(data) {
var container = document.getElementById('mynetwork');
var options = {
layout: {
hierarchical: {},
},
};
console.log("starting layout");
network = new vis.Network(container, data, options);
console.log("layout complete");
}
</script>
</head>
<body>
<h2>Hierarchical Layout</h2>
<div id="mynetwork"></div>
<script type="text/javascript" src="./demo.jsonp"></script>
</body>
</html>

+ 0
- 9
examples/network/layout/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/nodeStyles/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/other/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/network/physics/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../network_examples.html">
</head>
<body>
<a href="../../../network_examples.html">Back to overview...</a></p>
</body>
</html>

+ 32
- 6
examples/timeline/dataHandling/dataSerialization.html View File

@ -35,12 +35,38 @@
<textarea id="data"> <textarea id="data">
[ [
{"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"},
{"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"},
{"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"},
{"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"},
{"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"},
{"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"}
{
"id": 1,
"content": "item 1",
"start": "2014-01-01T01:00:00"
},
{
"id": 2,
"content": "item 2",
"start": "2014-01-01T02:00:00"
},
{
"id": 3,
"content": "item 3",
"start": "2014-01-01T03:00:00"
},
{
"id": 4,
"content": "item 4",
"start": "2014-01-01T04:00:00",
"end": "2014-01-01T04:30:00"
},
{
"id": 5,
"content": "item 5",
"start": "2014-01-01T05:00:00",
"type": "point"
},
{
"id": 6,
"content": "item 6",
"start": "2014-01-01T06:00:00"
}
] ]
</textarea> </textarea>

+ 0
- 9
examples/timeline/dataHandling/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/timeline/editing/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 5
- 5
examples/timeline/editing/individualEditableItems.html View File

@ -34,7 +34,7 @@
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
// create groups to highligh groupUpdate
// create groups to highlight groupUpdate
var groups = new vis.DataSet([ var groups = new vis.DataSet([
{id: 1, content: 'Group 1'}, {id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'} {id: 2, content: 'Group 2'}
@ -45,9 +45,9 @@
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2}, {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1}, {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2}, {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2} {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
]); ]);
@ -60,4 +60,4 @@
</script> </script>
</body> </body>
</html>
</html>

+ 7
- 6
examples/timeline/editing/tooltipOnItemChange.html View File

@ -2,6 +2,7 @@
<head> <head>
<title>Timeline | Tooltip on item onUpdateTime Option</title> <title>Timeline | Tooltip on item onUpdateTime Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
@ -63,20 +64,20 @@
editable: true editable: true
}; };
var options1 = Object.assign({
var options1 = jQuery.extend(options, {
tooltipOnItemUpdateTime: true tooltipOnItemUpdateTime: true
}, options)
})
var container1 = document.getElementById('mytimeline1'); var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, null, options1); timeline1 = new vis.Timeline(container1, items, null, options1);
var options2 = Object.assign({
var options2 = jQuery.extend(options, {
orientation: 'top', orientation: 'top',
tooltipOnItemUpdateTime: { tooltipOnItemUpdateTime: {
template: function(item) { template: function(item) {
return 'html template for tooltip with <b>item.start</b>: ' + item.start; return 'html template for tooltip with <b>item.start</b>: ' + item.start;
} }
} }
}, options)
})
var container2 = document.getElementById('mytimeline2'); var container2 = document.getElementById('mytimeline2');
timeline2 = new vis.Timeline(container2, items, null, options2); timeline2 = new vis.Timeline(container2, items, null, options2);
@ -117,10 +118,10 @@
} }
var options3 = Object.assign({
var options3 = jQuery.extend(options, {
orientation: 'top', orientation: 'top',
tooltipOnItemUpdateTime: true tooltipOnItemUpdateTime: true
}, options)
})
var container3 = document.getElementById('mytimeline3'); var container3 = document.getElementById('mytimeline3');
timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);

+ 0
- 9
examples/timeline/groups/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 2
- 2
examples/timeline/groups/subgroups.html View File

@ -51,7 +51,7 @@
{id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0}, {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0}, {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 1, content: 'subgroup0', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 1, content: 'subgroup0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1}, {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1}, {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1}, {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
@ -78,4 +78,4 @@
} }
</script> </script>
</body> </body>
</html>
</html>

+ 0
- 9
examples/timeline/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../timeline_examples.html">
</head>
<body>
<a href="../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 16
- 1
examples/timeline/interaction/eventListeners.html View File

@ -41,9 +41,11 @@
timeline.on('rangechange', function (properties) { timeline.on('rangechange', function (properties) {
logEvent('rangechange', properties); logEvent('rangechange', properties);
}); });
timeline.on('rangechanged', function (properties) { timeline.on('rangechanged', function (properties) {
logEvent('rangechanged', properties); logEvent('rangechanged', properties);
}); });
timeline.on('select', function (properties) { timeline.on('select', function (properties) {
logEvent('select', properties); logEvent('select', properties);
}); });
@ -52,6 +54,7 @@
logEvent('itemover', properties); logEvent('itemover', properties);
setHoveredItem(properties.item); setHoveredItem(properties.item);
}); });
timeline.on('itemout', function (properties) { timeline.on('itemout', function (properties) {
logEvent('itemout', properties); logEvent('itemout', properties);
setHoveredItem('none'); setHoveredItem('none');
@ -83,11 +86,23 @@
logEvent(event, properties); logEvent(event, properties);
}); });
function stringifyObject (object) {
if (!object) return;
var replacer = function(key, value) {
if (value && value.tagName) {
return "DOM Element";
} else {
return value;
}
}
return JSON.stringify(object, replacer)
}
function logEvent(event, properties) { function logEvent(event, properties) {
var log = document.getElementById('log'); var log = document.getElementById('log');
var msg = document.createElement('div'); var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' + msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + JSON.stringify(properties);
'properties=' + stringifyObject(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
} }

+ 0
- 9
examples/timeline/interaction/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 3
- 0
examples/timeline/interaction/navigationMenu.html View File

@ -38,6 +38,7 @@
<input type="button" id="zoomOut" value="Zoom out"/> <input type="button" id="zoomOut" value="Zoom out"/>
<input type="button" id="moveLeft" value="Move left"/> <input type="button" id="moveLeft" value="Move left"/>
<input type="button" id="moveRight" value="Move right"/> <input type="button" id="moveRight" value="Move right"/>
<input type="button" id="toggleRollingMode" value="toggleRollingMode"/>
</div> </div>
</div> </div>
@ -74,6 +75,8 @@
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); }; document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); }; document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); }; document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('toggleRollingMode').onclick = function () { timeline.toggleRollingMode() };
</script> </script>
</body> </body>

+ 9
- 9
examples/timeline/items/expectedVsActualTimesItems.html View File

@ -61,16 +61,16 @@
id: 1, id: 1,
content: 'item 1 (expected time)', content: 'item 1 (expected time)',
className: 'expected', className: 'expected',
start: '2014-01-23 12:00:00',
end: '2014-01-26 12:00:00',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group:'group1', group:'group1',
subgroup:'sg_1' subgroup:'sg_1'
}, },
{ {
id: 2, id: 2,
content: 'item 1 (actual time)', content: 'item 1 (actual time)',
start: '2014-01-24 12:00:00',
end: '2014-01-27 12:00:00',
start: '2014-01-24T12:00:00',
end: '2014-01-27T12:00:00',
group:'group1', group:'group1',
subgroup:'sg_1' subgroup:'sg_1'
}, },
@ -80,16 +80,16 @@
id: 3, id: 3,
content: 'item 2 (expected time)', content: 'item 2 (expected time)',
className: 'expected', className: 'expected',
start: '2014-01-13 12:00:00',
end: '2014-01-16 12:00:00',
start: '2014-01-13T12:00:00',
end: '2014-01-16T12:00:00',
group:'group1', group:'group1',
subgroup:'sg_2' subgroup:'sg_2'
}, },
{ {
id: 4, id: 4,
content: 'item 2 (actual time)', content: 'item 2 (actual time)',
start: '2014-01-14 12:00:00',
end: '2014-01-17 12:00:00',
start: '2014-01-14T12:00:00',
end: '2014-01-17T12:00:00',
group:'group1', group:'group1',
subgroup:'sg_2' subgroup:'sg_2'
} }
@ -108,4 +108,4 @@
</script> </script>
</body> </body>
</html>
</html>

+ 0
- 9
examples/timeline/items/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 4
- 4
examples/timeline/items/visibleFrameTemplateContent.html View File

@ -45,18 +45,18 @@
{id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'}, {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
{id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'}, {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
{id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'}, {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
{id: 4, content: 'item 4 with visibleFramTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFramTemplate: '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">80%<label></div>'
{id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
} }
]); ]);
// Configuration for the Timeline // Configuration for the Timeline
var options = { var options = {
visibleFrameTemplate: function(item) { visibleFrameTemplate: function(item) {
if (item.visibleFramTemplate) {
return item.visibleFramTemplate;
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
} }
var percentage = item.value * 100 + '%'; var percentage = item.value * 100 + '%';
return '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">' + percentage + '<label></div>';
return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
} }
}; };

+ 95
- 0
examples/timeline/other/customTimeBarsTooltip.html View File

@ -0,0 +1,95 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Show current and custom time bars</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>
The Timeline has functions to add multiple custom time bars which can be dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar">
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p><br>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate, 't1');
timeline.setCustomTimeTitle(function(time){
return "I'm t1!";
}, "t1");
document.getElementById('add').onclick = function () {
try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
timeline.setCustomTimeTitle(function(time){
return "I'm "+barId+"!";
}, barId);
document.getElementById('barId').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById('remove').onclick = function () {
try {
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
timeline.on('timechange', function (properties) {
document.getElementById('timechangeBar').innerHTML = properties.id;
document.getElementById('timechangeEvent').innerHTML = properties.time;
});
timeline.on('timechanged', function (properties) {
document.getElementById('timechangedBar').innerHTML = properties.id;
document.getElementById('timechangedEvent').innerHTML = properties.time;
});
</script>
</body>
</html>

+ 0
- 9
examples/timeline/other/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 3
- 2
examples/timeline/other/rtl.html View File

@ -3,6 +3,7 @@
<head> <head>
<title>Timeline | RTL example</title> <title>Timeline | RTL example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<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" />
@ -39,10 +40,10 @@
height: '300px', height: '300px',
}; };
var options1 = Object.assign({}, options)
var options1 = jQuery.extend(options, {})
var timeline1 = new vis.Timeline(container1, items, options1); var timeline1 = new vis.Timeline(container1, items, options1);
var options2 = Object.assign({rtl: true}, options)
var options2 = jQuery.extend(options, {rtl: true})
var timeline2 = new vis.Timeline(container2, items, options2); var timeline2 = new vis.Timeline(container2, items, options2);
</script> </script>

+ 3
- 2
examples/timeline/other/verticalScroll.html View File

@ -2,6 +2,7 @@
<head> <head>
<title>Timeline | Vertical Scroll Option</title> <title>Timeline | Vertical Scroll Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
@ -75,11 +76,11 @@ zoomKey: 'ctrlKey'
// create a Timeline // create a Timeline
options1 = Object.assign({}, options)
options1 = jQuery.extend(options, {});
var container1 = document.getElementById('mytimeline1'); var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options1); timeline1 = new vis.Timeline(container1, items, groups, options1);
options2 = Object.assign({horizontalScroll: true}, options)
options2 = jQuery.extend(options, {horizontalScroll: true});
var container2 = document.getElementById('mytimeline2'); var container2 = document.getElementById('mytimeline2');
timeline2 = new vis.Timeline(container2, items, groups, options2); timeline2 = new vis.Timeline(container2, items, groups, options2);

+ 16
- 16
examples/timeline/resources/data/wk2014.json View File

@ -7,7 +7,7 @@
"abbr2": "cl", "abbr2": "cl",
"score2": "1 (2)", "score2": "1 (2)",
"description": "round of 16", "description": "round of 16",
"start": "2014-06-28 13:00"
"start": "2014-06-28T13:00"
}, },
{ {
"player1": "Colombia", "player1": "Colombia",
@ -17,7 +17,7 @@
"abbr2": "uy", "abbr2": "uy",
"score2": 0, "score2": 0,
"description": "round of 16", "description": "round of 16",
"start": "2014-06-28 17:00"
"start": "2014-06-28T17:00"
}, },
{ {
"player1": "Netherlands", "player1": "Netherlands",
@ -27,7 +27,7 @@
"abbr2": "mx", "abbr2": "mx",
"score2": 1, "score2": 1,
"description": "round of 16", "description": "round of 16",
"start": "2014-06-29 13:00"
"start": "2014-06-29T13:00"
}, },
{ {
"player1": "Costa Rica", "player1": "Costa Rica",
@ -37,7 +37,7 @@
"abbr2": "gr", "abbr2": "gr",
"score2": "1 (3)", "score2": "1 (3)",
"description": "round of 16", "description": "round of 16",
"start": "2014-06-29 17:00"
"start": "2014-06-29T17:00"
}, },
{ {
"player1": "France", "player1": "France",
@ -47,7 +47,7 @@
"abbr2": "ng", "abbr2": "ng",
"score2": 0, "score2": 0,
"description": "round of 16", "description": "round of 16",
"start": "2014-06-30 13:00"
"start": "2014-06-30T13:00"
}, },
{ {
"player1": "Germany", "player1": "Germany",
@ -57,7 +57,7 @@
"abbr2": "dz", "abbr2": "dz",
"score2": 1, "score2": 1,
"description": "round of 16", "description": "round of 16",
"start": "2014-06-30 17:00"
"start": "2014-06-30T17:00"
}, },
{ {
"player1": "Argentina", "player1": "Argentina",
@ -67,7 +67,7 @@
"abbr2": "ch", "abbr2": "ch",
"score2": 0, "score2": 0,
"description": "round of 16", "description": "round of 16",
"start": "2014-07-01 13:00"
"start": "2014-07-01T13:00"
}, },
{ {
"player1": "Belgium", "player1": "Belgium",
@ -77,7 +77,7 @@
"abbr2": "us", "abbr2": "us",
"score2": 1, "score2": 1,
"description": "round of 16", "description": "round of 16",
"start": "2014-07-01 17:00"
"start": "2014-07-01T17:00"
}, },
{ {
"player1": "France", "player1": "France",
@ -87,7 +87,7 @@
"abbr2": "de", "abbr2": "de",
"score2": 1, "score2": 1,
"description": "quarter-finals", "description": "quarter-finals",
"start": "2014-07-04 13:00"
"start": "2014-07-04T13:00"
}, },
{ {
"player1": "Brazil", "player1": "Brazil",
@ -97,7 +97,7 @@
"abbr2": "co", "abbr2": "co",
"score2": 1, "score2": 1,
"description": "quarter-finals", "description": "quarter-finals",
"start": "2014-07-04 17:00"
"start": "2014-07-04T17:00"
}, },
{ {
"player1": "Argentina", "player1": "Argentina",
@ -107,7 +107,7 @@
"abbr2": "be", "abbr2": "be",
"score2": 0, "score2": 0,
"description": "quarter-finals", "description": "quarter-finals",
"start": "2014-07-05 13:00"
"start": "2014-07-05T13:00"
}, },
{ {
"player1": "Netherlands", "player1": "Netherlands",
@ -117,7 +117,7 @@
"abbr2": "cr", "abbr2": "cr",
"score2": "0 (3)", "score2": "0 (3)",
"description": "quarter-finals", "description": "quarter-finals",
"start": "2014-07-05 17:00"
"start": "2014-07-05T17:00"
}, },
{ {
"player1": "Brazil", "player1": "Brazil",
@ -127,7 +127,7 @@
"abbr2": "de", "abbr2": "de",
"score2": 7, "score2": 7,
"description": "semi-finals", "description": "semi-finals",
"start": "2014-07-08 17:00"
"start": "2014-07-08T17:00"
}, },
{ {
"player1": "Netherlands", "player1": "Netherlands",
@ -137,7 +137,7 @@
"abbr2": "ar", "abbr2": "ar",
"score2": "0 (4)", "score2": "0 (4)",
"description": "semi-finals", "description": "semi-finals",
"start": "2014-07-09 17:00"
"start": "2014-07-09T17:00"
}, },
{ {
"player1": "Germany", "player1": "Germany",
@ -147,6 +147,6 @@
"abbr2": "ar", "abbr2": "ar",
"score2": 0, "score2": 0,
"description": "final", "description": "final",
"start": "2014-07-13 16:00"
"start": "2014-07-13T16:00"
} }
]
]

+ 0
- 9
examples/timeline/resources/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 0
- 9
examples/timeline/styling/index.html View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
</head>
<body>
<a href="../../../timeline_examples.html">Back to overview...</a></p>
</body>
</html>

+ 16
- 16
examples/timeline/styling/itemTemplates.html View File

@ -88,7 +88,7 @@
abbr2: 'cl', abbr2: 'cl',
score2: '1 (2)', score2: '1 (2)',
description: 'round of 16', description: 'round of 16',
start: '2014-06-28 13:00'
start: '2014-06-28T13:00:00'
}, },
{ {
player1: 'Colombia', player1: 'Colombia',
@ -98,7 +98,7 @@
abbr2: 'uy', abbr2: 'uy',
score2: 0, score2: 0,
description: 'round of 16', description: 'round of 16',
start: '2014-06-28 17:00'
start: '2014-06-28T17:00:00'
}, },
{ {
player1: 'Netherlands', player1: 'Netherlands',
@ -108,7 +108,7 @@
abbr2: 'mx', abbr2: 'mx',
score2: 1, score2: 1,
description: 'round of 16', description: 'round of 16',
start: '2014-06-29 13:00'
start: '2014-06-29T13:00:00'
}, },
{ {
player1: 'Costa Rica', player1: 'Costa Rica',
@ -118,7 +118,7 @@
abbr2: 'gr', abbr2: 'gr',
score2: '1 (3)', score2: '1 (3)',
description: 'round of 16', description: 'round of 16',
start: '2014-06-29 17:00'
start: '2014-06-29T17:00:00'
}, },
{ {
player1: 'France', player1: 'France',
@ -128,7 +128,7 @@
abbr2: 'ng', abbr2: 'ng',
score2: 0, score2: 0,
description: 'round of 16', description: 'round of 16',
start: '2014-06-30 13:00'
start: '2014-06-30T13:00:00'
}, },
{ {
player1: 'Germany', player1: 'Germany',
@ -138,7 +138,7 @@
abbr2: 'dz', abbr2: 'dz',
score2: 1, score2: 1,
description: 'round of 16', description: 'round of 16',
start: '2014-06-30 17:00'
start: '2014-06-30T17:00:00'
}, },
{ {
player1: 'Argentina', player1: 'Argentina',
@ -148,7 +148,7 @@
abbr2: 'ch', abbr2: 'ch',
score2: 0, score2: 0,
description: 'round of 16', description: 'round of 16',
start: '2014-07-01 13:00'
start: '2014-07-01T13:00:00'
}, },
{ {
player1: 'Belgium', player1: 'Belgium',
@ -158,7 +158,7 @@
abbr2: 'us', abbr2: 'us',
score2: 1, score2: 1,
description: 'round of 16', description: 'round of 16',
start: '2014-07-01 17:00'
start: '2014-07-01T17:00:00'
}, },
// quarter-finals // quarter-finals
@ -170,7 +170,7 @@
abbr2: 'de', abbr2: 'de',
score2: 1, score2: 1,
description: 'quarter-finals', description: 'quarter-finals',
start: '2014-07-04 13:00'
start: '2014-07-04T13:00:00'
}, },
{ {
player1: 'Brazil', player1: 'Brazil',
@ -180,7 +180,7 @@
abbr2: 'co', abbr2: 'co',
score2: 1, score2: 1,
description: 'quarter-finals', description: 'quarter-finals',
start: '2014-07-04 17:00'
start: '2014-07-04T17:00:00'
}, },
{ {
player1: 'Argentina', player1: 'Argentina',
@ -190,7 +190,7 @@
abbr2: 'be', abbr2: 'be',
score2: 0, score2: 0,
description: 'quarter-finals', description: 'quarter-finals',
start: '2014-07-05 13:00'
start: '2014-07-05T13:00:00'
}, },
{ {
player1: 'Netherlands', player1: 'Netherlands',
@ -200,7 +200,7 @@
abbr2: 'cr', abbr2: 'cr',
score2: '0 (3)', score2: '0 (3)',
description: 'quarter-finals', description: 'quarter-finals',
start: '2014-07-05 17:00'
start: '2014-07-05T17:00:00'
}, },
// semi-finals // semi-finals
@ -212,7 +212,7 @@
abbr2: 'de', abbr2: 'de',
score2: 7, score2: 7,
description: 'semi-finals', description: 'semi-finals',
start: '2014-07-08 17:00'
start: '2014-07-08T17:00:00'
}, },
{ {
player1: 'Netherlands', player1: 'Netherlands',
@ -222,7 +222,7 @@
abbr2: 'ar', abbr2: 'ar',
score2: '0 (4)', score2: '0 (4)',
description: 'semi-finals', description: 'semi-finals',
start: '2014-07-09 17:00'
start: '2014-07-09T17:00:00'
}, },
// final // final
@ -234,7 +234,7 @@
abbr2: 'ar', abbr2: 'ar',
score2: 0, score2: 0,
description: 'final', description: 'final',
start: '2014-07-13 16:00'
start: '2014-07-13T16:00:00'
} }
]); ]);
@ -248,4 +248,4 @@
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
</script> </script>
</body> </body>
</html>
</html>

+ 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.18.1/vis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.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.18.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.19.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.18.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.18.1/vis.min.css" target="_blank">vis.min.css</a> <br>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.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.19.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.18.1.zip">v4.18.1.zip</a>
<a href="https://github.com/almende/vis/archive/v4.19.0.zip">v4.19.0.zip</a>
</p> </p>
</div> </div>
</div> </div>

Loading…
Cancel
Save