Having a lot of trouble updating graph with filters(Radio, Dropdown)

Dash Python
1

I have a dataframe like this:
30

And I would love to be able to use the dropdown filter to filter by Area(dropdown) and “Anomalia”(radio items)

I put the entire code here:

https://hastebin.com/imuhetumex.py

I just feel like I’m doing something wrong. I could just do a huge if/elif but I don’t feel that’s right. Plus, as it is, when I change the radio item all the markers go invisible and I have to press the “autoscale” button just for them to show.

Really need some help with this. Thanks :grinning:

2

Hi,

Your question is more related to filter in pandas right? If you want the dataframe where Area is 1 or 2 and Anomalia is 1, you can do something like:

idx = df["Area"].isin(area) & (df["Anomalia"] == int(anomalia))

Then use this boolean serie as indexer

X = df.loc[idx, "COORDENADA_X_PT"]
Y = df.loc[idx, "COORDENADA_Y_PT"]

If you want to include all anomalia, simply do something like:

if anomalia == "TD":
    anomalia = [1,2]
else: 
    anomalia = [int(anomalia)]
idx = df["Area"].isin(area) & (df["Anomalia"].isin(anomalia))

So, if I sum up:

@app.callback(
    Output(component_id='graph', component_property='children'),
    [Input(component_id='filtro-area', component_property='value'),
    Input(component_id='filtro-anomalia', component_property='value')]
)
def update_graph(area, anomalia):
    if anomalia == "TD":
        anomalia = [1,2]
    else: 
        anomalia = [int(anomalia)]
    idx = df["Area"].isin(area) & (df["Anomalia"].isin(anomalia))
    return dcc.Graph(
            id='example-graph',
            animate=True,
            figure={
                'data': [
                    {
                        'x': df.loc[idx, 'COORDENADA_X_PT'], #X do poste
                        'y': df.loc[idx, 'COORDENADA_Y_PT'], #Y do poste
                        'type': 'scattergl', 
                        'mode':'markers'
                    }
                ],
                'layout': {
                    'hovermode':'closest', #Padrao closest
                }
            }
        )

EDIT: I did not notice that your area list is a list of string. You have better to let it as list of integer:

            dcc.Dropdown(
                id = 'filtro-area',
                options=[
                    {'label': 'Área 1', 'value': 1},
                    {'label': 'Área 2', 'value': 2},
                    {'label': 'Área 3', 'value': 3}
                ],
                multi=True,
                value=[1, 2, 3],
                placeholder = 'Selecione uma Área'
            ),
1 Like
3

Dude you are like a god to me now! Thank you so much!

I still have this problem however (whenever I change any filter I always have to press autoscale for the markers to become visible again. I’ll probably create another topic on this.

But THANK YOU SO MUCH! I didn’t know of the “.isin()” method.

EDIT: I believe that here:

You meant anomalia = [0,1], since those are the values, right?

Finally, thanks to your help, that part of the code looks like this:

@app.callback(
    Output(component_id='graph', component_property='children'),
    [Input(component_id='filtro-area', component_property='value'),
    Input(component_id='filtro-anomalia', component_property='value')]
)
def update_graph(area, anomalia):
    if anomalia == "TD":
        anomalia = [0,1]
    else: 
        anomalia = [int(anomalia)]
    idx = df["Area"].isin(area) & (df["Anomalia"].isin(anomalia))
    return dcc.Graph(
            id='example-graph',
            animate=True,
            figure={
                'data': [
                    {
                        'x': df[idx]['COORDENADA_X_PT'], #X do poste
                        'y': df[idx]['COORDENADA_Y_PT'], #Y do poste
                        'type': 'scattergl', 
                        'mode':'markers'
                    }
                ],
                'layout': {
                    'hovermode':'closest', #Padrao closest
                }
            }
        )
4

You’re welcome, it kinds of save my life also when I learned this isin function.

Well, for your graph problem, I think that’s because you do not add the correct option to figure: it should be related plotly figure object.
figure should be a dictionary, with the key data a list of plotly graphical object and layout a plotly layout object (I think).
So something like that should work:

import plotly:

import plotly.graph_objs as go

Then update your code:

dcc.Graph(
    id='example-graph',
    animate=True,
    figure={
            'data': [
                go.Scatter(
                   x = df[idx]['COORDENADA_X_PT'], #X do poste
                   y = df[idx]['COORDENADA_Y_PT'], #Y do poste
                   mode='markers',
                )
            ],
            'layout': go.Layout(
                hovermode='closest', #Padrao closest
            )
        }
    )

I tested and it works for me.

2 Likes
5

I tried doing it your way, but I still get the same issue.

Maybe it has to do with the browser. I’m using Firefox.

Thanks a lot for your help @GwendalD !!

EDIT: It is actually a problem with Dash itself. I found the answer at the following topic: