Search code examples
javascriptpythonhtmljsonvis.js-network

Using vis.js to populate nodes and links from json file

I running basic html and json file to visualize nodes and links using vis.js. Json files contain list of nodes and links/edges. I refer to SO sample here to run it... example . I test using the examples and it does work and show all the nodes and links. I replace the json file with my own data and when i execute the code... it just show the nodes without any link.

My Json file

{
  "nodes": [
    {
      "id": "openflow:1",
      "tpid": [
        "openflow:1:2",
        "openflow:1:1",
        "openflow:1:LOCAL"
      ]
    },
    {
      "id": "host:00:00:00:00:00:01",
      "ip": "10.0.0.1",
      "mac": "00:00:00:00:00:01",
      "tpid": [
        "host:00:00:00:00:00:01"
      ]
    },
    {
      "id": "openflow:2",
      "tpid": [
        "openflow:2:LOCAL",
        "openflow:2:1",
        "openflow:2:2"
      ]
    },
    {
      "id": "host:00:00:00:00:00:02",
      "ip": "10.0.0.2",
      "mac": "00:00:00:00:00:02",
      "tpid": [
        "host:00:00:00:00:00:02"
      ]
    }
  ],
  "edges": [
    {
      "id": "host:00:00:00:00:00:01/openflow:1:1",
      "source": "host:00:00:00:00:00:01",
      "target": "openflow:1:1"
    },
    {
      "id": "openflow:2:1/host:00:00:00:00:00:02",
      "source": "openflow:2:1",
      "target": "host:00:00:00:00:00:02"
    },
    {
      "id": "openflow:1:2",
      "source": "openflow:1:2",
      "target": "openflow:2:2"
    },
    {
      "id": "openflow:2:2",
      "source": "openflow:2:2",
      "target": "openflow:1:2"
    },
    {
      "id": "openflow:1:1/host:00:00:00:00:00:01",
      "source": "openflow:1:1",
      "target": "host:00:00:00:00:00:01"
    },
    {
      "id": "host:00:00:00:00:00:02/openflow:2:1",
      "source": "host:00:00:00:00:00:02",
      "target": "openflow:2:1", "color":{"color":"green", "highlight":"blue"}, "arrows":{"target":{"scaleFactor":"1.25", "type":"circle"}}
    }
  ]
}

This is the html file

i<!doctype html>
<HTML>
<HEAD>
  <meta charset="utf-8" />
  <TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>

  <!-- NPM (http://visjs.org/index.html#download_install): -->
  <!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>

  <!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <!-- http://visjs.org/index.html#download_install -->
  <!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">

  <style type="text/css">
    #mynetwork {
        /* width: 600px; */
        width: 100%;
        height: 800px;
        border: 2px solid lightgray;
    }
    </style>
</HEAD>

<BODY>

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

<!-- Add an invisible <div> element to the document, to hold the JSON data: -->
<div id="networkJSON-results" class="results" style="display:none"></div>

<script type="text/javascript">

  // -------------------------------------------------------------------------
  // OPTIONS:

  // http://visjs.org/docs/network/#modules
  // http://visjs.org/docs/network/edges.html#
  // http://visjs.org/docs/network/physics.html#

  var options = {
    edges: {
      arrows: {
        target: {enabled: true, scaleFactor:0.75, type:'arrow'},
        // to: {enabled: false, scaleFactor:0.5, type:'bar'},
        middle: {enabled: false, scalefactor:1, type:'arrow'},
        source: {enabled: true, scaleFactor:0.3, type:'arrow'}
        // from: {enabled: false, scaleFactor:0.5, type:'arrow'}
      },
      arrowStrikethrough: true,
      chosen: true,
      color: {
      // color:'#848484',
      color:'red',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
      },
      dashes: false,
      font: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        background: 'none',
        strokeWidth: 2, // px
        strokeColor: '#ffffff',
        align: 'horizontal',
        multi: false,
        vadjust: 0,
        bold: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'bold'
        },
        ital: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'italic'
        },
        boldital: {
          color: '#343434',
          size: 14, // px
          face: 'arial',
          vadjust: 0,
          mod: 'bold italic'
        },
        mono: {
          color: '#343434',
          size: 15, // px
          face: 'courier new',
          vadjust: 2,
          mod: ''
        }
      }
    },
    // http://visjs.org/docs/network/physics.html#
    physics: {
      enabled: true,
      barnesHut: {
        gravitationalConstant: -2000,
        centralGravity: 0.3,
        // springLength: 95,
        springLength: 175,
        springConstant: 0.04,
        damping: 0.09,
        avoidOverlap: 0
      },
      forceAtlas2Based: {
        gravitationalConstant: -50,
        centralGravity: 0.01,
        springConstant: 0.08,
        springLength: 100,
        damping: 0.4,
        avoidOverlap: 0
      },
      repulsion: {
        centralGravity: 0.2,
        springLength: 200,
        springConstant: 0.05,
        nodeDistance: 100,
        damping: 0.09
      },
      hierarchicalRepulsion: {
        centralGravity: 0.0,
        springLength: 100,
        springConstant: 0.01,
        nodeDistance: 120,
        damping: 0.09
      },
      maxVelocity: 50,
      minVelocity: 0.1,
      solver: 'barnesHut',
      stabilization: {
        enabled: true,
        iterations: 1000,
        updateInterval: 100,
        onlyDynamicEdges: false,
        fit: true
      },
      timestep: 0.5,
      adaptiveTimestep: true
    },
  };

// -------------------------------------------------------------------------
// IMPORT DATA FROM EXTERNAL JSON FILE:

// Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:

// NOTES:
// 1. Must use double quotes ("; not ') in that JSON file;
// 2. Cannot have comments in that file, only data!  See:
//    https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
// 3. Per the path below, place the "test.json" file in a "data" subdirectory.

var json = $.getJSON("data/11-test2.json")
  .done(function(data){
    var data = {
      nodes: data.nodes,
      edges: data.edges
    };
    var network = new vis.Network(container, data, options);
  });

var container = document.getElementById('mynetwork');

</script>

</BODY>
</HTML>

The output only nodes without links/edges enter image description here

I have check it few times but couldn't find the bottleneck... appreciate someone to advise..what could be wrong here... Thanks

22/11/19- Appreciate someone who knows about this problem... I have edit my json file and change source/target --> to/from and still the same...link not visible...

*23/11/19- Still not clue to resolve the problem. Thanks for your advises.

Solution

  • as you say edges are not structured as { id, source, target } but as { id, from, to }. The same applies to options.edges.arrows.

    This also seems problematic (two variables named data in the same scope, more like bad practice though):

      .done(function(data){
    var data = {
      nodes: data.nodes,
      edges: data.edges
    };

    The actual answer to your question is that you connect edges to nodes you don't have. For example the first edge goes from host:00:00:00:00:00:01 to openflow:1:1. But there is no node openflow:1:1 (there is openflow:1, maybe you meant that). Since it points nowhere it's invalid and therefore ignored.

    PS: The 4.21.0 version line is pretty old and not updated anymore. See https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html for up to date Vis Network.