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

Question

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

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.

score 1 · Accepted Answer · answered Nov 24 '19 at 21:56

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.

Great..i'm able to populate the topology based on my data. What i did is..i change the structure as 'from', 'to' and 'label'. My observation node list required 'id' and links/edges list require 'to' and 'from' in order to populate correctly. Thanks for pointing me the issue...as its mostly because of my edges list does not able to create link due to unavailable of nodes. Now...i want to get more features of visjs onto my topology...for example mouse cursor popup some details...it can be done right...Thanks — chenoi, Nov 25 '19 at 03:32

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

1 Answers1