Plot a graph based on the value from the dropdown

Dash Python
1

I am trying to plot a matplotlib graph after based on the value chosen from the dropdown. I have made the dropdown and the plots are also ready for the values but i dont know how to connect both of them together.

Following is the code of the dropdown:

app.layout = html.Div([
    dcc.Dropdown(
        id='first-dropdown',
        options = [
            {'label': 'Chest Pain', 'value': 'cp'},
            {'label': 'Resting Blood Pressure', 'value': 'trestbps'},
            {'label': 'Serum Cholestrol in mg/dl', 'value': 'chol'},
            {'label': 'Fasting Blood Pressure', 'value': 'fbs'},
            {'label': 'Resting electrocardiographic results', 'value': 'restecg'},
            {'label': 'Maximum heart rate achieved', 'value': 'thalach'},
            {'label': 'Exercise induced angina', 'value': 'exang'},
            {'label': 'Old Peak', 'value': 'oldpeak'},
            {'label': 'Slope of the peak exercise ST segment', 'value': 'slope'},
            {'label': 'Number of major vessels (0-3) colored by flourosopy', 'value': 'ca'},
            {'label': 'Thalassemia', 'value': 'thal'}
        ],
        value= 'thalach'
    )
])

and for each value in the dropdown i have a separate function which returns a plot. For eg:
What i am trying to do is that if the Label ‘Max Heart Rate Achieved’ is selected from the dropdown whose value is ‘thalach’. I have a function called plotThalach which returns a plot like this:

def plotThalach(df):
    df_men = df[df['sex'] == 1.0]
    df_women = df[df['sex'] == 0.0]
    plt.figure(figsize=(20, 8))
    plt.bar(df_men['age'] + 0.00, df_men['thalach'], color='b', width=0.25, label='Men')
    plt.bar(df_women['age'] + 0.25, df_women['thalach'], color='r', width=0.25, label='Women')
    plt.legend(loc='upper right')
    plt.xlabel("Age")
    plt.ylabel("Max Heart Rate")
    plt.title("Age vs Max Heart Rate")
    return plt

Now how do I connect both of these in such a way that when a value is selected from the dropdown my function gets called and the plot gets displayed on the screen?

2

Hello @jainakhil93 and welcome to the plot.ly Dash forums.

What you need is a container to throw in the plot you want to display! Let me try and elaborate…

You already have a dropdown and a nice callback to handle user selections, awesome. What you are missing is to add in your app.layout something like:

html.Div(id=figure_display)

, such that your app.layout will look like this:

app.layout = html.Div([
    dcc.Dropdown(
        id='first-dropdown',
        options = [
            {'label': 'Chest Pain', 'value': 'cp'},
            {'label': 'Resting Blood Pressure', 'value': 'trestbps'},
            {'label': 'Serum Cholestrol in mg/dl', 'value': 'chol'},
            {'label': 'Fasting Blood Pressure', 'value': 'fbs'},
            {'label': 'Resting electrocardiographic results', 'value': 'restecg'},
            {'label': 'Maximum heart rate achieved', 'value': 'thalach'},
            {'label': 'Exercise induced angina', 'value': 'exang'},
            {'label': 'Old Peak', 'value': 'oldpeak'},
            {'label': 'Slope of the peak exercise ST segment', 'value': 'slope'},
            {'label': 'Number of major vessels (0-3) colored by flourosopy', 'value': 'ca'},
            {'label': 'Thalassemia', 'value': 'thal'}
        ],
        value= 'thalach'
    ),
    html.Div(id=figure_display) 'THIS IS WHERE I ADDED SOMETHING'
])

, and hook it up with your dropdown callback which should look somewhat like this:

@app.callback(
   Output('figure_display', 'figure') #So I specify that I want to sent stuff to the html.Div container I just defined, and that will be a figure...
   [Input('first-dropdown', 'value')]
def display_graph_selector(value)
   graph = []
   if value == 'thalach':
      graph.append(plotThalach(df))
   elif value == 'cp':
      grpah.append(plotCP(df)):
#(and so on and so on)
   return graph

Using this callback the value selected in your dropdown determines which plot is being sent into the ‘graph’ variable, which is then being sent to the html.Div container which can then show the actual graph.
Hope this helps. :slight_smile: