Released version 3.7.0

docs/graph2d.html

@@ -349,7 +349,7 @@ The options colored in green can also be used as options for the groups. All opt
   <td class="greenField">style</td>
   <td>String</td>
   <td>'line'</td>
-  <td>This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'.</td>
+  <td>This allows the user to define if this should be a linegraph, barchart or pointcloud. The options are: 'line', 'bar', 'points'.</td>
 </tr>
 <tr>
   <td class="greenField">barChart.width</td>
@@ -943,6 +943,14 @@ Graph2d.off('rangechanged', onChange);
     <th>Description</th>
     <th>Properties</th>
   </tr>
+    <tr>
+        <td>finishedRedraw</td>
+        <td>Fired after a redraw is complete. When moving the Graph2d around, this could be fired frequently.
+        </td>
+        <td>
+            none.
+        </td>
+    </tr>
 
   <tr>
     <td>rangechange</td>

docs/network.html

@@ -2382,6 +2382,8 @@ network.off('select', onSelect);
       <ul>
         <li><code>nodes</code>: an array with the ids of the selected nodes</li>
         <li><code>edges</code>: an array with the ids of the selected edges</li>
+        <li><code>pointer.DOM</code>:object containing XY coordinates in the DOM</li>
+        <li><code>pointer.canvas</code>:object containing XY coordinates in the canvas</li>
       </ul>
     </td>
   </tr>
@@ -2392,6 +2394,8 @@ network.off('select', onSelect);
       <ul>
         <li><code>nodes</code>: an array with the ids of the selected nodes</li>
         <li><code>edges</code>: an array with the ids of the selected edges</li>
+        <li><code>pointer.DOM</code>:object containing XY coordinates in the DOM</li>
+        <li><code>pointer.canvas</code>:object containing XY coordinates in the canvas</li>
       </ul>
     </td>
   </tr>

docs/timeline.html

@@ -1000,8 +1000,16 @@ timeline.off('select', onSelect);
     <th>Description</th>
     <th>Properties</th>
   </tr>
+    <tr>
+        <td>finishedRedraw</td>
+        <td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
+        </td>
+        <td>
+            none.
+        </td>
+    </tr>
 
-  <tr>
+    <tr>
     <td>rangechange</td>
     <td>Fired repeatedly when the user is dragging the timeline window.
     </td>

examples/graph2d/03_groups.html

@@ -32,7 +32,7 @@
 
 <script type="text/javascript">
     // create a dataSet with groups
-    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
     var groups = new vis.DataSet();
         groups.add({
         id: 0,

examples/graph2d/05_bothAxis.html

@@ -52,7 +52,7 @@
 
 <script type="text/javascript">
     // create a dataSet with groups
-    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
     var groups = new vis.DataSet();
     groups.add({
         id: 0,

examples/graph2d/09_external_legend.html

@@ -209,7 +209,7 @@
 
 <script type="text/javascript">
     // create a dataSet with groups
-    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
     var groups = new vis.DataSet();
     groups.add({
         id: 0,

examples/graph2d/14_toggleGroups.html

@@ -52,7 +52,7 @@
 
 <script type="text/javascript">
     // create a dataSet with groups
-    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
     var groups = new vis.DataSet();
         groups.add({
         id: 0,

examples/graph2d/16_bothAxis_titles.html

@@ -83,7 +83,7 @@
 
 <script type="text/javascript">
     // create a dataSet with groups
-    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
     var groups = new vis.DataSet();
     groups.add({
         id: 0,

examples/graph2d/18_scatterplot.html

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Scatterplot</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Scatterplot</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
+    <code>style: 'points'</code> option for making a scatterplot!
+</div>
+<pre class="prettyprint lang-js">
+var options = {
+    sort: false,
+    sampling:false,
+    style:'points'
+};
+</pre>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [];
+  for (var i = 0; i < 100; i++) {
+      items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
+  }
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      sort: false,
+      sampling:false,
+      style:'points',
+      dataAxis: {
+          customRange: {
+              left: {
+                  min: 300, max: 800
+              }
+          }
+      },
+      drawPoints: {
+          enabled: true,
+          size: 6,
+          style: 'circle' // square, circle
+      },
+      defaultGroup: 'Scatterplot',
+      height: '600px'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+</script>
+</body>
+</html>

examples/graph2d/index.html

@@ -22,6 +22,8 @@
   <p><a href="13_localization.html">13_localization.html</a></p>
   <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
   <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
+  <p><a href="16_bothAxis_titles.html">16_bothAxis_titles.html</a></p>
+  <p><a href="17_dynamicStyling.html">17_dynamicStyling.html</a></p>
 
 </div>
 </body>

examples/timeline/03_performance.html

@@ -56,9 +56,6 @@
     end: now.clone().add(11, 'days'),
     zoomMin: 1000 * 60 * 60 * 24,          // a day
     zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
-    //maxHeight: 300,
-    //height: '300px',
-    //orientation: 'top'
   };
 
   var timeline = new vis.Timeline(container, items, options);

index.html

@@ -76,7 +76,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">3.6.4</span>)
+(version <span class="version">3.7.0</span>)
 
 
 <h2 id="example">Example</h2>