release v4.6.0

docs/graph2d/index.html

@@ -160,8 +160,8 @@
         <li><a href="#Methods">Methods</a></li>
         <li><a href="#Events">Events</a></li>
         <li><a href="#Localization">Localization</a></li>
+        <li><a href="#Time_zone">Time zone</a></li>
         <li><a href="#Styles">Styles</a></li>
-        <li><a href="#Data_Policy">Data Policy</a></li>
     </ul>
 
 
@@ -717,6 +717,14 @@ onRender: function(item, group, graph2d) {
             <td>'top-right'</td>
             <td>Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
         </tr>
+
+        <tr>
+            <td>moment</td>
+            <td>function</td>
+            <td>vis.moment</td>
+            <td>A constructor for creating a moment.js Date. Allows for applying a custom time zone. See section <a href="#Time_zone">Time zone</a> for more information.</td>
+        </tr>
+
         <tr>
             <td class="greenField">sampling</td>
             <td>Boolean</td>
@@ -1424,6 +1432,32 @@ Graph2d.off('rangechanged', onChange);
         </tr>
     </table>
 
+    <h2 id="Time_zone">Time zone</h2>
+    <p>
+        By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
+    </p>
+
+    <p>
+        Examples:
+    </p>
+
+<pre class="prettyprint lang-js">// display in UTC
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utc();
+  }
+};
+
+// display in UTC +08:00
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utcOffset('+08:00');
+  }
+};
+</pre>
+
+
+
     <h2 id="Styles">Styles</h2>
     <p>
         All parts of the Graph2d have a class name and a default css style just like the Graph2d.

docs/network/nodes.html

@@ -176,6 +176,10 @@ var options = {
       y:5
     },
     shape: 'ellipse',
+    shapeProperties: {
+      borderDashes: false, // only for shapes with a border
+      borderRadius: 6 // only for box shape
+    }
     size: 25,
     title: undefined,
     value: undefined,
@@ -619,7 +623,23 @@ mySize = minSize + diff * scale;
             <td>Array or Boolean</td>
             <td><code>false</code></td>
             <td>This property applies to all shapes that have borders.
-                You set the dashes by supplying an Array. Array formart: [dash length, gap length]. 
+                You set the dashes by supplying an Array. Array formart: [dash length, gap length].
+                You can also use a Boolean, false is disable and true is default [5,15].
+            </td>
+        </tr>
+        <tr parent="shapeProperties" class="hidden">
+            <td class="indent">shapeProperties.borderRadius</td>
+            <td>Number</td>
+            <td><code>6</code></td>
+            <td>This property is used only for the <code>box</code> shape. It allows you to determine the roundness of the corners of the shape.
+            </td>
+        </tr>
+        <tr parent="shapeProperties" class="hidden">
+            <td class="indent">shapeProperties.useImageSize</td>
+            <td>Boolean</td>
+            <td><code>false</code></td>
+            <td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When false, the size option is used, when true, the size of the image is used. <br><i><b>Important</b>:
+                if this is set to true, the image cannot be scaled with the value option!</i>
             </td>
         </tr>
         <tr>

docs/timeline/index.html

@@ -108,8 +108,8 @@
     <li><a href="#Editing_Items">Editing Items</a></li>
     <li><a href="#Templates">Templates</a></li>
     <li><a href="#Localization">Localization</a></li>
+    <li><a href="#Time_zone">Time zone</a></li>
     <li><a href="#Styles">Styles</a></li>
-    <li><a href="#Data_Policy">Data Policy</a></li>
   </ul>
 
   <h2 id="Example">Example</h2>
@@ -641,6 +641,13 @@ function (option, path) {
       <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
     </tr>
 
+    <tr>
+      <td>moment</td>
+      <td>function</td>
+      <td>vis.moment</td>
+      <td>A constructor for creating a moment.js Date. Allows for applying a custom time zone. See section <a href="#Time_zone">Time zone</a> for more information.</td>
+    </tr>
+
     <tr class='toggle collapsible' onclick="toggleTable('optionTable','margin', this);">
       <td><span parent="margin" class="right-caret"></span> margin</td>
       <td>number or Object</td>
@@ -1543,6 +1550,32 @@ var options = {
   </table>
 
 
+  <h2 id="Time_zone">Time zone</h2>
+  <p>
+    By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
+  </p>
+
+  <p>
+    Examples:
+  </p>
+
+<pre class="prettyprint lang-js">// display in UTC
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utc();
+  }
+};
+
+// display in UTC +08:00
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utcOffset('+08:00');
+  }
+};
+</pre>
+
+
+
   <h2 id="Styles">Styles</h2>
   <p>
     All parts of the Timeline have a class name and a default css style.
@@ -1620,13 +1653,6 @@ var options = {
 &lt;/style&gt;
 </pre>
 
-
-  <h2 id="Data_Policy">Data Policy</h2>
-  <p>
-    All code and data is processed and rendered in the browser.
-    No data is sent to any server.
-  </p>
-
 </div>
 
 <!-- Bootstrap core JavaScript

examples/network/nodeStyles/shapesWithDashedBorders.html

@@ -30,7 +30,7 @@
         {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
         {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
         {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
-        {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}},
+        {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
         {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
       ];
 

index.html

@@ -28,7 +28,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.5.1/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.6.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -36,7 +36,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.5.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.6.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_css").style.color = "rgb(150,150,150)";
             }
@@ -196,13 +196,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.5.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.5.1/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.6.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.6.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">4.5.1</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">4.6.0</span>)</a>
                     </p>
                 </div>
             </div>