title: Plotly-Dash App with Interactive buttons and Dropdown menu
body: <p>I am trying to build a Dash app that will support both a drop down menu for each of NY's 27 districts as well as an interactive bar chart.  The dataframe looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/bZxkg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bZxkg.png" alt="enter image description here"></a></p>
  
  <p>I have written the following code which I modified from this <a href="https://github.com/chris1610/pbpython/blob/master/code/stacked_bar_interactive.py" rel="nofollow noreferrer">repo</a>:</p>
  
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import plotly.graph_objs as go
  import pandas as pd
  
  # Read in the data 
  df = districts_change.drop(['TOTAL'], axis=1)
  
  # Get a list of all the districts
  districts = districts_change['DISTRICT'].unique()
  
  # Create the app
  app = dash.Dash()
  
  # Populate the layout with HTML and graph components
  app.layout = html.Div([
      html.H2("New York Congressional Districts"),
      html.Div(
          [
              dcc.Dropdown(
                  id="DISTRICT",
                  options=[{
                      'label': i,
                      'value': i
                  } for i in districts],
                  value='All Districts'),
          ],
          style={'width': '25%',
                 'display': 'inline-block'}),
      dcc.Graph(id='funnel-graph'),
  ])
  
  
  # Add the callbacks to support the interactive componets
  @app.callback(
      dash.dependencies.Output('funnel-graph', 'figure'),
      [dash.dependencies.Input('DISTRICT', 'value')])
  def update_graph(Districts):
      if Districts == "All Districts":
          df_plot = df.copy()
      else:
          df_plot = df[df['DISTRICT'] == Districts]
  
      pv = pd.pivot_table(
          df_plot,
          index=['DISTRICT'],
          columns=["Year"],
          values=df_plot[['DEM', 'REP', 'CON', 'WOR', 'IND', 
                          'GRE', 'WEP', 'REF', 'OTH', 'BLANK']],
          aggfunc=sum,
          fill_value=0)
  
  #     trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'declined')], name='Declined')
  
      trace1 = go.Bar(x=pv.index, y=districts_change[('DEM')], name='DEM')
      trace2 = go.Bar(x=pv.index, y=districts_change[('REP')], name='REP')
      trace3 = go.Bar(x=pv.index, y=districts_change[('CON')], name='CON')
      trace4 = go.Bar(x=pv.index, y=districts_change[('WOR')], name='WOR')
      trace5 = go.Bar(x=pv.index, y=districts_change[('IND')], name='IND')
      trace6 = go.Bar(x=pv.index, y=districts_change[('GRE')], name='GRE')
      trace7 = go.Bar(x=pv.index, y=districts_change[('WEP')], name='WEP')
      trace8 = go.Bar(x=pv.index, y=districts_change[('REF')], name='REF')
      trace9 = go.Bar(x=pv.index, y=districts_change[('OTH')], name='OTH')
      trace10 = go.Bar(x=pv.index, y=districts_change[('BLANK')], name='BLANK')
  
  
      return {
          'data': [trace1, trace2, trace3, trace4, trace5, 
                       trace6, trace7, trace8, trace9, trace10],
          'layout':
          go.Layout(
              title='District {}'.format(Districts),
              barmode='group')
      }
  
  
  if __name__ == '__main__':
      app.server.run(port=8000, host='127.0.0.1')
  </code></pre>
  
  <p>The app runs locally and displays the drop down menu, however, I can't get the x-axis to show the years (2015-2018) instead of the districts themselves.</p>
  
  <p>I successfully got one district running <a href="https://thedatasleuth.github.io/python/2018/09/12/2018-Midterm-Election-New-York-Congressional-Districts.html" rel="nofollow noreferrer">on my blog</a> but having trouble adding the drop down component as well.</p>