A JavaScript Library for Drawing Network Graphs | Gnet.js

Gnet is a JavaScript library for network graph visualization, developed by Goutham. Gnet.js is a data visualization JavaScript library that maps animated, customizable network diagrams onto a panel element to visually display the grids for connected nodes and links.

javascript interactive network graph, javascript diagram library, diagram js, gojs network diagram, html network diagram, javascript network monitor

How to make use of it:

1. Import the gnet.min.js into the doc.

<script src="dist/gnet.min.js"></script>

2. Create a container to hold the community diagram.

<div id="myDiagram"></div>

3. Create a brand new occasion of the community diagram.

const graph = new Gnet('#container',{
      // canvas size in pixels
      width : '500',
      height : '500',
});

4. Add information to the network diagram.

const data = {
      nodes : [
        {id: "A", group: 1},
        {id: "B", group: 2},
        {id: "C", group: 1},
        {id: "D", group: 2},
        {id: "E", group: 3},
        {id: "F", group: 4},
        {id: "G", group: 5},
        {id: "H", group: 6}
      ],
      links :  [{
        source : "A",
        target : "B",
        value  : 1
      },{
        source : "C",
        target : "D",
        value  : 2
      },{
        source : "A",
        target : "D",
        value  : 3
      },{
        source : "E",
        target : "F",
        value  : 2
      },{
        source : "G",
        target : "H",
        value  : 1
      }]
};
graph.addData(data);

5. Render the network diagram on the canvas.

graph.run();

6. Customize the types of nodes.

const graph = new Gnet('#container',{
      // canvas size in pixels
      width : '500',
      height : '500',
      nodeStyle : {
        radius : 3,
        color  : '#ff0000',
      }
});

Create Network Diagrams, Gnet.js Plugin/Github, create network graph, javascript drawing library


See Demo And Download

Official Website(gouthams96): Click Here

This superior jQuery/javascript plugin is developed by gouthams96. For extra Advanced Usage, please go to the official website.

Share