Black Lives Matter. Please consider donating to Black Girls Code today.

Show and hide graph

Hi,

I try to display my graph only when the dropdown variables have been selected, is there any way to do it?

Welcome @Pierre
Do you have code already written up?

Sure, I show you:

ffn = pd.read_csv("/home/pierre/Documents/FFN/data.csv")
available_indicators = ffn["distance"].unique()
variable_indicators = ["spd_", "freq_", "amplitude_", "tempo_"]
app = dash.Dash()

colors = {
    'background': '#0077c0',
    'text': '#7FDBFF'
}

app.layout = html.Div(
    children=[

    html.Div([

        html.Div([
            html.Label(
                "Distance"),
            ], 
            style={"width": "20%", "display": "table-cell"}
        ),
        html.Div([
            dcc.Dropdown(
                id="distance_choice",
                options=[{"label": i, "value": i} for i in available_indicators],
                placeholder="Select distance"
            ),
        ],
        style={"width" : "40%", "display": "table-cell"}

    )]),

    html.Div([

        html.Div([
            html.Label("Style"),
            ],
            style={"width": "20%", "display": "table-cell"}
            ),
        html.Div([
            dcc.Dropdown(
                id="style_choice",
                placeholder="Select tyle"
            )
        ],
        style={"width": "40%", "display": "table-cell"}
    )]),

    html.Div([

        html.Div([
            html.Label("Variable"),
            ],
            style={"width" : "20%", "display": "table-cell"}
            ),
        html.Div([
            dcc.Dropdown(
                id="variable_choice",
                options=[{"label": i, "value": i} for i in variable_indicators],
                placeholder="Select variable"
                )
        ],
        style={"width": "40%", "display": "table-cell"}),

    ]),

    html.Div([
        dcc.Graph(id="distance_1")
    ], style={"width": "49%", "display": "inline-block", "padding": "0 20"})
])

@app.callback(
    Output('style_choice', 'options'),
    [Input('distance_choice', 'value')]
)
def update_date_dropdown(name):
    return [{'label': i, 'value': i} for i in ffn[ffn["distance"]==name]["style"].unique()]

@app.callback(
    Output("distance_1", "figure"),
    [Input("distance_choice", "value"),
     Input("style_choice", "value"),
     Input("variable_choice", "value")])

def update_graph_1(distance_name, style_name, variable_name):
    df = ffn.loc[(ffn["distance"]==distance_name) & (ffn["style"]==style_name)].dropna(axis="columns")
    tickvals = np.array(range(len([col for col in df if col.startswith(variable_name)])))
    ticktext = [col.split(str("_"))[1] for col in df if col.startswith(variable_name)]
    return {
    "data": [dict(y= df[df[col]>0][col], type= "box", marker=dict(color="#00539b")) for col in df if col.startswith(variable_name)],
    "layout": {"title": "2016", 
               "xaxis": {"title": "Distance (m)", "tickmode": "array", "tickvals": tickvals,"ticktext" : [s.lstrip("0") for s in ticktext]},
               "yaxis": {"title": "Vitesse (m/s)"}, 
               "showlegend": False,
               "plot_bgcolor": colors["background"],
               "paper_bgcolor": colors["background"]}
    }

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

Simply I have a boxplot according to the selected variables and I would like the graph to be displayed only when all the variables have been selected.

You have a lot of code so it’s hard for me to figure out why it’s not working without the dataset and testing on my own. And I’m not sure why your graph is not showing anything. I recommend starting small.

What usually helps me is to write code where data from one Dropdown creates one boxplot with the callback. Then, add another Dropdown, then make it more complicated.

That way, it’s also easier to help you. If you have only one Dropdown with one figure output, it would be easier to see where the problem is.

Good luck,

Yes sorry, here’s a reproducible code that works and shows my problem simply.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import numpy as np

app = dash.Dash()

data = {'x': [1, 2, 3, 1, 2, 3], 'y': [4, 1, 2, 6, 1, 4], 'name': ["USA", "USA", "USA", "CAN", "CAN", "CAN"]}
df= pd.DataFrame(data)
variable_indicators = df["name"].unique()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

	dcc.Dropdown(
		id="variable_choice",
		options=[{"label": i, "value": i} for i in variable_indicators]
		),

    dcc.Graph(
        id='example-graph'
    )
])

@app.callback(
    Output("example-graph", "figure"),
    [Input("variable_choice", "value")])

def update_graph_1(variable_name):
	dff = df[df["name"]==variable_name]
	return {
    "data": [dict(x=dff.x, y=dff.y, type="bar")]
    }

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

Currently I have an empty board:

And I’d just like to show an empty area instead until I select the dropdown

oh ok. That’s because you have

    dcc.Graph(
        id='example-graph'
    )

inside your app.layout. If you want a graph to appear only once callback is activated, you will have to create an empty html.Div inside the app.layout, and use the callback to Output the dcc.graph as the Children of that Div.
And don’t forget to add this line of code

app.config.suppress_callback_exceptions = True

right after “app = dash.Dash()”.

This post might help you more with this.

1 Like

Thanks you,
I managed to adapt the code to my case. Here’s what I’ve found if it helps anyone else:

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


app = dash.Dash()
app.config.suppress_callback_exceptions = True

data = {'x': [1, 2, 3, 1, 2, 3], 'y': [4, 1, 2, 6, 1, 4], 'name': ["USA", "USA", "USA", "CAN", "CAN", "CAN"]}
df= pd.DataFrame(data)
variable_indicators = df["name"].unique()

app.layout = html.Div([
 	dcc.Dropdown(
		id="variable_choice",
		options=[{"label": i, "value": i} for i in variable_indicators]
		),

	html.Div([

		], id="example-graph")
])

@app.callback(
    Output("example-graph", "children"),
    [Input("variable_choice", "value")],
    [State("example-graph", "children")])

def update_graph_1(variable_name, children):
	dff = df[df["name"]==variable_name]
	if variable_name:
		if children:
			children[0]["props"]["figure"] = {"data": [dict(x=dff.x, y=dff.y, type="bar")]}
		else:
			children.append(
				dcc.Graph(
					figure={"data": [dict(x=dff.x, y=dff.y, type="bar")]})
						)
	return children

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