title: Create a dash graph with dropdown menu
body: <p>Hi I have an excel file that looks like this where there are three diferent servers (A, B, C).</p>
  
  <p><a href="https://i.stack.imgur.com/uCfXL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uCfXL.png" alt="enter image description here"></a></p>
  
  <p>I am trying to build a dash app that has a dropdown menu which will make it possible to select the desired server and display the graph for CPU Usage and Memory Usage for each server.</p>
  
  <p>I have tried to modify the following code from the official Dash website. Data can be found on <a href="https://plotly.github.io/datasets/country_indicators.csv" rel="nofollow noreferrer">https://plotly.github.io/datasets/country_indicators.csv</a></p>
  
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  
  import pandas as pd
  
  external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  
  app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
  
  df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
  
  available_indicators = df['Indicator Name'].unique()
  
  app.layout = html.Div([
      html.Div([
  
          html.Div([
              dcc.Dropdown(
                  id='xaxis-column',
                  options=[{'label': i, 'value': i} for i in available_indicators],
                  value='Fertility rate, total (births per woman)'
              ),
              dcc.RadioItems(
                  id='xaxis-type',
                  options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                  value='Linear',
                  labelStyle={'display': 'inline-block'}
              )
          ],
          style={'width': '48%', 'display': 'inline-block'}),
  
          html.Div([
              dcc.Dropdown(
                  id='yaxis-column',
                  options=[{'label': i, 'value': i} for i in available_indicators],
                  value='Life expectancy at birth, total (years)'
              ),
              dcc.RadioItems(
                  id='yaxis-type',
                  options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                  value='Linear',
                  labelStyle={'display': 'inline-block'}
              )
          ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
      ]),
  
      dcc.Graph(id='indicator-graphic'),
  
      dcc.Slider(
          id='year--slider',
          min=df['Year'].min(),
          max=df['Year'].max(),
          value=df['Year'].max(),
          marks={str(year): str(year) for year in df['Year'].unique()},
          step=None
      )
  ])
  
  @app.callback(
      Output('indicator-graphic', 'figure'),
      [Input('xaxis-column', 'value'),
       Input('yaxis-column', 'value'),
       Input('xaxis-type', 'value'),
       Input('yaxis-type', 'value'),
       Input('year--slider', 'value')])
  def update_graph(xaxis_column_name, yaxis_column_name,
                   xaxis_type, yaxis_type,
                   year_value):
      dff = df[df['Year'] == year_value]
  
      return {
          'data': [dict(
              x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
              y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
              text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
              mode='markers',
              marker={
                  'size': 15,
                  'opacity': 0.5,
                  'line': {'width': 0.5, 'color': 'white'}
              }
          )],
          'layout': dict(
              xaxis={
                  'title': xaxis_column_name,
                  'type': 'linear' if xaxis_type == 'Linear' else 'log'
              },
              yaxis={
                  'title': yaxis_column_name,
                  'type': 'linear' if yaxis_type == 'Linear' else 'log'
              },
              margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
              hovermode='closest'
          )
      }
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>
  
  <p>The ouput of this code gives an output similar to mine except that the second drop down menu and the slicer would not be needed
  <a href="https://i.stack.imgur.com/1Qs7g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Qs7g.png" alt="enter image description here"></a>
  I am struggling to understand how to modify the code to be able to apply to mine. Any help would be welcome. Thank you.</p>