Network Graph Component

Overview

Display the connectivity/dependency/relationships between multiple objects in the graph representation.

Some example use cases:

Marketing Analytics – this component can be used to figure out the most influential people in your social network. Advertisers and marketers can estimate the biggest bang for the marketing buck by routing their message through the most influential people in your CRM application.
Banking Transactions – this component can be used to find unusual patterns helping in mitigating fraudulent transactions.
Supply Chain – this component help in identifying optimum routes for your delivery trucks and in identifying locations for warehouses and delivery centers.
Field Service – Companies having on-site field agents can optimize the routes of their agents using this component which helps in cutting costs and reducing the travel time.

Key Features & Functionality

Supports all configurations a network graph component has, as outlined on https://visjs.github.io/vis-network/docs/network/
Easily and quickly configure network graph objects & its edges (dependencies) in "low-code"
Having various options for setting edges, nodes, layout, physics, and interaction.
Apply different branding to your graphs with different icons, colors, image nodes, & style themes.

Parents

prasanthrajac0001 over 3 years ago

Hi ,

I have used fraud ring network graph plugin for one scenario as below,

Q1. Can we get the dynamic data from external DB's and build network diagram? How to map the nodes and edges respectively for dynamic values?

Q2. I have a requirement, to show the drill-down level of each node as a separate interface. Is it possible to implement the same by using Network-graph-component Plugin?

Q3. Can we show/hide the nodes depends on the requirements? Any examples please share.

Any reference links and example implementation would be appreciated.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Comment

prasanthrajac0001 over 3 years ago

Hi ,

I have used fraud ring network graph plugin for one scenario as below,

Q1. Can we get the dynamic data from external DB's and build network diagram? How to map the nodes and edges respectively for dynamic values?

Q2. I have a requirement, to show the drill-down level of each node as a separate interface. Is it possible to implement the same by using Network-graph-component Plugin?

Q3. Can we show/hide the nodes depends on the requirements? Any examples please share.

Any reference links and example implementation would be appreciated.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Children

Dude over 3 years ago in reply to prasanthrajac0001

Q1. Can we get the dynamic data from external DB's and build network diagram? How to map the nodes and edges respectively for dynamic values?

Ans: Yes. When we have accurate node details and their corresponding details in DB tables,

Get the node details and its edge details from DB or view (incase of separate tables for nodes and edges)
Create separate expressions. One for formulating dictionary of nodes and another for formulating dictionary of edges
Pass them to the networkGraphField

Please find the code snippet at the bottom.

{
  a!localVariables(
//Use the expression for preparing the dictionary of nodes in case of database retrieval
    local!nodes:{
      {id: 1,label: "Node 1", hidden: false},
      {id: 2,label: "Node 2", hidden: false},
      {id: 3,label: "Node 3", hidden: false},
      {id: 4,label: "Node 4", hidden: false},
      {id: 5,label: "Node 5", hidden: false},
      {id: 6,label: "Node 6", hidden: false}
    },
//Use the expression for preparing the dictionary of edges in case of database retrieval
    local!edges:{
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 1, to: 4 },
      { from: 4, to: 5 },
      { from: 4, to: 6 }
    },
  networkGraphField(
    label: "Network Graph Field",
    labelPosition: "ABOVE",
    validations: {},
    height: "SHORT",
    nodes: local!nodes,
    edges: local!edges,
    nodeOptions: {},
    edgeOptions: {
      arrows: "to"
    },
    groups: {},
    layout: {
      hierarchical: {
        direction: "UD",
        sortMethod: "directed"
      }
    },
    interaction: {},
    physics: {
      barnesHut: {
        springLength: 200
      }
    },
    showBorder: true
  )
  )
}

Q2. I have a requirement, to show the drill-down level of each node as a separate interface. Is it possible to implement the same by using Network-graph-component Plugin?

Ans: No. The existing networkGraphField component does not have link facility. If we need we need to customize the component to enable the link facility.

Q3. Can we show/hide the nodes depends on the requirements? Any examples please share.

Ans: Yes. We can hide the nodes by using the hidden parameter of the Node. Following code snippet demonstrate this requirement.

Note: When we hide node, the node will be disappeared. Its associated edges will be removed from it connected nodes.

…

nodes: {{id: 1, label: "Node 1", hidden:true }}

…

Image with fully connected nodes.

{
  a!localVariables(
    /*Use the expression for preparing the dictionary of nodes in case of database retrieval*/
    local!nodes:{
      {id: 1,label: "Node 1", hidden: false},
      {id: 2,label: "Node 2", hidden: false},
      {id: 3,label: "Node 3", hidden: false},
      {id: 4,label: "Node 4", hidden: false},
      {id: 5,label: "Node 5", hidden: false},
      {id: 6,label: "Node 6", hidden: false}
    },
    /*Use the expression for preparing the dictionary of edges in case of database retrieval*/
    local!edges:{
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 1, to: 4 },
      { from: 4, to: 5 },
      { from: 4, to: 6 }
    },
    networkGraphField(
      label: "Network Graph Field",
      labelPosition: "ABOVE",
      validations: {},
      height: "SHORT",
      nodes: local!nodes,
      edges: local!edges,
      nodeOptions: {},
      edgeOptions: {
        arrows: "to"
      },
      groups: {},
      layout: {
        hierarchical: {
          direction: "UD",
          sortMethod: "directed"
        }
      },
      interaction: {},
      physics: {
        barnesHut: {
          springLength: 200
        }
      },
      showBorder: true
    )
  )
}

Image with Node 4 hidden

{
  a!localVariables(
    /*Use the expression for preparing the dictionary of nodes in case of database retrieval*/
    local!nodes:{
      {id: 1,label: "Node 1", hidden: false},
      {id: 2,label: "Node 2", hidden: false},
      {id: 3,label: "Node 3", hidden: false},
      {id: 4,label: "Node 4", hidden: true},
      {id: 5,label: "Node 5", hidden: false},
      {id: 6,label: "Node 6", hidden: false}
    },
    /*Use the expression for preparing the dictionary of edges in case of database retrieval*/
    local!edges:{
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 1, to: 4 },
      { from: 4, to: 5 },
      { from: 4, to: 6 }
    },
    networkGraphField(
      label: "Network Graph Field",
      labelPosition: "ABOVE",
      validations: {},
      height: "SHORT",
      nodes: local!nodes,
      edges: local!edges,
      nodeOptions: {},
      edgeOptions: {
        arrows: "to"
      },
      groups: {},
      layout: {
        hierarchical: {
          direction: "UD",
          sortMethod: "directed"
        }
      },
      interaction: {},
      physics: {
        barnesHut: {
          springLength: 200
        }
      },
      showBorder: true
    )
  )
}

prasanthrajac0001 over 3 years ago in reply to prasanthrajac0001

Hi Appcino @Appcino

Expecting a reply at the earliest.

Any reference links and example implementation would be appreciated.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel