title: Dash: Graphing from dictionary of dataframes
body: <p>I have a dictionary, <code>dict_main</code>, of dataframes that I am trying to plot in Dash. I have two dropdowns that allow the user to select firstly the dataframe from within the dictionary, then secondly the columns within those dataframes. This works well and I now want to put the selected columns into a graph and I can't seem to get this working. This is my first time using Dash, sorry if this is obvious. So far I have;</p>
  
  <pre><code>rpm = list(dict_main.keys())
  channels = dict_main[rpm[0]]
  
  app.layout = html.Div(
      [
          html.Div([
          dcc.Dropdown(
              id='rpm-dropdown',
              options=[{'label':speed, 'value':speed} for speed in rpm],
              value=list(dict_main.keys())[0],
              multi=True,
              searchable=False
              ),
              ],style={'width': '20%', 'display': 'inline-block'}),
          html.Div([
          dcc.Dropdown(
              id='channel-dropdown',
              multi=True
              ),
              ],style={'width': '20%', 'display': 'inline-block'}
          ),
      ]
  )
  
  @app.callback(
      dash.dependencies.Output('channel-dropdown', 'options'),
      [dash.dependencies.Input('rpm-dropdown', 'value')]
  )
  def update_date_dropdown(speed):
      return [{'label': i, 'value': i} for i in dict_main[speed]]
  
  
  if __name__ == '__main__':
      app.run_server()
  </code></pre>
  
  <p>I've tried this;</p>
  
  <pre><code>html.Div([
      dcc.Graph(
          id='Main-Graph',
          figure=go.Figure(
              data=[
                  go.Scatter(
                      x=rpm, y=channels
                  )
              ]
          )
      ),
      ], style={'width': '98%', 'display': 'inline-block'}
      )
  </code></pre>
  
  <p>With a callback of;</p>
  
  <pre><code>@app.callback(
      dash.dependencies.Output('Main-Graph', 'figure'),
      [dash.dependencies.Input('channel-dropdown', 'value')])
  def updateGraph(channels):
      return[{'label': i, 'value': i} for i in dict_main[channels]]
  </code></pre>
  
  <p>This returns a graph that will not update with a change in dropdown selection. It also appears with a table, which is something I didn't expect. Any help to get this graph working would be really appreciatted. Thanks.</p>
  
  <p>UPDATE:</p>
  
  <p>This works;</p>
  
  <pre><code>rpm = list(dict_main.keys())
  channels = dict_main[rpm[0]]
  
  app.layout = html.Div(
      [
          html.Div([
              dcc.Dropdown(
                  id='rpm-dropdown',
                  options=[{'label': speed, 'value': speed} for speed in rpm],
                  value=list(dict_main.keys())[0],
                  searchable=False
              ),
          ], style={'width': '44%', 'display': 'inline-block'}),
          html.Div([
              dcc.Dropdown(
                  id='channel-dropdown',
                  multi=True
              ),
          ], style={'width': '44%', 'display': 'inline-block'}
          ),
          html.Div([
              dcc.Graph(
                  id='Main-Graph',
              ),
          ], style={'width': '98%', 'display': 'inline-block'}
          )
      ]
  )
  
  @app.callback(
      Output('channel-dropdown', 'options'),
      [Input('rpm-dropdown', 'value')])
  def update_date_dropdown(speed):
      return [{'label': i, 'value': i} for i in dict_main[speed]]
  
  @app.callback(
      Output('Main-Graph', 'figure'),
      [Input('channel-dropdown', 'value')],
      [State('rpm-dropdown', 'value')])
  def updateGraph(channels, speed):
      if channels:
  
          return go.Figure(data=[go.Scatter(x=dict_main[speed].index, y=dict_main[speed][i]) for i in channels])
      else:
          return go.Figure(data=[])
  
  if __name__ == '__main__':
      app.run_server()
  </code></pre>