| <!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>
 |