Dash-plotly : conditional display of figures

📊 Plotly Python
1

I am trying to create a dashboard in which, based on user selection from dropdown menu, the number and content of figures displayed changes.

After having spent quite a bit of time reading and trying, I am still not successful.

My current attempt is to create a separate callback for each plot, and in each update_plot function, use an if statement to generate (or not) the figure. If not, then return a figure with no data, e.g. (fig_p3 = {‘data’: }) to the app.layout.
This method displays a blank plot frame with axes - which I do not want.
I cannot figure out how to have either 2 plots, or 3 plots, or 4 plots (only) displayed, based on user selected data set.

Any help / advice appreciated.

image
image1144×902 88.6 KB

Here is the current code :

import pandas as pd
import plotly.express as px

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# ...   begin app
# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

app = dash.Dash(__name__)

# ... read in a data set
df = pd.read_csv('C:/Users/PycharmProjects/my_dash/data_to_plot.csv')

# ... layout html page
app.layout = html.Div([
        html.H1("my dashboard", style={'text-align': 'center'}),
        dcc.Dropdown(id="dropdown_select_element",
                     options=[
                         {'label': i, 'value': i} for i in df['element'].unique()],
                     multi = False,
                     value = df['element'].iloc[0],
                     style={'width': "40%"}
                     ),
        html.Div(id='selected_element', children=[]),
        html.Br(),
        dcc.Graph(id='p1_plot', figure={}),
        dcc.Graph(id='p2_plot', figure={}),
        dcc.Graph(id='p3_plot', figure={}),
        dcc.Graph(id='p4_plot', figure={})
])

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# ... series of callbacks -- one for each plot
# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

@app.callback(
    [Output(component_id='selected_element', component_property='children'),
     Output(component_id='p1_plot', component_property='figure')],
    [Input(component_id='dropdown_select_element', component_property='value')]
)
def update_p1_plot(selected):

    selected_element = "selected element: {}".format(selected)

    df_selected = df[df['element'] == selected]

    fig_p1 = (px.scatter(
                data_frame=df_selected, x = 'date', y = 'value',
                color = 'data_quality',
                title = selected,
                hover_data=['element_type', 'value'],
                template='seaborn'
            ).update_traces(mode='markers+lines'))

    return selected_element, fig_p1

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

@app.callback(
    Output(component_id='p2_plot', component_property='figure'),
    [Input(component_id='dropdown_select_element', component_property='value')]
)
def update_p2_plot(selected):

    df_selected = df[df['element'] == selected]

# ... condition to only produce p2_plot based on seleceted value
    if df_selected['element_type'].iloc[0] == 'plot_p2':
        fig_p2 = (px.scatter(
                data_frame=df, x='date', y='p2_data',
                template='seaborn'
            ).update_traces(mode='markers+lines'))
    else:
        fig_p2 = {'data': []}

    return fig_p2

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

@app.callback(
    Output(component_id='p3_plot', component_property='figure'),
    [Input(component_id='dropdown_select_element', component_property='value')]
)
def update_p3_plot(selected):

    df_selected = df[df['element'] == selected]

# ... condition to only produce p3_plot based on seleceted value
    if df_selected['element_type'].iloc[0] == 'plot_p3':
        fig_p3 = (px.scatter(
            data_frame=df, x='date', y='p3_data',
            template='seaborn'
        ).update_traces(mode='markers+lines'))
    else:
        fig_p3 = {'data': []}

    return fig_p3

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

@app.callback(
    Output(component_id='p4_plot', component_property='figure'),
    [Input(component_id='dropdown_select_element', component_property='value')]
)
def update_p4_plot(selected):

    df_selected = df[df['element'] == selected]

    fig_p4 = (px.scatter(
                data_frame=df_selected, x='date', y='p4_data',
                template='seaborn'
            ).update_traces(mode='markers+lines'))

    return fig_p4

# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# ...   main()
# ... -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

if __name__ == '__main__':
    app.run_server(debug=True)