@nes wrote:

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()

Posts: 1

Participants: 1

Read full topic