Tree Map#

Overview#

The Tree Map Chart Widget provides a mechanism to visualize a hierarchical data in a tree structure.

General Steps#

To use the Tree Map widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the Tree Map from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Widget Customization#

1. Optionally, in the Style tab, you can define a Border Width and Color.

   

2. In the Setup tab, the visual properties and the field names of the Widget are configured, namely:

   • Title - The title of the Tree Map Chart.
   • Sub-Title - The subtitle of the Tree Map Chart.
   • Use Auto-Generated Colors - Ensures that any sections of the Tree Map without a defined color will have an automatically generated color assigned. This option is set to false by default.
   • Units - Units to display in the tooltip.
   • Name Path - The path that contains the names of each region in the Tree Map Chart.
   • Color Path - The path that contains the color of each region in the Tree Map Chart.
   • Value Path - The path that contains the value of each region in the Tree Map Chart, with the area of each visual element proportional to this value.

   

3. Optionally, define the Links between this widget and other elements of the UI Page.

   

4. By saving and closing the settings, the widget will be changed accordingly.

Using the Fill Settings Feature#

When using widgets that can be configured via input, you can take advantage of the Fill Settings feature, which is accessible through the three-dot menu of each widget while in build mode. This functionality automatically updates the widget settings based on its current state.

To use it, simply connect a compatible output from a System Task to the appropriate input of the Tree Map widget. Then, select the Fill Settings button, and the widget will be updated accordingly.