<!doctype html>
<html>
<head>
  <title>Network | Dashed lines</title>

  <style type="text/css">
    body {
      font: 10pt sans;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">
    // Called on page load
    function draw() {
      var nodes = [
        {id: 1, label: 'dashed\nline\nexamples'},
        {id: 2, label: 'default'},
        {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
        {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
        {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
        {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
      ];
      var edges = [
        {from: 1, to: 2, style: 'dash-line'},
        {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
        {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
        {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
        {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
      ];

      // create the network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          shape: 'box'
        },
        physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
        stabilize: false
      };
      var network = new vis.Network(container, data, options);
    }
  </script>
</head>

<body onload="draw();">
<p>
  This example shows the different options for dashed lines.
</p>

<div id="mynetwork"></div>
</body>
</html>