Hello.
I made an app that displays the charts added by the dropdown menu. Works fine when I want to display 2 charts, but when I add a third chart and more, charts are displayed incorrectly.
Like this:
How can i fix this?
Code below:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH
import plotly.graph_objs as go
import numpy as np
import pandas as pd
import re
url = 'https://github.com/PerczynskiAdam/Value-investing-dash-app/blob/master/Indi_db/DB.csv'
df = pd.read_csv(url, index_col = 0, encoding = 'utf_8_sig')
sector_dict = {'GPW Informatyka': ['11B', 'ABS', 'ACP', 'ALL', 'ART', 'ASE', 'ATD', 'BBT', 'BCM',
'CDR', 'CIG', 'CMP', 'CMR', 'CTG', 'DAT', 'DTR', 'ELZ', 'GOP',
'IFI', 'LRK', 'LSI', 'LVC', 'MDG', 'NTT', 'OPM', 'PCG', 'PLW',
'PRD', 'PSW', 'QNT', 'R22', 'SGN', 'SME', 'SVRS', 'TBL', 'TEN',
'TLX', 'U2K', 'ULG', 'VVD', 'WAS', 'XTP'],
'GPW Telekomunikacja': ['ATM', 'CPS', 'MTL', 'MXC', 'NET', 'OPL', 'PLY']}
sectors = list(sector_dict.keys())
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Tabs(children = [
dcc.Tab(label = 'Analiza branży', children = [#
html.Div([
html.Div([
html.H2(children = 'Branża:',
style = {
'padding-left': '2.5%'
},
className = 'two columns'
),
dcc.Dropdown(
id = 'sector',
options = [{'label': i, 'value': i} for i in sectors],
value = sectors[0],
className = 'ten columns',
style = {
'margin-top': '1.2rem',
'padding-left': '1%',
'display': 'inline-block',
'width': '45%'
}
)
], className = 'row', style = {
'margin-top': '0.5rem',
'background-color':'#939598'
}
),
html.Div([
dcc.Dropdown(
id = 'dynamic-indi',
options = [{'label': i, 'value':i} for i in df.columns[1:]],
value = ['Cena / Wartość księgowa', 'Cena / Zysk', 'ROE', 'Marża zysku operacyjnego', 'Zadłużenie ogólne'],
multi = True
)
], style = {
'margin-top': '0.5rem',
'display': 'inline-block'
}
),
html.Div(
id = 'container-tab1',
children = []
)
], className = 'ten columns offset-by-one')
], selected_style = {
'color': 'black',
'box-shadow': '2px 4px #FF851B',
'border-left': '1px solid #F1F2F2',
'border-right': '1px solid #F1F2F2',
'border-top': '1px solid #F1F2F2'
}
),
])
])
def create_fig(indi, sect):
filtered_df = df[df['Ticker'].isin(sector_dict[sect])]
grouped_df = filtered_df.groupby('Ticker').tail(1)[['Ticker', '{}'.format(indi)]].dropna()#choose the latest data depends of indicator and drop rows with nan value
grouped_df = grouped_df.sort_values('{}'.format(indi))
trace_bar = go.Bar(
x = grouped_df['Ticker'],
y = grouped_df['{}'.format(indi)],
hovertext = grouped_df.index,#That show date of used data to plot bar
showlegend = False,
marker_color = '#FF851B'#Color of Bars
)
trace_line = go.Scatter(
x = [grouped_df['Ticker'][-1], grouped_df['Ticker'][0]],
y = [grouped_df['{}'.format(indi)].mean(), grouped_df['{}'.format(indi)].mean()],
mode = 'lines',
name = 'Średnia',
line = dict(color = '#111111', width = 3)
)
layout = dict(
title = "{}".format(indi),
legend = dict(
x = 0.4,
y = 1.15),
margin = dict(
l = 25,
r = 25
),
xaxis = dict(
tickangle = 90,
tickfont = dict(
size = 10
)
),
paper_bgcolor = '#F2F8FD',
plot_bgcolor = '#F2F4F6'
)
return {
'data': [trace_bar, trace_line],
'layout': layout
}
@app.callback(
Output('container-tab1', 'children'),#where and what to change
[Input('dynamic-indi', 'value'),
Input('sector', 'value')]#where and how its starting
)
#function to support callback
def update_graph(indicators, sect):
graphs = []
if len(indicators) < 2:
class_choice = 'twelve columns'
else:
class_choice = 'six columns'
for indi in indicators:
graphs.append(html.Div([
dcc.Graph(
figure = create_fig(indi, sect),
style ={
'margin-bottom': '0.5rem'
}
)], className = class_choice)
)
return graphs
if __name__ == '__main__':
app.run_server(debug=True)
Thanks for ur answers 