chore(examples.nestedgroups): add example to demonstrate fix of visjs…

…#203
strazto · Oct 24, 2020 · 32a8a89 · 32a8a89
1 parent bb0b0b2
commit 32a8a89
Showing 1 changed file with 79 additions and 0 deletions.
diff --git a/examples/timeline/nested_groups_bare_array.html b/examples/timeline/nested_groups_bare_array.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>JS Bin</title>  
+    <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+    <script src="../../standalone/umd/vis-timeline-graph2d.js"></script>
+    <link href="../../styles/timeline.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <p>
+    This example demonstrate using groups. Note that a DataSet is used for both
+    items and groups, allowing to dynamically add, update or remove both items
+    and groups via the DataSet.
+    </p>
+    <div id="visualization"></div>
+
+    <script>
+      var now = moment().minutes(0).seconds(0).milliseconds(0);
+        var itemCount = 6;
+
+        var groups = [
+          {
+            id: 1,
+            content: "Top Group",
+            nestedGroups: [2]
+          },
+          {
+            id: 2,
+            content: "Nested Group"
+          }
+        ]
+
+        /*   var groups = new vis.DataSet()
+          groups.add([
+            {
+              id: 1,
+              content: "Top Group",
+              nestedGroups: [2]
+            },
+            {
+              id: 2,
+              content: "Nested Group"
+            }
+            ]) */
+
+        // create a dataset with items
+        var items = new vis.DataSet();
+        var groupIds = [1,2];
+        var types = [ 'box', 'point', 'range', 'background']
+        for (var i = 0; i < itemCount; i++) {
+          var start = now.clone().add(Math.random() * 200, 'hours');
+          var end = start.clone().add(2, 'hours');
+          var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
+          var type = types[Math.floor(4 * Math.random())]
+
+          items.add({
+            id: i,
+            group: randomGroupId,
+            content: 'item ' + i,
+            start: start,
+            end: end,
+            type: type
+          });
+        }
+
+        // create visualization
+        var container = document.getElementById('visualization');
+        var options = {
+          groupOrder: 'content'  // groupOrder can be a property name or a sorting function
+        };
+
+        var timeline = new vis.Timeline(container, items, groups, options);
+
+    </script>
+  </body>
+</html>