From 551da771132ec4806f246580f05ba3551a5835e9 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Tue, 23 Sep 2014 12:04:28 +0200
Subject: [PATCH] updated docs and examples with new constructors.

---
 docs/graph2d.html                             |  3 ++-
 docs/timeline.html                            | 14 +++++++++-----
 examples/graph2d/03_groups.html               |  2 +-
 examples/graph2d/04_rightAxis.html            |  2 +-
 examples/graph2d/05_bothAxis.html             |  2 +-
 examples/graph2d/06_interpolation.html        |  2 +-
 examples/graph2d/09_external_legend.html      |  2 +-
 examples/graph2d/11_barsSideBySideGroups.html |  2 +-
 examples/graph2d/12_customRange.html          |  2 +-
 examples/graph2d/14_toggleGroups.html         | 12 ++++++------
 10 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/docs/graph2d.html b/docs/graph2d.html
index 67414a99..5f8b8f0a 100644
--- a/docs/graph2d.html
+++ b/docs/graph2d.html
@@ -113,7 +113,8 @@
   Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
   are described in section <a href="#Group_Options">Data Format</a>.
 </p>
-<pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, options] [,groups]);</pre>
+<pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, groups] [, options]);</pre>
+For backwards compatibility, groups and options can be interchanged.
 
 <p>
   Data, options and groups can be set or changed later on using the functions
diff --git a/docs/timeline.html b/docs/timeline.html
index fb02ad90..33587026 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -111,17 +111,21 @@
 
 The constructor of the Timeline is <code>vis.Timeline</code>
 <pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>
+or when using groups:
+<pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, groups, options);</pre>
 
-
-The constructor accepts three parameters:
+The constructor accepts four parameters:
 <ul>
   <li>
     <code>container</code> is the DOM element in which to create the timeline.
   </li>
   <li>
     <code>items</code> is an Array containing items. The properties of an
-    item are described in section <a href="#Data_Format">Data Format</a>.
-  </li>
+    item are described in section <a href="#Data_Format">Data Format, items</a>.
+  </li><li>
+        <code>groups</code> is an Array containing groups. The properties of a
+        group are described in section <a href="#groups">Data Format, groups</a>.
+    </li>
   <li>
     <code>options</code> is an optional Object containing a name-value map
     with options. Options can also be set using the method
@@ -259,7 +263,7 @@ var items = [
   <code>content</code>, and <code>className</code> (optional).
 </p>
 <p>
-  Groups can be applied to a timeline using the method <code>setGroups</code>.
+  Groups can be applied to a timeline using the method <code>setGroups</code> or supplied in the constructor.
   A table with groups can be created like:
 </p>
 
diff --git a/examples/graph2d/03_groups.html b/examples/graph2d/03_groups.html
index fb8bedb4..8ec2ac56 100644
--- a/examples/graph2d/03_groups.html
+++ b/examples/graph2d/03_groups.html
@@ -105,7 +105,7 @@
       start: '2014-06-10',
       end: '2014-07-04'
   };
-  var graph2d = new vis.Graph2d(container, dataset, options, groups);
+  var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>
diff --git a/examples/graph2d/04_rightAxis.html b/examples/graph2d/04_rightAxis.html
index a111edda..597c33c0 100644
--- a/examples/graph2d/04_rightAxis.html
+++ b/examples/graph2d/04_rightAxis.html
@@ -119,7 +119,7 @@
         end: '2014-07-04',
         movable: false
     };
-    var graph2d = new vis.Graph2d(container, dataset, options, groups);
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>
diff --git a/examples/graph2d/05_bothAxis.html b/examples/graph2d/05_bothAxis.html
index 59442a10..2a344c85 100644
--- a/examples/graph2d/05_bothAxis.html
+++ b/examples/graph2d/05_bothAxis.html
@@ -131,7 +131,7 @@
         start: '2014-06-09',
         end: '2014-07-03'
     };
-    var graph2d = new vis.Graph2d(container, items, options, groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 </script>
 </body>
diff --git a/examples/graph2d/06_interpolation.html b/examples/graph2d/06_interpolation.html
index 0088b780..55fd0bbe 100644
--- a/examples/graph2d/06_interpolation.html
+++ b/examples/graph2d/06_interpolation.html
@@ -94,7 +94,7 @@
         start: '2014-06-11',
         end: '2014-06-22'
     };
-    var graph2d = new vis.Graph2d(container, dataset, options, groups);
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>
diff --git a/examples/graph2d/09_external_legend.html b/examples/graph2d/09_external_legend.html
index 0c3b6921..9dfa0b2c 100644
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@@ -287,7 +287,7 @@
         start: '2014-06-09',
         end: '2014-07-03'
     };
-    var graph2d = new vis.Graph2d(container, items, options, groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 
     /**
diff --git a/examples/graph2d/11_barsSideBySideGroups.html b/examples/graph2d/11_barsSideBySideGroups.html
index 22798d97..b54ee119 100644
--- a/examples/graph2d/11_barsSideBySideGroups.html
+++ b/examples/graph2d/11_barsSideBySideGroups.html
@@ -71,7 +71,7 @@
         start: '2014-06-10',
         end: '2014-06-18'
     };
-    var graph2d = new vis.Graph2d(container, items, options,groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
     var dropdown = document.getElementById("dropdownID");
     dropdown.onchange = update;
diff --git a/examples/graph2d/12_customRange.html b/examples/graph2d/12_customRange.html
index 5dd51eea..d4d4e4ec 100644
--- a/examples/graph2d/12_customRange.html
+++ b/examples/graph2d/12_customRange.html
@@ -87,7 +87,7 @@ var options = {
         start: '2014-06-10',
         end: '2014-06-18'
     };
-    var graph2d = new vis.Graph2d(container, items, options,groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 </script>
 </body>
diff --git a/examples/graph2d/14_toggleGroups.html b/examples/graph2d/14_toggleGroups.html
index 9b3ee0ba..0e8802ec 100644
--- a/examples/graph2d/14_toggleGroups.html
+++ b/examples/graph2d/14_toggleGroups.html
@@ -128,12 +128,12 @@
       showMajorLabels:false,
       showMinorLabels:false
   };
-  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, options, groups);
-  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, options, groups);
-  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, options, groups);
-  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, options, groups);
-  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, options, groups);
-  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, options, groups);
+  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
+  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
+  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
+  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
+  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
+  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
 
   graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
   graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})