Plotly Dash dropdown menu python

Question

I would like to add a dropdown menu to show only one figure. I mean, if I select fig the dash must show me only the fig and if I select fig2 the dash must show me the fig 2. Is it possible?
My code is an example, I have more than 500 figs.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px

fig = go.Figure()
fig2 = go.Figure()
fig.add_trace(go.Scatter(y=[4, 2, 1], mode="lines"))
fig2.add_trace(go.Bar(y=[2, 1, 3]))

figs = [fig, fig2]
div = []
for item in figs:
    div.append(dcc.Graph(figure=item))

app = dash.Dash()
app.layout = html.Div(div)
"""
add a dropdown to show only one fig
"""


app.run_server(debug=True, use_reloader=False)

Asked By: Martin Facts

||

Source

Answer 1

Yes, it is possible.

First you need to create the dropdown containing the figure-names / filenames or the identifier you wish, just keep the {'label': x, 'value': x} structure for the option parameter. label is what you will see in the dropdown, and value will be passed to the callback (s. below).

fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )])

Next you need a blank div (with an id) where the plot will appear:

fig_plot = html.Div(id='fig_plot')

Now create a callback. When an input with the id='fig_dropdown' is changed, the value parameter will be passed to the update_output function. The output of this function will be passed to passed to the children parameter of the id='fig_plot' div.

@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
    return name_to_figure(fig_name)

The name_to_figure(fig_name) function returns a dcc.Graph() objects, containing your figure, depending on the fig_name value of the dropdown.

Full example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go # or plotly.express as px


app = dash.Dash()

fig_names = ['fig1', 'fig2']
fig_dropdown = html.Div([
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )])
fig_plot = html.Div(id='fig_plot')
app.layout = html.Div([fig_dropdown, fig_plot])

@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
    return name_to_figure(fig_name)

def name_to_figure(fig_name):
    figure = go.Figure()
    if fig_name == 'fig1':
        figure.add_trace(go.Scatter(y=[4, 2, 1]))
    elif fig_name == 'fig2': 
        figure.add_trace(go.Bar(y=[2, 1, 3]))
    return dcc.Graph(figure=figure)

app.run_server(debug=True, use_reloader=False)

Answered By: ilja

Answer 2

Incase you have so many fig to choose from in your Drop Down box, the following changes to the code may be necessary to implement:

@app.callback(Output('fig_plot', 'figure'), [Input('fig_dropdown', 'value')])
def cb(plot_type):
    plot_type = plot_type if plot_type else 'fig1'
    df_year = head_db.copy()
    if plot_type:
        return px.bar(df_year, x='Week #', y=str(plot_type), color='Name')

Answered By: Bee

Answer 3

#Libraries/Imports
from dash import Dash, html, dcc, Input, Output
import plotly.graph_objects as go

fig = go.Figure()
fig2 = go.Figure()
fig.add_trace(go.Scatter(y=[4, 2, 1], mode="lines"))
fig2.add_trace(go.Bar(y=2, 1, 3]))

figs = ['fig', 'fig2']

#Your HTML to display the graph
#Disables the multiple dropdown values attributes
app.layout = html.Div([
html.Div(children=[
     html.label('Dropdown'), 
     dcc.Dropdown(id='dropdown', options=(figs), multi=False
     html.div(id='show-my-graph')
    ])
])

#Your callback; is used to display the graph when the dropdown values are selected or updated
@app.callback(
     Output(component_id='show-my-graph'), component_property='children'),
     Input(component_id='dropdown', component_property='value')
)

 #Defines the Function used to display the graph when an option is selected or updated
def update_graph(dropdown_value):
     "Returns the appropriate graph component to display when a dropdown is selected or updated"
     if(dropdown_value == 'fig'): 
          ret_val = dcc.Graph(id='scatter-plot-graph', figure=fig)
          return ret_val 

     if (dropdown_value == 'fig2'):
          ret_val = dcc.Graph(id='bar-graph', figure=fig2)
          return ret_val

app.run_server(debug=True, use_reloader=False)

Answered By: Rex Charles

Plotly Dash dropdown menu python

Question:

Answers: