# Trouble Plotting Graph

**URL:** <https://community.plotly.com/t/trouble-plotting-graph/9668>\
**Category:** Dash Python\
**Created:** [April 13, 2018, 2:42pm UTC](https://community.plotly.com/t/trouble-plotting-graph/9668 "2018-04-13T14:42:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dz33](https://avatars.discourse-cdn.com/v4/letter/d/858c86/32.png) [@dz33](https://community.plotly.com/u/dz33)\
**Post date:** [April 13, 2018, 2:42pm UTC](https://community.plotly.com/t/trouble-plotting-graph/9668/1 "2018-04-13T14:42:00Z")

</div>

Hello- Trying to create a bar graph from a dictionary of values. I am having trouble getting the graph to show on Dash properly. I’ve tried a few different things to get it formatted correctly but no such luck. Any suggestion on what I may be doing wrong in my code to get the graph to appear? How do I loop over a dictionary so that for each drop down menu item a bar chart will appear?

```
 import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from pandas_datareader.data import DataReader
import time
from collections import deque
import plotly.graph_objs as go

df=pd.read_csv(‘factors.csv’)

df_port=df[[‘Factor’,‘PortfolioExposure’]]

app=dash.Dash()
app.layout = html.Div([
html.Div([
html.H2(‘Factor Exposures’,
style={‘float’: ‘left’,
}),
]),
dcc.Dropdown(id=‘Factor’,
options=[{‘label’: s[0], ‘value’: str(s[1])}
for s in zip(df_port.Factor, df_port.PortfolioExposure)],
value=[‘Volatility’,‘Leverage’],
multi=True),
html.Div(children=html.Div(id=‘graphs’))], className=‘row’)

@app.callback(
dash.dependencies.Output(‘graphs’,‘children’),
[dash.dependencies.Input(‘Factor’, ‘value’)]
#events=[dash.dependencies.Event(‘graph-update’, ‘interval’)]
)
def update_graph(df_port):
graphs = []

for i in df_port:
data = go.Bar(
x=df_port.Factor,
y=df_port.PortfolioExposure,
name='Betas'
)
graphs.append(html.Div(dcc.Graph(
    id=factors,
    animate=True,
    figure={'data': [data],'layout' : go.Layout(xaxis={'title':'Factor'},
                                                yaxis={'title':'Beta'},
                                                margin={'l':50,'r':1,'t':45,'b':1},
                                                title='{}'.format(factors))})))

return graphs
```

---

<div class="post-metadata">

**Author:** ![Ola](https://avatars.discourse-cdn.com/v4/letter/o/dbc845/32.png) [@Ola](https://community.plotly.com/u/Ola)\
**Post date:** [April 18, 2018, 9:14am UTC](https://community.plotly.com/t/trouble-plotting-graph/9668/2 "2018-04-18T09:14:43Z")

</div>

may i ask why you’ve got `dcc.Graphs` in the return function, and not in the layout?  
i would have something like

```
 import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from pandas_datareader.data import DataReader
import time
from collections import deque
import plotly.graph_objs as go

df=pd.read_csv(‘factors.csv’)

df_port=df[[‘Factor’,‘PortfolioExposure’]]

app=dash.Dash()
app.layout = html.Div([
html.Div([
html.H2(‘Factor Exposures’,
style={‘float’: ‘left’,
}),
]),
dcc.Dropdown(id=‘Factor’,
options=[{‘label’: s[0], ‘value’: str(s[1])}
for s in zip(df_port.Factor, df_port.PortfolioExposure)],
value=[‘Volatility’,‘Leverage’],
multi=True),
dcc.Graph(style={'height': 500},
          id='graphs'),)], className=‘row’)

@app.callback(
dash.dependencies.Output(‘graphs’,‘figure’),
[dash.dependencies.Input(‘Factor’, ‘value’)]
#events=[dash.dependencies.Event(‘graph-update’, ‘interval’)]
)
def update_graph(df_port):

```

data = []  
for i in df\_port:  
data.append( go.Bar(  
x=df\_port.Factor,  
y=df\_port.PortfolioExposure,  
name=‘Betas’  
))

```
    figure={'data': data,

```

‘layout’ : go.Layout(xaxis={‘title’:‘Factor’},  
yaxis={‘title’:‘Beta’},  
margin={‘l’:50,‘r’:1,‘t’:45,‘b’:1},  
title=’{}’.format(factors))})))

```
return figure
```