Decomposition
The decomposition tree provides a powerful tool for visualizing data across various dimensions. It allows us to conduct a detailed analysis of data by drilling down into the hierarchical structure. It splits core metrics and identifies key factors that affect these metrics. With the help of artificial intelligence (AI), the decomposition tree can even help identify the next dimension of data to explore based on predefined criteria.
Best Situations to Use a Decomposition chart
When the user has a time series data set with a clear trend and seasonality patterns. A decomposition tree chart can help to break down the time series into its components and make it easier to analyze.
To identify underlying trends and seasonality in your business data.
E.g., a Decomposition chart can help a retailer to accurately forecast sales for a particular product and adjust inventory and marketing strategies accordingly.
Steps to configure Decomposition Chart
Drag and drop the decomposition chart from the component library. The chart looks as given in the below image on the Designer canvas page:
Associate a valid dataset. The sample Dataset used to generate a model chart is given-below:
| State | City | Population | Revenue | Indicator | text | TurnOver | LOB | Revenue1 |
|---|---|---|---|---|---|---|---|---|
California | San Jose | 1000 | 10 | 10 | This is to test tooltip width in all the components of the designer dashboard. | 90000000 | Client | 301,397,852 |
California | San Francisco | 2500 | 45 | 45 | This is to test tooltip width in all the components of the designer dashboard. | 20000000 | Storage | 215,354,753 |
California | Los Angeles | 4500 | 75 | 75 | This is to test tooltip width in all the components of the designer dashbaord. | 30000000 | Server | 190,903,506 |
California | San Diego | 500 | 5 | 5 | This is to test tooltip width in all the components of the designer dashboard. | 70000000 | Services | 170,247,575 |
California | Santa Clara | 300 | 3 | 3 | This is to test tooltip width in all the components of the designer dashboard. | 50000000 | Network | 10,384,658 |
NewYork | Buffalo | 100 | 2 | 2 | This is to test tooltip width in all the components of the designer dashbaord. | 60000000 | EI | 3,883,111 |
NewYork | NY City | 6000 | 78 | 78 | This is to test tooltip width in all the components of the designer dashboard. | 40000000 | Client | 301,397,852 |
NewYork | Rochester | 278 | 23 | 23 | This is to test tooltip width in all the components of the designer dashboard. | 80000000 | Storage | 215,354,753 |
Texas | Houston | 3000 | 45 | 45 | This is to test tooltip width in all the components of the designer dashbaord. | 10000000 | Server | 190,903,506 |
Texas | Austin | 3000 | 45 | 45 | This is to test tooltip width in all the components of the designer dashboard. | 130000000 | Services | 170,247,575 |
Texas | Dallas | 2500 | 34 | 34 | This is to test tooltip width in all the components of the designer dashboard. | 110000000 | Network | 10,384,658 |
Texas | San Antonio | 1500 | 23 | 23 | This is to test tooltip width in all the components of the designer dashbaord. | 190000000 | EI | 3,883,111 |
Rajasthan | Jaipur | 7500 | 1 | 1 | This is to test tooltip width in all the components of the designer dashboard. | 100000000 | Client | 301,397,852 |
Rajasthan | Ajmer | 5000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 220000000 | Storage | 215,354,753 |
Rajasthan | Udaipur | 3000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashbaord. | 150000000 | Server | 190,903,506 |
Rajasthan | Bikaner | 3000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 160000000 | Services | 170,247,575 |
Rajasthan | Jodhpur | 4500 | 1 | 1 | This is to test tooltip width in all the components of the designer dashboard. | 250000000 | Network | 10,384,658 |
Rajasthan | Kota | 2500 | 0.4 | 0.4 | This is to test tooltip width in all the components of the designer dashbaord. | 180000000 | EI | 3,883,111 |
UP | Kanpur | 8000 | 3 | 3 | This is to test tooltip width in all the components of the designer dashboard. | 120000000 | Client | 301,397,852 |
UP | Allahabad | 6700 | 2 | 2 | This is to test tooltip width in all the components of the designer dashboard. | 200000000 | Storage | 215,354,753 |
UP | Lucknow | 7800 | 3 | 3 | This is to test tooltip width in all the components of the designer dashbaord. | 210000000 | Server | 190,903,506 |
UP | Noida | 4500 | 4 | 4 | This is to test tooltip width in all the components of the designer dashboard. | 140000000 | Services | 170,247,575 |
Karnataka | Bengaluru | 10000 | 15 | 15 | This is to test tooltip width in all the components of the designer dashboard. | 230000000 | Network | 10,384,658 |
Karnataka | Mysore | 3000 | 2 | 2 | This is to test tooltip width in all the components of the designer dashbaord. | 240000000 | EI | 3,883,111 |
Karnataka | Belagum | 2500 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 170000000 | EI | 3,883,112 |
Consider the Series field as Population and visualize population data as per various categories such as Country, State, and City in a hierarchical order.
The total population per country, state, and city is displayed in each node while opening the Preview of the Dashboard.
While clicking on one node, other nodes of the particular hierarchy get closed, and all the sub-categories/ children nodes get displayed. E.g., the sub-categories of the USA are displayed in the below-given image:
Properties of the Decomposition chart
General Property
Users can change the height, width, top, and left. If initial visibility is unchecked, then the component won’t be visible at the first preview. Users can manage the max button to minimize and maximize the chart.
Use a checkmark for the Enable Context Levels property field. Users can select the next hierarchy levels as per requirement.
Use a right-click on the node to select the next level.
Aggregation Type
The Aggregation type property displays the value of the node based on the selected aggregation.
When the selected aggregation type is sum.
When the selected aggregation type is Mean.
When the selected aggregation type is Percentage.
When the selected aggregation type is Count.
Maximum Nodes
Another property called Maximum Nodes has been provided to control the number of nodes in each hierarchy.
The set value for the Maximum Node field is 10 so if a particular node contains more than 10 children nodes, only 9 children nodes with comparatively more values get displayed as visible nodes, and the remaining children nodes with less value are shown as others.
E.g., In the given Decomposition chart the Maximum Nodes are set as 3
The number of Maximum Nodes gets limited to 3 and the nodes with less values get clubbed as Others as displayed in the below-given image:
Background Property
Provide the following Background Properties for the Decomposition chart:
Gradient Rotation
Opacity
Gradient
Border
Border Color
Border Radius
Shadow
Shadow Color
Shadow Transparency
Node Style
Provide Node Style for styling the nodes and their default values.
Node Height: Set the height of nodes.
Node Color: Set the background color of the node.
Fill Color: Control node fill color
Stroke Color: Set the Border color of the node.
Label Font Color: Select a color for the Fonts.
Label Font Size: Set the Font Size.
Label Font Style: Select an option out of the given choices from the drop-down menu.
Label Font Weight: Select an option out of the given choices from the drop-down menu.
Label Font Family: Select a Font Family type using the drop-down menu.
Control Node Label font properties.
The following image displays a customized Decomposition chart.
ToolTip
Provided Tooltip property in the property section.
The Tooltip appears for the chart as shown below:
Formatter
Use the Formatter property fields to format the default Decomposition
The default chart chart gets fomatted as shown below:
Data Used
| State | City | Population | Revenue | Indicator | text | TurnOver | LOB | Revenue1 |
|---|---|---|---|---|---|---|---|---|
California | San Jose | 1000 | 10 | 10 | This is to test tooltip width in all the components of the designer dashboard. | 90000000 | Client | 301,397,852 |
California | San Franscisco | 2500 | 45 | 45 | This is to test tooltip width in all the components of the designer dashboard. | 20000000 | Storage | 215,354,753 |
California | Los Angeles | 4500 | 75 | 75 | This is to test tooltip width in all the components of the designer dashbaord. | 30000000 | Server | 190,903,506 |
California | San Diego | 500 | 5 | 5 | This is to test tooltip width in all the components of the designer dashboard. | 70000000 | Services | 170,247,575 |
California | Santa Clara | 300 | 3 | 3 | This is to test tooltip width in all the components of the designer dashboard. | 50000000 | Network | 10,384,658 |
NewYork | Buffalo | 100 | 2 | 2 | This is to test tooltip width in all the components of the designer dashbaord. | 60000000 | EI | 3,883,111 |
NewYork | NY City | 6000 | 78 | 78 | This is to test tooltip width in all the components of the designer dashboard. | 40000000 | Client | 301,397,852 |
NewYork | Rochester | 278 | 23 | 23 | This is to test tooltip width in all the components of the designer dashboard. | 80000000 | Storage | 215,354,753 |
Texas | Houston | 3000 | 45 | 45 | This is to test tooltip width in all the components of the designer dashbaord. | 10000000 | Server | 190,903,506 |
Texas | Austin | 3000 | 45 | 45 | This is to test tooltip width in all the components of the designer dashboard. | 130000000 | Services | 170,247,575 |
Texas | Dallas | 2500 | 34 | 34 | This is to test tooltip width in all the components of the designer dashboard. | 110000000 | Network | 10,384,658 |
Texas | San Antonio | 1500 | 23 | 23 | This is to test tooltip width in all the components of the designer dashbaord. | 190000000 | EI | 3,883,111 |
Rajasthan | Jaipur | 7500 | 1 | 1 | This is to test tooltip width in all the components of the designer dashboard. | 100000000 | Client | 301,397,852 |
Rajasthan | Ajmer | 5000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 220000000 | Storage | 215,354,753 |
Rajasthan | Udaipur | 3000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashbaord. | 150000000 | Server | 190,903,506 |
Rajasthan | Bikaner | 3000 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 160000000 | Services | 170,247,575 |
Rajasthan | Jodhpur | 4500 | 1 | 1 | This is to test tooltip width in all the components of the designer dashboard. | 250000000 | Network | 10,384,658 |
Rajasthan | Kota | 2500 | 0.4 | 0.4 | This is to test tooltip width in all the components of the designer dashbaord. | 180000000 | EI | 3,883,111 |
UP | Kanpur | 8000 | 3 | 3 | This is to test tooltip width in all the components of the designer dashboard. | 120000000 | Client | 301,397,852 |
UP | Allahabad | 6700 | 2 | 2 | This is to test tooltip width in all the components of the designer dashboard. | 200000000 | Storage | 215,354,753 |
UP | Lucknow | 7800 | 3 | 3 | This is to test tooltip width in all the components of the designer dashbaord. | 210000000 | Server | 190,903,506 |
UP | Noida | 4500 | 4 | 4 | This is to test tooltip width in all the components of the designer dashboard. | 140000000 | Services | 170,247,575 |
Karnataka | Bengaluru | 10000 | 15 | 15 | This is to test tooltip width in all the components of the designer dashboard. | 230000000 | Network | 10,384,658 |
Karnataka | Mysore | 3000 | 2 | 2 | This is to test tooltip width in all the components of the designer dashbaord. | 240000000 | EI | 3,883,111 |
Karnataka | Belagum | 2500 | 0.5 | 0.5 | This is to test tooltip width in all the components of the designer dashboard. | 170000000 | EI | 3,883,112 |
Last updated
