Dropdown Menu Histogram based on two columns - Plotly

Question

I want to plot this figure based on the selection of a value from the first dropdown menu (year) and second drop menu (company). What I get is that it doesn't take in consideration of the year selected and only take in consideration the company value selector or the one around ( year without company value)
I tried the solution proposed here and other solutions but no luck. Dropdown bar chart (plotly) based on values column

dataframe:

date    company_name    field   count
0   2015    CM          EM      3
1   2015    P&G         EP      1
2   2017    CM          MS      2
3   2017    P&G         EM      5
4   2017    POSCO       MS      8
5   2020    CM          EM      6
6   2020    POSCO       MS      6
7   2020    POSCO       EP      5

here the code I wrote:

df = data.groupby(["date","company_name","field"])['product'].size().to_frame(name = 'count').reset_index()

fig = go.Figure()
fig.add_trace(go.Histogram(x=df.field,
                         y=df.count,
                         #colorscale=df.date,
                         visible=True)
             )

updatemenu = []
buttons = []
buttons1 = []

for col,col1 in zip(list(df.date.unique()),list(df.company_name.unique())):
    buttons.append(dict(method='restyle',
                        label=col,
                        visible=True,
                            args=[{'y':[df[(df.date==col)]["count"]],
                                   'x':[df[(df.date==col)].field],
                               'type':'histogram'}
                             
                             ],
                        )
                  )
    buttons1.append(dict(method='restyle',
                        label=col1,
                        visible=True,
                            args=[{'y':[df[(df.company_name==col1)]["count"]],
                                   'x':[df[(df.company_name==col1)].field],
                               'type':'histogram'}
                             
                             ],
                        )
                  )

updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)
updatemenu.append(dict())
updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True
updatemenu[0]['x'] = 0.1
updatemenu[1]['buttons'] = buttons1
updatemenu[1]['direction'] = 'down'
updatemenu[1]['showactive'] = True
updatemenu[1]['x'] = 0.5

fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()

result:

I got the count for POSCO products but for all years not 2020. and if i select 2020, it shows the count product of all companies.

PS: Is there a way to color Histogram based on column like in Plotly Express color attribute within this case?

Thank you in advance!

Answer 1

• as per this answer Plotly express multiple dropdown menus in python. updatmenus does not support dependent drop downs. If you want them use dash
• below shows how a single dropdown can be built with both selections encoded in one drop down

import pandas as pd
import numpy as np
import io
import plotly.graph_objects as go
import plotly.express as px
import itertools

df = pd.read_csv(
    io.StringIO(
        """date    company_name    field   count
0   2015    CM          EM      3
1   2015    P&G         EP      1
2   2017    CM          MS      2
3   2017    P&G         EM      5
4   2017    POSCO       MS      8
5   2020    CM          EM      6
6   2020    POSCO       MS      6
7   2020    POSCO       EP      5"""
    ),
    sep="\s+",
)

cfg = [("x", "field"), ("y", "count")]

fig = px.histogram(df, **{ax: col for ax, col in cfg})

fig.update_layout(
    updatemenus=[
        {
            "buttons": [
                {
                    "label": f"{y if y>0 else ''} - {cn}",
                    "method": "restyle",
                    "args": [
                        {
                            ax: [
                                df.loc[
                                    (df["date"].eq(y) | (y == 0))
                                    & (df["company_name"].eq(cn) | (cn == "")),
                                    col,
                                ]
                            ]
                            for ax, col in cfg
                        }
                    ],
                }
                for y, cn in itertools.product(
                    np.concatenate([[0], df["date"].unique()]),
                    np.concatenate([[""], df["company_name"].unique()]),
                )
            ]
        }
    ]
)