How to Add and Use Diagram Custom Widget in Bold BI Dashboard

Bold BI allows you to add and use a Diagram custom widget in your dashboard. This article will guide you through the process of publishing the custom widget into the Bold BI application and using it.

Steps to Publish the Custom Widget

1. Download the CustomWidget.
2. Publish the custom widget to the Bold BI application by following the steps in this link.
3. After publishing, you can find the Diagram custom widget under the Miscellaneous section of the designer panel.
   
   
4. Drag and drop the Diagram custom widget and use the diagram controls for your desire. Refer the sample diagram below.
   
   

How to Use the Custom Diagram Control

The custom diagram control allows you to create a diagram control with data binding and color customization. Here’s how you can use it:

1. Drag and drop the diagram widget into the design canvas.
   
   
2. Use the symbol shapes provided on the left-hand side to design your diagram.
   
   
3. Use the context menu to interact with the diagram nodes/connectors. You can copy, paste, undo/redo, and copy ID.
   
   

Color formatting

Use the properties section to serialize the drawn shape and apply color values to nodes/connectors based on node/connector id.
Structure

  [
   {
     "id": "RectanglerPyis",
     "style": {
       "fill": "red",
       "strokeWidth": 3,
       "strokeColor": "black",
       "color": "#ffffff",
       "fontSize": 12,
       "bold": true,
       "italic": true,
       "fontFamily": "Arial"
     }
   },
   {
     "id": "EllipseUpWQ1",
     "style": {
       "fill": "red",
       "strokeWidth": 3,
       "strokeColor": "black",
       "color": "#ffffff",
       "fontSize": 12,
       "bold": true,
       "italic": true,
       "fontFamily": "Arial"
     }
   }
 ]

NOTE: Id value got from the tooltip which will be visible while mouse hovering in the node/connector. You can also copy from CopyID option the right clicks diagram context menu.
Widget will be rendered as below

Conditional Color Formatting

Use the conditional color formatting to apply color values for nodes/connectors based on the data and its condition set.
Requirement Field

• dataIndex

• id – Diagram widget id

You can configure measure value into measure section in data configuration panel. dataIndex value get from based on measure field configuration order as array index.
Structure

[
 {
   "dataIndex": "0",
   "id": "RectanglerPyis",
   "isDataUpdate": true,
   "prefix": "prefix_value",
   "suffix": "suffix_value",
   "rangeInfo": [
     {
       "value": [
         "6000",
         "7000"
       ],
       "condition": "lessthan",
       "style": {
         "fill": "lightblue",
         "strokeWidth": 2,
         "strokeColor": "red",
         "color": "#ffffff",
         "fontSize": 15,
         "bold": true,
         "italic": false,
         "fontFamily": "Arial"
       }
     },
     {
       "value": [
         "40000"
       ],
       "condition": "greaterthan",
       "style": {
         "fill": "lightblue",
         "strokeWidth": 2,
         "strokeColor": "red",
         "color": "#ffffff",
         "fontSize": 15,
         "bold": true,
         "italic": false,
         "fontFamily": "Arial"
       }
     }
   ]
 }
] 

The following conditions are supported

• Greaterthan
• Lessthan
• Equal
• Between

Widget will rendered as below

Additional Features

• Label Parameter: You can configure the label parameters using the column name with functions. More about function supported in label parameters can be found here.
  
  

References

• Creating a New Custom Widget
• Configuring Label Parameters