Updated examples 1 to 13

9 years ago · ad088cde4d
--- a/examples/googleAnalytics.js
+++ b/examples/googleAnalytics.js
@ -0,0 +1,12 @@
 (function (i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
  a = s.createElement(o), m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 ga('create', 'UA-61231638-1', 'auto');
 ga('send', 'pageview');
--- a/examples/network/01_basic_usage.html
+++ b/examples/network/01_basic_usage.html
@ -13,26 +13,29 @@
      border: 1px solid lightgray;
    }
  </style>
 </head>
 <body>

 <p>
  Create a simple network with some nodes and edges.
 </p>

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

 <script type="text/javascript">
  // create an array with nodes
  var nodesDS = new vis.DataSet();

  var nodes = [
    {id: 1, label: 'Node 1', value:3, title:'hello world', color:'red'},
    {id: 2, label: 'Node 2', value:1, group:'bla'},
    {id: 3, label: 'Node 3', value:5},
    {id: 4, value:3},
    {id: 5, label: 'Node 5', value:2}
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ];

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 1},
    {from: 1, to: 3,id:'e1', dashes:{pattern:[10,15,2,5]}},
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
@ -40,24 +43,14 @@

  // create a network
  var container = document.getElementById('mynetwork');
  nodesDS.add(nodes);
  var data = {
    nodes: nodesDS,
    nodes: nodes,
    edges: edges
  };
  var options = {
    edges:{color:'red'}
  }
  var options = {};
  var network = new vis.Network(container, data, options);
 //    network.setOptions({nodes:{color:'red'}})
  nodesDS.update({id:1, color:undefined,label:'hi'});
 </script>
 <pre>
 var options = {
  manipulation: 'hello',
  physics:{barnesHut:{gravitationslPull:34}, solver:'banana'},
  groups:{'bla':{color:{backsground:'red'}, borderWidth:5}}
 }
  </pre>

 <script src="../googleAnalytics.js"></script>
 </body>
 </html>
--- a/examples/network/02_random_nodes.html
+++ b/examples/network/02_random_nodes.html
@ -84,37 +84,27 @@
        nodes: nodes,
        edges: edges
      };
      var options = {physics:{stabilization:false}};
      var options = {
        physics: { stabilization: false }
      };
      network = new vis.Network(container, data, options);

      // add event listeners
 //      network.on('select', function(params) {
 //        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
 //      });
 //      network.on('stabilized', function (params) {
 //        document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
 //      });
 //      network.on('startStabilization', function (params) {
 //        document.getElementById('stabilization').innerHTML = 'Stabilizing...';
 //      });

 //      setTimeout(destroy,500);
    }


  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>

 <body onload="draw();">
 <label for="nodeCount">Number of nodes:</label>
 <input id="nodeCount" type="text" value="25" style="width: 50px;">
 <input type="submit" value="Go" onclick="draw()">

 <br>
 <p>
  Generate a random network with nodes and edges.
 </p>
 <p>
  <label for="nodeCount">Number of nodes:</label>
  <input id="nodeCount" type="text" value="25" style="width: 50px;">
  <input type="submit" value="Go" onclick="draw()">
 </p>

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

 <p id="selection"></p>
 <p id="stabilization"></p>
 </body>
 </html>
--- a/examples/network/03_images.html
+++ b/examples/network/03_images.html
@ -4,9 +4,6 @@
  <title>Network | Images</title>

  <style type="text/css">
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
@ -68,16 +65,17 @@
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false   // stabilize positions before displaying
      };
      var options = {};
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>

 <body onload="draw()">

 <p>
  Display nodes as images.
 </p>
 <div id="mynetwork"></div>

 </body>
--- a/examples/network/04_shapes.html
+++ b/examples/network/04_shapes.html
@ -4,11 +4,8 @@
  <title>Network | Shapes</title>

  <style type="text/css">
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 100%;
      width: 800px;
      height: 600px;
      border: 1px solid lightgray;
    }
@ -61,15 +58,17 @@
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false
      };
      var options = {};
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>

 <body onload="draw()">

 <p>
  Nodes can have all sorts of shapes, colors and sizes. Edges can be drawn solid or dashed, and can have one or multiple arrows.
 </p>
 <div id="mynetwork"></div>

 <div id="info"></div>
--- a/examples/network/05_social_network.html
+++ b/examples/network/05_social_network.html
@ -62,13 +62,19 @@
        nodes: nodes,
        edges: edges
      };
      var options = {};
      var options = {
        physics: {stabilization: false}
      };
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

  <script src="../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">

 <p>
  Create a social network showing the amount of interaction between people.
 </p>
 <div id="mynetwork"></div>
 <p>
  Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@ -5,14 +5,14 @@

  <style>
    body {
        color:#ffffff;
        font: 10pt arial;
        color: #d3d3d3;
        font: 12pt arial;
        background-color:#222222;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
      border: 1px solid #444444;
      background-color:#222222;
    }
  </style>
@ -137,23 +137,31 @@
      var options = {
        nodes: {
            shape: 'dot',
            radius:30,
            font:{color:'#ffffff'},
            borderWidth:2
            size: 30,
            font: {
              size: 32,
              color: '#ffffff'
            },
            borderWidth: 2
        },
        edges : {
          width: 2
        }
      };
      network = new vis.Network(container, data, options);
    }

  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">
 <p>
  Apply styling to groups of nodes.
 </p>
 <form onsubmit= "javascript: draw(); return false;">
  Number of groups:
  <input type="text" value="10" id="groupCount" style="width: 50px;">
  Number of nodes per group:
  <input type="text" value="3" id="nodeCount" style="width: 50px;">
  Number of groups: <input type="text" value="10" id="groupCount" style="width: 50px;">
  Number of nodes per group: <input type="text" value="3" id="nodeCount" style="width: 50px;">
  <input type="submit" value="Go">
 </form>
 <br>
--- a/examples/network/07_selections.html
+++ b/examples/network/07_selections.html
@ -13,12 +13,15 @@
      border: 1px solid lightgray;
    }
  </style>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

  <script src="../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
 </p>
 <div id="mynetwork"></div>
 <div id="info"></div>
 <pre id="info"></pre>

 <script type="text/javascript">
  // create an array with nodes
@ -53,7 +56,9 @@

  // add event listener
  network.on('select', function(properties) {
    document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
    console.log('select', properties);
    delete properties.event;
    document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
  });

  // set initial selection (id's of some nodes)
--- a/examples/network/08_mobile_friendly.html
+++ b/examples/network/08_mobile_friendly.html
@ -1,109 +0,0 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Network | Mobile friendly</title>

  <style type="text/css">
    html, body {
      font: 10pt arial;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
    }
  </style>

  <!-- for mobile devices like android and iphone -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    // Called when the Visualization API is loaded.
    function draw() {
      nodes = [];
      edges = [];
      var EDGE_LENGTH = 50;
      var connectionCount = [];

      // randomly create some nodes
      var nodeCount = 20;
      var cols = parseInt(Math.sqrt(nodeCount));
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: '' + i
        });

        connectionCount[i] = 0;

        // create links in a scale-free-network way
        if (i == 1) {
          var from = i;
          var to = 0;
          edges.push({
            from: from,
            to: to,
            length: EDGE_LENGTH
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
        else if (i > 1) {
          var conn = edges.length * 2;
          var rand = Math.floor(Math.random() * conn);
          var cum = 0;
          var j = 0;
          while (j < connectionCount.length && cum < rand) {
            cum += connectionCount[j];
            j++;
          }

          var from = i;
          var to = j;
          edges.push({
            from: from,
            to: to,
            length: EDGE_LENGTH
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
      }

      // Create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false,
        nodes: {
          shape: 'dot',
          radius: 24,
          fontSize: 24
        },
        edges: {
          width: 2
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

 <body onload="draw()" onresize="network.redraw();">
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/12_scalable_images.html
+++ b/examples/network/12_scalable_images.html
@ -1,10 +1,10 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Scalable images</title>
  <title>Network | Sizing</title>

  <style type="text/css">
    body {
    html, body {
      font: 10pt arial;
    }
    #mynetwork {
@ -18,13 +18,10 @@
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">
    var DIR = 'img/soft-scraps-icons/';

    var nodes = null;
    var edges = null;
    var network = null;

    // Called when the Visualization API is loaded.
    function draw() {
      // create people.
      // value corresponds with the age of the person
@ -42,7 +39,7 @@
        {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
      ];

      // create connetions between people
      // create connections between people
      // value corresponds with the amount of contact between two people
      edges = [
        {from: 2, to: 8, value: 3, title: '3 emails per week'},
@ -58,7 +55,7 @@
        {from: 2, to: 7, value: 4, title: '4 emails per week'}
      ];

      // create a network
      // Instantiate our network object.
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
@ -66,21 +63,25 @@
      };
      var options = {
        nodes: {
          widthMin: 20,  // min width in pixels
          widthMax: 100  // max width in pixels
          shape: 'dot',
          scaling: {
            min: 16, // px
            max: 64  // px
          }
        },
        edges: {
          color: 'lightgray'
          //color: 'gray'
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

  <script src="../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">
 <p>
  Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
 </p>
 <div id="mynetwork"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/network/09_sizing.html
+++ b/examples/network/09_sizing.html
@ -1,76 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
  <title>Network | Sizing</title>

  <style type="text/css">
    html, body {
      font: 10pt arial;
    }
    #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">
    var nodes = null;
    var edges = null;
    var network = null;

    function draw() {
      // create people.
      // value corresponds with the age of the person
      nodes = [
        {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
        {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
        {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
        {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
        {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
        {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
        {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
        {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
        {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
        {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
      ];

      // create connections.
      // value corresponds with the amount of contact between two people
      edges = [
        {from: 2, to: 8, value: 3, title: '3 emails per week'},
        {from: 2, to: 9, value: 5, title: '5 emails per week'},
        {from: 2, to: 10,value: 1, title: '1 emails per week'},
        {from: 4, to: 6, value: 8, title: '8 emails per week'},
        {from: 5, to: 7, value: 2, title: '2 emails per week'},
        {from: 4, to: 5, value: 1, title: '1 emails per week'},
        {from: 9, to: 10,value: 2, title: '2 emails per week'},
        {from: 2, to: 3, value: 6, title: '6 emails per week'},
        {from: 3, to: 9, value: 4, title: '4 emails per week'},
        {from: 5, to: 3, value: 1, title: '1 emails per week'},
        {from: 2, to: 7, value: 4, title: '4 emails per week'}
      ];

      // Instantiate our network object.
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          shape: 'dot'
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>

 <body onload="draw()">
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/10_multiline_text.html
+++ b/examples/network/10_multiline_text.html
@ -1,4 +1,4 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <!doctype html>
 <html>
 <head>
  <title>Network | Multiline text</title>
@ -43,7 +43,8 @@
      var network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">
 <div id="mynetwork"></div>
--- a/examples/network/11_custom_style.html
+++ b/examples/network/11_custom_style.html
@ -1,12 +1,9 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <!doctype html>
 <html>
 <head>
  <title>Network | Custom style</title>

  <style type="text/css">
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
@ -60,15 +57,22 @@

      // specify options
      options = {
        stabilize: false,
        physics: {
          stabilization: false,
          barnesHut: {
            springLength:200
          }
        },
        edges: {
          width: 2,
          style: 'arrow',
          arrows: 'to',
          color: 'gray'
        },
        nodes: {
          // default for all nodes
          fontFace: 'times',
          font: {
            face: 'times'
          },
          shape: 'circle',
          color: {
            border: 'orange',
@ -79,16 +83,17 @@
            }
          }
        },
        physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
        groups: {
          black: {
            // defaults for nodes in this group
            radius: 15,
            size: 15,
            color: 'black',
            fontColor: 'white',
            fontSize: 18,
            fontFace: 'courier',
            shape: 'rect'
            font: {
              color: 'white',
              size: 18,
              face: 'courier'
            },
            shape: 'box'
          },
          gray: {
            color: {
@ -99,8 +104,10 @@
                background: 'lightgray'
              }
            },
            fontSize: 18,
            fontFace: 'arial',
            font: {
              size: 18,
              face: 'arial'
            },
            shape: 'circle'
          },
          white: {
@ -108,7 +115,9 @@
              border: 'black',
              background: 'white'
            },
            fontColor: 'red',
            font: {
              color: 'red'
            },
            shape: 'image',
            image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
          }
@ -124,8 +133,12 @@
      network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>
 </head>

 <p>
  Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
 </p>
 <body onload="draw()">
 <div id="mynetwork"></div>
 </body>
--- a/examples/network/13_dashed_lines.html
+++ b/examples/network/13_dashed_lines.html
@ -23,17 +23,17 @@
      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'}
        {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, 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}}
        {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
@ -46,13 +46,18 @@
        nodes: {
          shape: 'box'
        },
        physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
        stabilize: false
        physics: {
          barnesHut: {
            springLength: 150
          },
          stabilization: false
        }
      };
      var network = new vis.Network(container, data, options);
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">
 <p>
--- a/examples/network/index.html
+++ b/examples/network/index.html
@ -19,11 +19,9 @@
  <p><a href="05_social_network.html">05_social_network.html</a></p>
  <p><a href="06_groups.html">06_groups.html</a></p>
  <p><a href="07_selections.html">07_selections.html</a></p>
  <p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
  <p><a href="09_sizing.html">09_sizing.html</a></p>
  <p><a href="09_scaling.html">09_scaling.html</a></p>
  <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
  <p><a href="11_custom_style.html">11_custom_style.html</a></p>
  <p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
  <p><a href="11_styling.html">11_styling.html</a></p>
  <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
  <p><a href="14_dot_language.html">14_dot_language.html</a></p>
  <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
--- a/lib/network/modules/components/nodes/shapes/Box.js
+++ b/lib/network/modules/components/nodes/shapes/Box.js
@ -9,8 +9,8 @@ class Box extends NodeBase {

  resize(ctx, selected) {
    if (this.width === undefined) {
      var margin = 5;
      var textSize = this.labelModule.getTextSize(ctx,selected);
      let margin = 5;
      let textSize = this.labelModule.getTextSize(ctx,selected);
      this.width = textSize.width + 2 * margin;
      this.height = textSize.height + 2 * margin;
    }
@ -21,8 +21,8 @@ class Box extends NodeBase {
    this.left = x - this.width / 2;
    this.top = y - this.height / 2;

    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
    let borderWidth = this.options.borderWidth;
    let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;

    ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
    ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
@ -31,7 +31,8 @@ class Box extends NodeBase {

    ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;

    ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
    let borderRadius = 6;
    ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);

    // draw shadow if enabled
    this.enableShadow(ctx);
@ -52,10 +53,10 @@ class Box extends NodeBase {

  distanceToBorder(ctx, angle) {
    this.resize(ctx);
    var a = this.width / 2;
    var b = this.height / 2;
    var w = (Math.sin(angle) * a);
    var h = (Math.cos(angle) * b);
    let a = this.width / 2;
    let b = this.height / 2;
    let w = (Math.sin(angle) * a);
    let h = (Math.cos(angle) * b);
    return a * b / Math.sqrt(w * w + h * h);
  }
 }