Interactive filtering data table in Plotly by using a dropdown

Question

I am trying to make an interactive table where the values of the table change by selecting a value from a dropdown. This should be done only in Plotly (not Dash) as I need to share the file with other users.

For example:

If I chose Channel_1 then the tabel should be

Date	A_item	B_item	C_item
2020-01-27	2	1	9
2020-02-27	8	7	2

If I chose Channel_2 then the tabel should be

Date	A_item	B_item	C_item
2020-03-27	0	10	9

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({"Date":["2020-01-27","2020-02-27","2020-03-27"],
                   "A_item":[2, 8, 0],
                   "B_item":[1, 7, 10],
                   "C_item":[9, 2, 9],
                   "Channel_type":["Channel_1", "Channel_1", "Channel_2"]
                   })

fig = go.Figure()
fig.add_trace(go.Table(
    header=dict(
        values=items,
        font=dict(size=10),
        align="left"
    ),
    cells=dict(
        values=..... ,
        align = "left")
    ))

updatemenu= []
buttons=[]
for channel in df['Channel_type'].unique():
    buttons.append(dict(method='update',
                        label=channel,
                        args=[{.....}])
                  )

updatemenu=[]
your_menu=dict()

updatemenu.append(your_menu)

updatemenu[0]['buttons']=buttons
updatemenu[0]['direction']='down'
updatemenu[0]['showactive']=True
fig.update_layout(updatemenus=updatemenu)

fig.show()

Rob Raymond · Accepted Answer · 2021-10-15 09:12:35Z

9

you can modify contents of figures. For the use case you note it's modify cells contents
updatemenus is static, so it's multiple static views onto the dataframe
code below

import plotly.graph_objects as go

df = pd.DataFrame(
    {
        "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
        "A_item": [2, 8, 0],
        "B_item": [1, 7, 10],
        "C_item": [9, 2, 9],
        "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
    }
)

fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
fig.update_layout(
    updatemenus=[
        {
            "buttons": [
                {
                    "label": c,
                    "method": "update",
                    "args": [
                        {
                            "cells": {
                                "values": df.T.values
                                if c == "All"
                                else df.loc[df["Channel_type"].eq(c)].T.values
                            }
                        }
                    ],
                }
                for c in ["All"] + df["Channel_type"].unique().tolist()
            ]
        }
    ]
)

multiple menus

Make updatemenus list a list comprehension

import plotly.graph_objects as go

df = pd.DataFrame(
    {
        "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
        "A_item": [2, 8, 0],
        "B_item": [1, 7, 10],
        "C_item": [9, 2, 9],
        "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
    }
)

fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
fig.update_layout(
    updatemenus=[
        {
            "y": 1 - (i / 5),
            "buttons": [
                {
                    "label": c,
                    "method": "restyle",
                    "args": [
                        {
                            "cells": {
                                "values": df.T.values
                                if c == "All"
                                else df.loc[df[menu].eq(c)].T.values
                            }
                        }
                    ],
                }
                for c in ["All"] + df[menu].unique().tolist()
            ],
        }
        for i, menu in enumerate(["Channel_type", "Date"])
    ]
)

edited Oct 15, 2021 at 9:12

answered Oct 14, 2021 at 11:08

Rob Raymond

31.5k3 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

j_90 Over a year ago

Is it possible to add a second dropdown as an additional criterium let's say Date?

Rob Raymond Over a year ago

updated - updatemenus is a list so construct it with a list comprehension

Rodrigo Esquivel Over a year ago

That was a great answer, and helped me a lot with a visual I am building. Just a little detail, add the pandas to your import, is obvious but perhaps not so much for the python new guy that wants to use your solution.

Carlos Azevedo Over a year ago

The multiple dropdown section is broken. It does not apply the and condition to both filters. Either one or the other filter is active which defeats the purpose of having multiple dropdowns.

Collectives™ on Stack Overflow

Interactive filtering data table in Plotly by using a dropdown

1 Answer 1

multiple menus

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

multiple menus

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related