Filter Dropdowns in Plotly

đź“Š Plotly Python
1

image
image1757Ă—862 21.8 KB

I can create the following gantt chart in plotly express and use something like streamlit (dash is another alternative) to create a sidebar with filters so the user can select what they want to see on the gantt chart to avoid clutter.

I want to see if there’s a way to filter the data with a similar dropdown, slicer, buttons, etc. in plotly without using Streamlit. The reason for this is so I can save the offline plotly html file and send it to a few key stakeholders via e-mail.

Streamlit turns this into a web app which I want to avoid for the time being.

2

Hi,

Please take a look on this part of the docs. I am not sure how much you are limited in terms of updates compared to a web application, as I don’t know exactly the relationship between the filters in the figure you showed and the traces in the plot.

3

Thank you,

I’ve taken a look at the update docs but can’t seem to figure out how they would work for a gantt chart in plotly express or the legacy figure factory.

For example, off of this I would want a filter of “type” and “rank”

import plotly.express as px
import pandas as pd

df = pd.DataFrame([
    dict(Task="Job A", Start='2009-01-01', Finish='2009-02-28', Resource="Alex", Type="A", Rank="A"),
    dict(Task="Job B", Start='2009-03-05', Finish='2009-04-15', Resource="Steve", Type="A", Rank="A"),
    dict(Task="Job C", Start='2009-02-20', Finish='2009-05-30', Resource="Max", Type="B", Rank="A"),
    dict(Task="Job A", Start='2010-01-01', Finish='2010-02-28', Resource="Alex", Type="A", Rank="B"),
    dict(Task="Job B", Start='2010-03-05', Finish='2010-04-15', Resource="Steve", Type="A", Rank="B"),
    dict(Task="Job C", Start='2010-02-20', Finish='2010-05-30', Resource="Max", Type="B", Rank="A")
])

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Task", color="Resource")
fig.update_yaxes(autorange="reversed")
fig.show()
4

Hmmm, that’s a tricky one… Type and rank are not used at all in the data or layout. But in this particular case, you can map a Type selection to a Resource selection, meaning:

Filter: Type == “A” => Resource == [“Alex”, “Steve”]

So you could change the visible property of each trace depending on the Resource value instead of Type. Something like:

fig.update_layout(
    updatemenus=[
        dict(
            #   active=0,
            buttons=list([
                dict(label="A+B",
                     method="update",
                     args=[{"visible": [True, True, True]}],
                ),
                dict(label="A",
                     method="update",
                     args=[{"visible": [True, True, False]}],
                ),
                dict(label="B",
                     method="update",
                     args=[{"visible": [False, False, True]}],
                ),
            ]),
        )
])

This just work if you have an unique Type in each trace (Resource), so Rank would already be a bit ambiguous as a filter (should Rank == “B” show just “Max” or the three resources?).