CODEWITHSUNDEEP
plotlyplotly-dashplotly-python
Sheryna
Sheryna

Reputation: 77

Show blank page when no dropdown is selected in plotly/dash

Is it possible to show a blank page in plotly/dash when no dropdown is selected?

Currently this is my output when no dropdown is selected.

enter image description here

This code does give a blank page when no dropdowns are selected. However, when the first value of the pillar dropdown is selected, it will be always be a blank graph.

Since I am using multi=True in my dropdowns, when a second or more values of pillar dropdowns are selected, graphs do appear but not when one single dropdown is selected.

For some weird reason, the first selection is always ignored and only taken into account when there is a second dropdown selection.

@app.callback(
    Output(component_id='example-graph', component_property='children'),
    [Input(component_id='pillar-choice', component_property='value')],
    [State(component_id='example-graph', component_property='children')]

)

def update_graph_0(value_pillar, children):
    if not value_pillar:
        return []
    else:
        x = dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
        y = dcc.Graph(id='graph2', style={'display':'inline-block', 'width' :'33%'})
        z = dcc.Graph(id='graph3', style={'display':'inline-block', 'width' :'33%'})
            
       
    return x,y,z

Upvotes: 1

Views: 1098

Answers (1)

bas
bas

Reputation: 15722

One approach is to not put the graph(s) in the initial layout, but to create a container element which children are set dynamically through your callback(s) based on the dropdown value(s):

from dash import Dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input
import plotly.graph_objects as go
import plotly.express from px

app = Dash(__name__)
app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "A", "value": 1},
                {"label": "B", "value": 2},
                {"label": "C", "value": 3},
            ],
        ),
        html.Div(id="page-content"),
    ]
)


@app.callback(
    Output("page-content", "children"),
    Input("dropdown", "value"),
)
def update_output(value):
    if not value:
        return []

    fig = px.scatter(x=[x ** value for x in range(10)], y=[x for x in range(10)])
    return dcc.Graph(figure=fig)


if __name__ == "__main__":
    app.run_server()

Upvotes: 1

Related Questions