Dash multiple pages dcc.graph does not update the graph with the drop-down menu filter

📊 Plotly Python
1

I try to create a dash with multiple urls, it works fine, but when adding a drop-down menu for the graphics. The filters do not work and the dcc.graph is not updated.

import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import pandas as pd
from dash.dependencies import Input, Output

from utilsv0 import Header

from app import app

encuestas_1 = pd.read_csv(‘https://raw.githubusercontent.com/Corderodedios182/Dashbord_UNAM_DerechoAnimal/master/datos/encuestas.csv’)

#General
Pregunta_1 = encuestas_1.loc[(encuestas_1.Pregunta == 1) ,‘Respuesta_texto’].value_counts().reset_index()

######################

#General
conteo = encuestas_1.Facultad.value_counts().reset_index()
conteo[‘encuestados’] = conteo.Facultad/12
conteo.columns = [‘Facultad’,‘Conteo’,‘encuestados’]

#Options
Facultades_0 = conteo.loc[:,‘Facultad’]
Facultades = [{‘label’:i,‘value’:i} for i in Facultades_0]

layout = html.Div([
html.Div([Header(app)]),
#page 1
html.Div([
# Row 3
html.Div([
html.Div([
html.H6(“Tenemos los resultados siguientes”,style={‘text-align’: ‘center’}),
html.Br(),
html.P(“Es interesante ver como la mayorĂ­a nos preocupamos por los animales, pero lamentablemente existe una gran desinformaciĂłn sobre los procesos judiciales, de igual forma nuestras autoridades no ven de interĂ©s los derechos de los animales”)
],className=“product”)
],
className=“row”),
html.Div([
dcc.Dropdown(id=‘tabs’,
options = Facultades,
multi = False),

                ]),
            html.Div(id='graph')
                ],className = "sub_page")],className="page")

########################
#Dash Layout#
########################
def filtro(facultad = ‘Derecho’):

encuestas = pd.read_csv('https://raw.githubusercontent.com/Corderodedios182/Dashbord_UNAM_DerechoAnimal/master/datos/encuestas.csv')

encuestas = encuestas.loc[(encuestas.Pregunta == 1) & (encuestas.Facultad ==  facultad),'Respuesta_texto'].value_counts().reset_index()

trace_1 = go.Pie(labels=encuestas.loc[:,'index'], values=encuestas.loc[:,'Respuesta_texto'])
layout_1 =  go.Layout(legend = {"x":0,"y":-.5},  margin=dict(l=23,r=18,b=53,t=73,),
                      paper_bgcolor='rgb(223, 223, 223)', template = 'ggplot2')
                
fig_1 = go.Figure(data = [trace_1], layout = layout_1)    

return html.Div([dcc.Graph(id='graph',figure=fig_1)])

This text will be blurred@app.callback(
Output(‘graph’, ‘figure’),
[Input(‘tabs’, ‘value’)])
def filtro_callback(facultad):
return filtro(facultad)

2

it looks like you’re trying to output a graph into a div.

You should try

html.Div([
dcc.Graph(id=‘graph’),
])

and in your def filtro function, have it end with “return fig_1”.

3

Just like @ilemi 's answer. I have tested it.

tested
tested882×604 79.8 KB 

#page 1
    html.Div([
# Row 3
        html.Div([
            html.Div([
                html.H6('Tenemos los resultados siguientes',style={'text-align': 'center'}),
                html.Br(),
                html.P('Es interesante ver como la mayoría nos preocupamos por los animales, pero lamentablemente existe una gran desinformación sobre los procesos judiciales, de igual forma nuestras autoridades no ven de interés los derechos de los animales')
            ],className='product')
        ],
        className='row'),
        html.Div([
            dcc.Dropdown(id='tabs',
            options = Facultades,
            multi = False),
                ]),
        dcc.Graph(id='graph')
                ],className = "sub_page")],className="page")
########################
#Dash Layout#
########################
def filtro(facultad = 'Derecho'):

    encuestas = pd.read_csv(file)

    encuestas = encuestas.loc[(encuestas.Pregunta == 1) & (encuestas.Facultad ==  facultad),'Respuesta_texto'].value_counts().reset_index()
    print(encuestas.head())
    trace_1 = go.Pie(labels=encuestas.loc[:,'index'], values=encuestas.loc[:,'Respuesta_texto'])
    layout_1 =  go.Layout(legend = {"x":0,"y":-.5},  margin=dict(l=23,r=18,b=53,t=73,),
                        paper_bgcolor='rgb(223, 223, 223)', template = 'ggplot2')
                    
    fig_1 = go.Figure(data = [trace_1], layout = layout_1)    

    return fig_1
@app.callback(
    Output('graph', 'figure'),
    [Input('tabs', 'value')])
def filtro_callback(facultad):
    return filtro(facultad)

if __name__ == '__main__':
1 Like
4

Great! Happy it worked :slight_smile: