How to add a Network Graph Widget in Bold BI?

Bold BI allows you to add a variety of widgets to your dashboard, including the Network Graph widget. This widget is useful for visualizing relationships and connections within your data, such as social networks, organizational structures, and supply chains. It helps transform complex data into intuitive visuals, making it easier to identify patterns and insights.

Step 1: Download the Network Graph Custom Widget.

Step 2: After downloading the widget, publish the custom widget to the Bold BI application. This will make the network graph widget available for use in your dashboards. You can find a detailed guide on how to publish custom widgets here.

Step 3: Once the widget was published, navigate to the designer page and find the published custom widget in the Miscellaneous section of your Bold BI dashboard.

Step 4: Drag and drop the Network Graph widget into the design canvas of your dashboard.

Step 5: Finally, configure the data into the widget’s assign data section. Once configuration was completed, the widget will be rendered on your dashboard.

Assign Data Section

Assign Data Section comprises the following sections:

Source: This section specifies the starting node of an edge and represents where the connection originates in the network graph.

Target: This section specifies the ending node of an edge and represents where the connection points to.

Group: The group field is used to categorize nodes. Nodes in the same group can be visually styled similarly, such as having the same color.

Filter: This section specifies the criteria for including or excluding certain nodes or edges from the network visualization.

Widget Properties

Serialization Property

• Distinct Color for Source Node: This property enables the customization of source node colors and ensures that the unique color assignment is retained even after publishing the dashboard. The purpose of this property is serialization.

How to Use:

To apply unique colors based on this property:

1. Provide the serialized data in the specified format in the text box.
2. Ensure the “Unique Source Node Color” option is enabled.

Format:

[
  {"sourceNode":"Value1","color":"#01a78f"},
  {"sourceNode":"Value2","color":"#0d0484"}
]

Basic Settings

Background Color:

• This property allows you to customize the node background color.
  
  

Font Color:

• This property allows you to customize the data label text color.
  
  

Node Size:

• This property allows you to adjust the node size in the network graph widget. The size can range from 10 to 25.
• Default Value: 14
  
  

Show Data Label:

• This property lets you toggle the visibility of the data label in the network graph widget.
• Default Value: True
  
  

Enable Edge Smoothness:

• This property makes the connections between nodes appear as curved or smooth lines rather than straight lines. Smooth edges improve the graph’s visual clarity, especially in dense or closely connected networks.
• Default Value: False
  
  

Unique Source Node Color:

• This property allows you to assign distinct colors to each source node, ensuring that source nodes are visually differentiated.
• Default Value: False

Group Color Formatting

You can use the group formatting property on nodes to apply group-based color formatting. By assigning nodes to specific groups, a unique color can be defined for each group. This feature is particularly useful for visually distinguishing different categories of nodes in the network graph.

• This property is applied to nodes when you configure the group field.
• A maximum of 12 colors is provided for customization. If the number of groups exceeds 12, the colors will repeat by default.

By utilizing these properties, you can effectively customize and enhance the visual appeal and functionality of your network graph widget, ensuring a clear and meaningful representation of your data.

Additional References

• How to create a new custom widget?
• Publishing Custom Widgets