plot a tree map instead of creating a grid

[BalaNagendraReddy]

Hi Team,

How we can plot the treemap for the following code instead of dash ag grid.

import dash_ag_grid as dag
from dash import Dash, html, dcc
import os

app = Dash(__name__)

rowData = [
    {
        "orgHierarchy": ["Erica Rogers"],
        "jobTitle": "CEO",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": ["Erica Rogers", "Malcolm Barrett"],
        "jobTitle": "Exec. Vice President",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker"],
        "jobTitle": "Director of Operations",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Esther Baker",
            "Brittany Hanson",
        ],
        "jobTitle": "Fleet Coordinator",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Esther Baker",
            "Brittany Hanson",
            "Leah Flowers",
        ],
        "jobTitle": "Parts Technician",
        "employmentType": "Contract",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Esther Baker",
            "Brittany Hanson",
            "Tammy Sutton",
        ],
        "jobTitle": "Service Technician",
        "employmentType": "Contract",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Esther Baker",
            "Derek Paul",
        ],
        "jobTitle": "Inventory Control",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland"],
        "jobTitle": "VP Sales",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Francis Strickland",
            "Morris Hanson",
        ],
        "jobTitle": "Sales Manager",
        "employmentType": "Permanent",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Francis Strickland",
            "Todd Tyler",
        ],
        "jobTitle": "Sales Executive",
        "employmentType": "Contract",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Francis Strickland",
            "Bennie Wise",
        ],
        "jobTitle": "Sales Executive",
        "employmentType": "Contract",
    },
    {
        "orgHierarchy": [
            "Erica Rogers",
            "Malcolm Barrett",
            "Francis Strickland",
            "Joel Cooper",
        ],
        "jobTitle": "Sales Executive",
        "employmentType": "Permanent",
    },
]

grid = html.Div(
    [
        dag.AgGrid(
            id="tree-data-example",
            columnDefs=[
                # we're using the auto group column by default!
                {"field": "jobTitle"},
                {"field": "employmentType"},
            ],
            defaultColDef={
                "flex": 1,
            },
            dashGridOptions={
                "autoGroupColumnDef": {
                    "headerName": "Organisation Hierarchy",
                    "minWidth": 300,
                    "cellRendererParams": {
                        "suppressCount": True,
                    },
                },
                "groupDefaultExpanded": -1,
                "getDataPath": {"function": "getDataPath(params)"},
                "treeData": True,
                "animateRows": False,
            },
            rowData=rowData,
            enableEnterpriseModules=True,
            licenseKey = os.environ['AGGRID_ENTERPRISE'],
        ),
    ]
)

app.layout = html.Div(
    [
        dcc.Markdown("Example: Organisational Hierarchy using Tree Data "),
        grid,
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

In case any reference, please let me know.

[AnnMarieW]

Hi @BalaNagendraReddy

Give this a try:

from dash import Dash, dcc, html
import plotly.graph_objects as go

app = Dash(__name__)

rowData = [
    {"orgHierarchy": ["Erica Rogers"], "jobTitle": "CEO", "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett"], "jobTitle": "Exec. Vice President",
     "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker"], "jobTitle": "Director of Operations",
     "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker", "Brittany Hanson"],
     "jobTitle": "Fleet Coordinator", "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker", "Brittany Hanson", "Leah Flowers"],
     "jobTitle": "Parts Technician", "employmentType": "Contract"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker", "Brittany Hanson", "Tammy Sutton"],
     "jobTitle": "Service Technician", "employmentType": "Contract"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Esther Baker", "Derek Paul"], "jobTitle": "Inventory Control",
     "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland"], "jobTitle": "VP Sales",
     "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland", "Morris Hanson"],
     "jobTitle": "Sales Manager", "employmentType": "Permanent"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland", "Todd Tyler"],
     "jobTitle": "Sales Executive", "employmentType": "Contract"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland", "Bennie Wise"],
     "jobTitle": "Sales Executive", "employmentType": "Contract"},
    {"orgHierarchy": ["Erica Rogers", "Malcolm Barrett", "Francis Strickland", "Joel Cooper"],
     "jobTitle": "Sales Executive", "employmentType": "Permanent"},
]

# Extracting the necessary components for the treemap
labels = []
parents = []
job_titles = []
employment_types = []

for row in rowData:
    hierarchy = row["orgHierarchy"]
    for i in range(len(hierarchy)):
        if hierarchy[i] not in labels:
            labels.append(hierarchy[i])
            job_titles.append(row["jobTitle"] if i == len(hierarchy) - 1 else "")
            employment_types.append(row["employmentType"] if i == len(hierarchy) - 1 else "")

            # The root node Erica Rogers has no parent
            if i == 0:
                parents.append("")
            else:
                parents.append(hierarchy[i - 1])

# Creating the treemap
fig = go.Figure(go.Treemap(
    labels=labels,
    parents=parents,
    text=job_titles,
    hoverinfo='label+text+value+percent entry',
    customdata=employment_types,
    textinfo="label+text",
    marker=dict(colorscale='Blues')
))

fig.update_layout(
    title="Company Organizational Hierarchy",
    margin=dict(t=50, l=25, r=25, b=25)
)

app.layout = html.Div([
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run(debug=True)

Note - You will likely get your questions answered much faster if you ask them on the Plotly forum.

I'm going to close this issue now, but if you have follow-up questions, I'm happy to help you on the forum :slightly_smiling_face: