Creating a dropdown menu for Plotly

Question

I have a table that looks like below:

date	type	value_1	value_2
1/1	A	1	10
1/2	A	5	3
1/3	A	6	12
1/1	B	4	7
1/2	B	10	5
1/3	B	6	15
1/1	C	16	8
1/2	C	8	11
1/3	C	1	5

I want to draw a interactive graph for type A,B, and C so that 'date' column lies on the x-axis and 'value_1' and 'value_2' both lie on the y-axis in one graph.

The code I've currently wrote is below; I have used Plotly to plot Type A's value_1 and value_2 to be on the same plot with date as x-axis.

# Change Type (A, B, and C)
type_graph = 'A'

# Plot Graph
fig = px.line(df[df['type'] == type_graph ],
              x='date', y=['value_1', 'value_2')

fig.update_layout(
    title="Value graph",
    xaxis_title="Date",
    yaxis_title="Value_1 vs Value_2",
    legend_title="Value Type",
)

fig.show()

I want to add dropdown menu so that I can change to view type B and C. So that instead of changing 'type_graph', I can just click the dropdown menu to select which 'type' I want to see. In addition, I want value_1 and value_2 to be plotted on the same graph. As a result, I would only chose 'type' A, B, or C to see both value_1 and value_2 accordingly.

Answer 1

The desired button behavior is achieved by associating the display/hide of the graph with the type. So from your data, draw a graph of value_1 and a graph of value_2 and group them. Set the initial graphs to be displayed and make sure they are all displayed. Next, specify in the list whether the buttons should be shown or hidden as a function of the button. In this case, there are two graphs, so there will be two hidden. Refer to the reference here.

import plotly.graph_objects as go

fig = go.Figure()

for t in df['type'].unique():
    dff = df[df['type'] == t]
    fig.add_trace(go.Scatter(
        x=dff.date,
        y=dff['value_1'],
        name='value_1',
        legendgroup=t,
        legendgrouptitle=dict(text=t),
        visible=True,
    ))
    fig.add_trace(go.Scatter(
        x=dff.date,
        y=dff['value_2'],
        name='value_2',
        legendgroup=t,
        legendgrouptitle=dict(text=t),
        visible=True,
    ))

fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="All",
                     method="update",
                     args=[{"visible": [True, True, True, True, True, True]}]),
                dict(label="Type_A",
                     method="update",
                     args=[{"visible": [True, True, False, False, False, False]}]),
                dict(label="Type_B",
                     method="update",
                     args=[{"visible": [False, False, True, True, False, False]}]),
                dict(label="Type_C",
                     method="update",
                     args=[{"visible": [False, False, False, False, True, True]}]),
            ]),
        )
    ])

fig.update_layout(
    autosize=True,
    height=400,
    title="Value graph",
    xaxis_title="Date",
    yaxis_title="Value_1 vs Value_2",
    #legend_title="Value Type",
)
fig.show()