Hello,
I am reading a dataframe where I have stocks and I am grouping them based on their respective sectors. I want to read from a dropdown menu the sectors and then plot a line of indicators showing the performance of the sector and all of the other stocks in this sector. I have successfully created a dropdown menu to read the sector and I am reading through it. I have also managed to plot the indicators, however, I believe my graphs are displayed on top of each other. I say this as I can see only the indicator from the last stock of each group. I believe I need to create the divs dynamically. I have attached the code below (apologies for the code, I am a beginner). Can anyone help me?
app.layout = html.Div(children=[
html.H1(children='Hello '),
html.H4(children='''
Performance of Your Stocks:
'''),
html.Div([dcc.Dropdown(
id='Chosen_sector',
options = [{'label': sector, 'value': sector} for sector in gauges_data.sort_values('sector')['sector'].unique()],
# options = [{'label': sector, 'value': sector} for i,sector in enumerate(gauges_data['sector'].unique())],
placeholder='Select a sector...',
multi = False,
)]),
html.Div(id='sector_indicator_plots'),
])
@app.callback(dash.dependencies.Output(‘sector_indicator_plots’, ‘children’),
[dash.dependencies.Input('Chosen_sector', 'value')])
def generate_sector_indicators(selected):
print(selected)
df = gauges_data[gauges_data['sector'] == selected]
columns = [0]*len(gauges_data['sector'])
gain_loss = round((df["price"].sum()-df["value"].sum())/df["value"].sum() * 100,2)
if gain_loss >= 0:
color = "green"
else:
color = "red"
# First subplot will be the overall sector
trace = go.Figure()
trace.add_trace(go.Indicator(
mode = "number+gauge+delta",
delta = {'reference': gain_loss},
value = gain_loss,
number = {'suffix': "%"},
gauge = {
'axis' : {'ticksuffix': "%"},
'bar' : {'color': color}
},
domain = {'x': [0.1, 0.9], 'y': [0.1, 0.7]},
title = {'text': selected}
))
# Built subplots for all the stocks per sector
cols = 1
for index, row in df.iterrows():
print(row['name'])
gain_loss = round((row["price"]-row["value"])/row["value"] * 100,2)
if gain_loss >= 0:
color = "green"
else:
color = "red"
cols +=1
trace.add_trace(go.Indicator(
mode = "number+gauge+delta",
delta = {'reference': gain_loss},
value = gain_loss,
number = {'suffix': "%"},
gauge = {
'axis' : {'ticksuffix': "%"},
'bar' : {'color': color}
},
domain = {'x': [0, 1], 'y': [0.1, 0.6]},
title = {'text': row["name"]}
))
print(cols)
print(trace['data'][0])
print(trace['data'][1])
for i in range(cols):
print(i)
fig = html.Div(dcc.Graph(
id='graph_'+format(i),
figure={
'data': [trace['data'][i]],
'layout': {
'height': 400,
'width': 400,}
}))
return fig