Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Filtering a dataframe with a selected element in a dropdown produces Cannot read property 'layout' of null

I have a multi-index df dataframe whose values I want to display on a dashboard only if the index has been selected in a dropdown. For example the My Burberry index in the following dataframe:

                            claimed_benefit perceived_benefit
My Burberry Je me sens bien     0           0.000000
            romantique          0           0.000000
            convient bien moi   0           0.000000
            féminin             0           0.033898
            sensuelle / sexy    0           0.000000
... ... ... ...
The Beat    harsh / agressif    0           0.000000
            boisé               0           0.000000
            écœurant            0           0.000000
            strength1           0           0.000000
            marron              0           0.000000

At the moment I can’t filter because it produces a ‘Canot read property ‘layout’ of null’ error when I try to use the dropdown value.

Here is the unfiltered Dashboard:

introducir la descripción de la imagen aquí

You can see that on each of the x-axis values all the values are stacked. These are the indices. Here is the code that produces this dashboard.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv("cb_pb.csv", index_col=0)

traces = []
for i in range(len(df)):
    trace_claimed = go.Bar(x=[df.iloc[i].values[0]], y=[df.iloc[i].values[2]], name='Claimed')
    trace_perceived = go.Bar(x=[df.iloc[i].values[0]], y=[-df.iloc[i].values[1]], name='Perceived')
    traces.append(trace_claimed)
    traces.append(trace_perceived)

app = dash.Dash()

app.layout = html.Div(children=[

])

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.H1(children='Scores of perfumes over claimed attributes'),
    html.Div(children='''National Sales Funnel Report.'''),
    dcc.Dropdown(
        id='demo-dropdown',
        options=[{'label': x, 'value': x} for x in df.index.unique()],
        value='My Burberry - Eau de Parfum'
    ),
    html.Div(id='dd-output-container'),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': traces,
            'layout':
            go.Layout(title='Order Status by Customer', barmode='stack')
        })
])


@app.callback(
    dash.dependencies.Output('dd-output-container', 'children'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

So to filter these indexes I tried to link the value produced by the dropdown to a function that produces the graph by filtering the strokes to be drawn with if dfc.iloc[i].name == my_dropdown:

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv("cb_pb.csv", index_col=0)

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.H1(children='Scores of perfumes over claimed attributes'),
    html.Div(children='''National Sales Funnel Report.'''),
    dcc.Dropdown(
        id='perfume-dropdown',
        options=[{'label': x, 'value': x} for x in df.index.unique()],
        value='My Burberry - Eau de Parfum'
    ),
    html.Div(id='dd-output-container'),
    html.Div([
        dcc.Graph(id='the_graph')
    ])
])

@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df
    traces = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(x=[dfc.iloc[i].values[0]], y=[dfc.iloc[i].values[2]], name='Claimed')
            trace_perceived = go.Bar(x=[dfc.iloc[i].values[0]], y=[-dfc.iloc[i].values[1]], name='Perceived')
            traces.append(trace_claimed)
            traces.append(trace_perceived)
    dcc.Graph(
        id='example-graph',
        figure={
            'data': traces,
            'layout':
                go.Layout(title='Order Status by Customer', barmode='stack')
        })

@app.callback(
    Output('dd-output-container', 'children'),
    [Input('perfume-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

But it returns Cannot read property 'layout' of null:

introducir la descripción de la imagen aquí