CODEWITHSUNDEEP
pythonplotly-dash
Camue
Camue

Reputation: 481

updating a Dash plot with drop-down filters

I am looking to have 2 dropdowns (one for dates and another sect_id) to filter and update the plot on my dashboard and I am feeling quite confused about the callback and function to create. Here are my data :

  sect_id   Date    Measure1  Measure2  Measure3  Total %
  L19801  01-01-17    12        65        0       33
  L19801  01-01-17    19        81        7       45
  M18803  01-01-17    15        85        7       45
  M19803  01-01-17    20        83        2       52
  xxxxxx  xxxxxxx     xx        xx        x       xx
  xxxxxx  xxxxxxx     xx        xx        x       xx

I am looking to scatter Measure1 against Measure3 and have two dropdowns. here what I have done:

  year_options = []
  for date in df['Date'].unique():
           date_options.append({'label':str(date),'value':date})

  app=dash.Dash()


app.layout = html.Div([
dcc.Graph(id='graph'),
dcc.Dropdown(id='date_picker',options=date_options,value=df['Date'][1])])

I am currently trying with only one dropdown (the date) and I am very confused about what I have done the layout, the dropdown and the callback.

Upvotes: 0

Views: 3169

Answers (1)

aGekko
aGekko

Reputation: 51

Layout is the contents of your dashboard, your graph and your dropdown(s). Callbacks are interactions between said components. Please refer to the Dash documentation: For basic info about layout and for callbacks

You can create callbacks fairly simply, just define a function and add an callback decorator to them like this:

import plotly.graph_objs as go
from dash.dependencies import Input, Output

@app.callback( 
    # What does the callback change? Right now we want to change the figure of the graph.
    # You can assign only one callback for each property of each component.
Output(component_id='graph', component_property='figure'), 

    # Any components that modify the outcome of the callback
    # (sect_id picker should go here as well)
    [Input(component_id='date_picker', component_property='value')]) 
def create_graph_figure(date_picker_value):
    # you should define a function here that returns your plot
    df_filtered = df[df['Date'] == date_picker_value]
    return go.Scatter(x=df['Measure1'], y=df['Measure2'])

Upvotes: 2

Related Questions