I want to select different graphs with my drop down but I have no idea how to do it

Dash Python
1

tml.Div(
id=“graph-container”,
children=[
html.P(id=“chart-selector”, children=“Select graph:”),
dcc.Dropdown(

                        options=[
                            {
                                "label": "Bar graph of China and Rest of the World",
                                "value": "graph_5",
                            },
                            {
                                "label": "Time Series graph of Corona Virus outbreak in China",
                                "value": "graph-0",
                            },
                            {
                                "label": "TIme series graph of confirmed cases in China",
                                "value": "graph-1",
                            },
                            {
                                "label": "Time series graph of Deaths in China",
                                "value": "graph-2",
                            },
                            {
                                "label": "Time series graph of Recovered in China",
                                "value": "graph-3",
                            },
                            {
                                "label": "Time series graph of Fatality Rate in China",
                                "value": "graph-4",
                            },
                        ],
                        id="chart-dropdown",
                    )

how to make such a callback function

2

Hi @adw! Thanks for your interest in Dash. I think the following code should help you get started. The key concept to understand is that a Dash callback function can have both inputs and outputs.

For your use case, the input to the callback is the value of the dropdown while the output is the actual graph. You might want to take a look at the documentation for callbacks at https://dash.plot.ly/getting-started-part-2

Hope this helps!

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

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

graphs_list = [
    "graph1",
    "graph2",
]

graph1 = {
        "data": [
            {"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
            {"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
        ],
        "layout": {"title": "Dash Data Visualization"},
    }

graph2 = {
        "data": [
            {"x": [9, 7, 2], "y": [4, 1, 2], "type": "line", "name": "SF"},
            {"x": [10, 20, 34], "y": [2, 4, 5], "type": "scatter", "name": u"Montréal"},
        ],
        "layout": {"title": "Dash Data Visualization"},
    }

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[{"label": i, "value": i} for i in graphs_list],
            value=graphs_list[0],
        ),
        dcc.Graph(id="graph"),
    ]
)


@app.callback(
    Output(component_id="graph", component_property="figure"),
    [Input(component_id="dropdown", component_property="value")],
)
def update_output_div(input_value):
    
    if input_value == "graph1":
        return graph1
    
    if input_value == "graph2":
        return graph2


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

Thanx a lot, finally I did it for all my graphs.
One more question, how to name the labels?