Graph Chart

A graphical chart is a visual representation employed to depict the connections between sets of two points. The points themselves are illustrated as nodes or vertices, which are connected by lines

Configuration

Option

Provide the JSON content to generate the chart dynamically. Sample data is given blow.

{
  "categories": [
    {
      "name": "Nodes"
    },
    {
      "name": "Edges"
    }
  ],
  "nodes": [
    {
      "name": "Node 1",
      "category": 0
    },
    {
      "name": "Node 2",
      "category": 0
    },
    {
      "name": "Node 3",
      "category": 0
    },
    {
      "name": "Node 4",
      "category": 0
    }
  ],
  "links": [
    {
      "source": "Node 1",
      "target": "Node 2",
      "category": 1
    },
    {
      "source": "Node 2",
      "target": "Node 3",
      "category": 1
    },
    {
      "source": "Node 3",
      "target": "Node 4",
      "category": 1
    }
  ]
}

The JSON data will have two categories: 1. Nodes, 2. Edges.

This is followed by the set of nodes - in which - each node consists of "name" and "category" where the "category" is mentioned by its index number.

The user needs to provide the set of links after nodes. Each link needs to be defined with a source node and a target node. The category is mentioned by its index number.

Title

Provide a short and descriptive title for the chart that clearly summarizes the data and information being presented. This title should be concise yet informative, helping the audience understand the content of the chart at a glance.

Tooltip

This tooltip pops up when the user moves the mouse over the block area of the chart. This is commonly used to provide some extra or important information to the user on the usage of the widget.

The tooltip will be immediately shown when the user's mouse hovers over the widget, and immediately hides when the user's mouse leaves. This information will be contextual, useful, and informative.

Interaction

Event Handlers

Event	Description
Click	This event will be triggered when the user clicks on the chart.

Style

Property	Description
Background	Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Layout

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Set the visibility