<!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: 'dashes: [20, 20]'},
							 | 
						|
								        {id: 4, label: 'dashes: [20, 5]'},
							 | 
						|
								        {id: 5, label: 'dashes: [5, 20]'},
							 | 
						|
								        {id: 6, label: 'dashes: [20, 5, 5, 5]'}
							 | 
						|
								      ];
							 | 
						|
								      var edges = [
							 | 
						|
								        {from: 1, to: 2, dashes: true},
							 | 
						|
								        {from: 1, to: 3, dashes: [20, 20]},
							 | 
						|
								        {from: 1, to: 4, dashes: [20, 5]},
							 | 
						|
								        {from: 1, to: 5, dashes: [5, 20]},
							 | 
						|
								        {from: 1, to: 6, dashes: [20, 5, 5, 5]}
							 | 
						|
								      ];
							 | 
						|
								
							 | 
						|
								      // create the network
							 | 
						|
								      var container = document.getElementById('mynetwork');
							 | 
						|
								      var data = {
							 | 
						|
								        nodes: nodes,
							 | 
						|
								        edges: edges
							 | 
						|
								      };
							 | 
						|
								      var options = {
							 | 
						|
								        nodes: {
							 | 
						|
								          shape: 'box'
							 | 
						|
								        },
							 | 
						|
								        physics: {
							 | 
						|
								          barnesHut: {
							 | 
						|
								            springLength: 150
							 | 
						|
								          },
							 | 
						|
								          stabilization: false
							 | 
						|
								        }
							 | 
						|
								      };
							 | 
						|
								      var network = new vis.Network(container, data, options);
							 | 
						|
								    }
							 | 
						|
								  </script>
							 | 
						|
								  <script src="../googleAnalytics.js"></script>
							 | 
						|
								</head>
							 | 
						|
								
							 | 
						|
								<body onload="draw();">
							 | 
						|
								<p>
							 | 
						|
								  This example shows the different options for dashed lines.
							 | 
						|
								</p>
							 | 
						|
								
							 | 
						|
								<div id="mynetwork"></div>
							 | 
						|
								</body>
							 | 
						|
								</html>
							 |