Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
jupyter-naas
GitHub Repository: jupyter-naas/awesome-notebooks
 Path: blob/master/Dash/Dash_Create_Dropdown_Callback.ipynb
2973 views
Kernel: Python 3

Dash.png

Dash - Create Dropdown Callback

Give Feedback | Bug report

Tags: #dashboard #plotly #dash #naas #asset #analytics #dropdown #callback #bootstrap

Last update: 2023-04-12 (Created: 2022-08-18)

Create a basic dropdown, provide options and a value to dcc.Dropdown in that order.

Input

Import libraries

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbcs
from dash import html, Input, Output, State, dcc

Setup Variables

DASH_PORT = 8050

Model

Create dropdown

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

app.layout = html.Div(
    [
        dcc.Dropdown(["NYC", "MTL", "SF"], "NYC", id="demo-dropdown"),
        html.Div(id="dd-output-container"),
    ]
)


@app.callback(
    Output("dd-output-container", "children"), Input("demo-dropdown", "value")
)
def update_output(value):
    return f"You have selected {value}"

Output

Generate URL and show logs

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")