Vis.JS Performance

by Abhijeet Deshmukh

HTML

<script src="//visjs.org/dist/vis.js"></script>
<script src="//visjs.org/examples/network/datasources/WorldCup2014.js"></script>
<link rel="stylesheet" href="//visjs.org/dist/vis.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="chart-wrapper">
                <div class="chart-title"></div>
                <div class="chart-stage">
                    <div id="mynetwork"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#mynetwork{
    width: 100%;
    height: 800px;
}

JavaScript

var network;


  function redrawAll() {
    // remove positoins
    for (var i = 0; i < nodes.length; i++) {
      delete nodes[i].x;
      delete nodes[i].y;
    }

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
      nodes: nodes,
      edges: edges
    };
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        width: 0.15,
        color: {inherit: 'from'},
        smooth: {
          type: 'continuous'
        }
      },
      physics: {
        stabilization: false,
        barnesHut: {
          gravitationalConstant: -80000,
          springConstant: 0.001,
          springLength: 200
        }
      },
      interaction: {
        tooltipDelay: 200,
        hideEdgesOnDrag: true
      }
    };

    // Note: data is coming from ./datasources/WorldCup2014.js
    network = new vis.Network(container, data, options);
  }

  redrawAll()