hello,
i have a problem with integrating sunburst pie in my dash app, the pie is displaying well alone but nothing happens when i put it in the app
this is my code
app = dash.Dash()
app.title=‘Dash DataViz Project’
fig = go.Figure()
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
Bootstrap CSS
#app = dash.Dash(name,external_stylesheets=[‘https://codepen.io/amyoshino/pen/jzXypZ.css’])
app.layout = html.Div(
##############################################################################################################
html.Div([
html.Div([
html.H1(children='TBD °2 : Offres de soins',
className='nine columns'),
html.Img(
#src="../Bureau/a1.png",
#src='data:image/png;base64,{}'.format(encoded_image),
src="http://test.fulcrumanalytics.com/wp-content/uploads/2015/10/Fulcrum-logo_840X144.png",
className='three columns',
style={
'height': '11%',
'width': '11%',
'float': 'right',
'position': 'relative',
'margin-top': 20,
'margin-right': 20,},),
#html.Div(
# children="TBD °2 : Offres de soins",
# className='nine columns'),
], className="row"),
#----------------------------------------------------------------------------------------------------
html.Div([
html.Div([
#"Choisir votre Axe d'Analyse (Gouvernorat) :",
dcc.Dropdown(
id='type_axe2',
options=[
# IV M IV A M IV D M IV D PM! DAT CE CI
{'label': 'Typologie', 'value': 'Typologie'},
{'label': 'I', 'value': 'I'},
{'label': 'II', 'value': 'II'},
{'label': 'III', 'value': 'III'},
{'label': 'III M', 'value': 'III M'},
{'label': 'IV', 'value': 'IV'},
{'label': 'IV M', 'value': 'IV M'},
{'label': 'IV A M', 'value': 'IV A M'},
{'label': 'IV D M', 'value': 'IV D M'},
{'label': 'IV D', 'value': 'IV D'},
{'label': 'PM', 'value': 'PM'},
{'label': 'DAT', 'value': 'DAT'},
{'label': 'CE', 'value': 'CE'},
{'label': 'CI', 'value': 'CI'},
],
value='Typologie',
multi=False,
clearable=False,
style={"width": "100%"})
],className='three columns'),
html.Div([
#"Choisir votre Axe d'Analyse (Gouvernorat) :",
dcc.Dropdown(
id='my_dropdown_ligne_axe2',
options=[
# IV M IV A M IV D M IV D PM! DAT CE CI
{'label': 'Ligne', 'value': 'Ligne'},
],
value='Ligne',
multi=False,
clearable=False,
style={"width": "100%"}
)
],className='three columns'),
], className='row'),
#-------------------------------------------------------------------------------------------------
html.Div([
# html.Div([
dcc.Graph(
id='pie_typologie',
figure=fig,
animate=True,
config=dict(displayModeBar=False),
)
#],className="twelve columns")
],className='row ')
#-------------------------------------------------------------------------------------------------
],) #className='nine columns offset-by-one')
,
style = {‘padding’ : ‘50px’ ,‘backgroundColor’ : ‘#EFEFEF’},)
#----------------------------------------------------------------------------------------------------
@app.callback(
Output(component_id=‘pie_typologie’, component_property=‘figure’),
[Input(component_id=‘type_axe2’, component_property=‘value’)]
)
def pie_typologie(type_axe2):
centre_typologie=pd.read_csv(“centre_typologie.csv”,index_col=0)
levels = ['gouvernorat','region'] # levels used for the hierarchical chart
color_columns = ['TOTAL','TOTAL']
value_column = 'TOTAL'
if type_axe2!='Typologie' :
color_columns[0]=type_axe2
def build_hierarchical_dataframe(df, levels, value_column, color_columns=None):
#al=df[value_column].sum()
df_all_trees = pd.DataFrame(columns=['id', 'parent', 'value', 'color'])
for i, level in enumerate(levels):
df_tree = pd.DataFrame(columns=['id', 'parent', 'value', 'color'])
dfg = df.groupby(levels[i:]).sum()
dfg = dfg.reset_index()
df_tree['id'] = dfg[level].copy()
if i < len(levels) - 1:
df_tree['parent'] = dfg[levels[i+1]].copy()
else:
df_tree['parent'] = 'total'
df_tree['value'] = dfg[value_column]
df_tree['color'] = dfg[color_columns]
df_all_trees = df_all_trees.append(df_tree, ignore_index=True)
total = pd.Series(dict(id='total', parent='',value=df[value_column].sum(),color=df[color_columns[0]].sum() ))
df_all_trees = df_all_trees.append(total, ignore_index=True)
return df_all_trees
df_all_trees = build_hierarchical_dataframe(centre_typologie, levels, value_column, color_columns)
average_score =centre_typologie['I'].sum() / centre_typologie['TOTAL'].sum()
fig = make_subplots(1, 2, specs=[[{"type": "domain"}, {"type": "domain"}]],)
fig.add_trace(
go.Sunburst(
labels=df_all_trees['id'],
parents=df_all_trees['parent'],
values=df_all_trees['value'],
branchvalues='total',
marker=dict(
colors=df_all_trees['color'],
colorscale='RdBu',
cmid=average_score),
hovertemplate='<b>%{label} </b> <br> Nombre de centres de soinsNombre de centres de soins: %{value}<br> type I: %{color:.2f}',
name=''
), 1, 1)
fig.add_trace(
go.Sunburst(
labels=df_all_trees['id'],
parents=df_all_trees['parent'],
values=df_all_trees['value'],
branchvalues='total',
marker=dict(
colors=df_all_trees['color'],
colorscale='RdBu',
cmid=average_score),
hovertemplate='<b>%{label} </b> <br> Nombre de centres de soins: %{value}<br> type I: %{color:.2f}',
maxdepth=2
), 1, 2)
fig.update_layout(margin=dict(t=10, b=10, r=10, l=10))
return(fig)
#fig.show()
#----------------------------------------------------------------------------------------
#----------------------------------------------------------------------------------------------
###############################################################################################################
if name == ‘main’:
app.run_server()