pebbie/vis_timeline_with_arror_first_test.html

## vis_timeline_with_arror_first_test.html
<!DOCTYPE html>
<html>

<head>
  <title>Timeline | Group example, with an arrow</title>

  <style>
    body,
    html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/leader-line-new@1.1.9/leader-line.min.js"></script>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>
    This is the same example which is in
    "vis/examples/timeline/groups/groups.html" but with multiple added arrows defined in the dependencies.
    The original discussion thread is https://github.com/almende/vis/issues/1699.
  </p>
  <div id="visualization"></div>

  <script>
    const drawArrows = function (i, j, index) {
      var line = new LeaderLine(timeline.itemSet.items[i].dom.box, timeline.itemSet.items[j].dom.box)
    };

    const dependency = [[1, 2], [3, 5], [6, 7], [3, 8]];

    const drawDependencies = dependency => {
      dependency.map((dep, index) => drawArrows(...dep, index));
    };

    const options = {
      groupOrder: "content", // groupOrder can be a property name or a sorting function
      onInitialDrawComplete: function () {
        drawDependencies(dependency);
        timeline.on("changed", () => {
          drawDependencies(dependency);
        }); //NOTE: We hijack the on "changed" event to draw the arrow.
      }
    };

    // Generate some
    var now = moment()
      .minutes(0)
      .seconds(0)
      .milliseconds(0);
    var names = ["John", "Alston", "Lee", "Grant"];
    var itemCount = 20;
    // create a data set with groups
    var groups = new vis.DataSet();
    for (var g = 0; g < names.length; g++) {
      groups.add({ id: g, content: names[g] });
    }
    // create a dataset with items
    var items = new vis.DataSet();
    for (var i = 0; i < itemCount; i++) {
      var start = now.clone().add(Math.random() * 200, "hours");
      var group = Math.floor(Math.random() * names.length);
      items.add({
        id: i,
        group: group,
        content:
          "item " +
          i +
          ' <span style="color:#97B0F8;">(' +
          names[group] +
          ")</span>",
        start: start,
        type: "box"
      });
    }
    // Create visualization.
    const container = document.getElementById("visualization");
    const timeline = new vis.Timeline(container, items, groups, options);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Timeline \| Group example, with an arrow</title>

	<style>
	body,
	html {
	font-family: arial, sans-serif;
	font-size: 11pt;
	}

	#visualization {
	box-sizing: border-box;
	width: 100%;
	height: 300px;
	}
	</style>

	<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/leader-line-new@1.1.9/leader-line.min.js"></script>

	<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<p>
	This is the same example which is in
	"vis/examples/timeline/groups/groups.html" but with multiple added arrows defined in the dependencies.
	The original discussion thread is https://github.com/almende/vis/issues/1699.
	</p>
	<div id="visualization"></div>

	<script>
	const drawArrows = function (i, j, index) {
	var line = new LeaderLine(timeline.itemSet.items[i].dom.box, timeline.itemSet.items[j].dom.box)
	};

	const dependency = [[1, 2], [3, 5], [6, 7], [3, 8]];

	const drawDependencies = dependency => {
	dependency.map((dep, index) => drawArrows(...dep, index));
	};

	const options = {
	groupOrder: "content", // groupOrder can be a property name or a sorting function
	onInitialDrawComplete: function () {
	drawDependencies(dependency);
	timeline.on("changed", () => {
	drawDependencies(dependency);
	}); //NOTE: We hijack the on "changed" event to draw the arrow.
	}
	};

	// Generate some
	var now = moment()
	.minutes(0)
	.seconds(0)
	.milliseconds(0);
	var names = ["John", "Alston", "Lee", "Grant"];
	var itemCount = 20;
	// create a data set with groups
	var groups = new vis.DataSet();
	for (var g = 0; g < names.length; g++) {
	groups.add({ id: g, content: names[g] });
	}
	// create a dataset with items
	var items = new vis.DataSet();
	for (var i = 0; i < itemCount; i++) {
	var start = now.clone().add(Math.random() * 200, "hours");
	var group = Math.floor(Math.random() * names.length);
	items.add({
	id: i,
	group: group,
	content:
	"item " +
	i +
	' <span style="color:#97B0F8;">(' +
	names[group] +
	")</span>",
	start: start,
	type: "box"
	});
	}
	// Create visualization.
	const container = document.getElementById("visualization");
	const timeline = new vis.Timeline(container, items, groups, options);
	</script>
	</body>

	</html>