# Output not getting displayed in my dash

**URL:** <https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161>\
**Category:** Dash Python\
**Created:** [December 4, 2019, 12:10pm UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161 "2019-12-04T12:10:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Suchi](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Suchi](https://community.plotly.com/u/Suchi)\
**Post date:** [December 4, 2019, 12:10pm UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/1 "2019-12-04T12:10:58Z")

</div>

Nothing is getting displayed in my dash please help  
MY Codep

```
# Dropdown Grid

```

app = dash.Dash( **name** , external\_stylesheets=external\_stylesheets)  
app.css.append\_css({  
“external\_url”: “[https://codepen.io/chriddyp/pen/bWLwgP.css](https://codepen.io/chriddyp/pen/bWLwgP.css)”  
})  
app.layout=html.Div([  
html.Div([  
html.Div([  
html.H1(‘Arasmeta’)  
]  
),  
# Select Division Dropdown

```
    html.Div([

        html.Div('Site', className='three columns'),
        html.Div(dcc.Dropdown(id='site',
                                  options=[{'label':i, 'value' : i} for i in df['Site'].unique()]),
                     className='nine columns')
    ]
    ),

    html.Div([
        html.Div('Department', className='three columns'),
        html.Div(dcc.Dropdown(id='dept'),
                     className='nine columns')
    ]
    ),

        # Select Season Dropdown
    html.Div([
        html.Div('Equipment Name', className='three columns'),
        html.Div(dcc.Dropdown(id='eqname'),
                     className='nine columns')
    ]
    ),

        # Select Team Dropdown
    html.Div([
        html.Div('Equipment ID', className='four columns'),
        html.Div(dcc.Dropdown(id='edid'),
                     className='twelve columns')
    ]
    ),
], 
    className='six columns'),

```

# Empty

```
html.Div([
    html.Div(className='six columns')
    
],
    className='twleve columns'),
 # Match Results Grid

html.Div([
    html.Div(
        dte.DataTable(id='Table_result', 
                      columns=[{"name": i, "id": i, 'deletable': True} for i in dt_columns],
                      editable=True,
                      row_selectable="multi",
                      selected_row_indices=[0],
                     ),
        className='six columns'
    ),

```

# Season Summary Table and Graph

```
    html.Div([
        # summary table
        dcc.Graph(id='graph')
        # style={},
    ], 
        className='six columns'),
]
),
html.Div([
    html.Div('Date',className='five columns'),
    html.Div(dcc.Input(id='diff'),
        className='eleven columns')
]
)

```

]  
)

# Load in Dropdown

@app.callback(  
Output(component\_id=‘dept’, component\_property=‘options’),  
[  
Input(component\_id=‘site’, component\_property=‘value’)  
]  
)  
def update\_department(d):  
df1=df[df[‘Site’]==d]  
dpt = [{‘label’:i, ‘value’ : i} for i in df1['Department '].unique()]  
return dpt

#Load in Dropdown  
@app.callback(  
Output(component\_id=‘eqname’, component\_property=‘options’),  
[  
Input(component\_id=‘dept’, component\_property=‘value’),  
Input(component\_id=‘site’, component\_property=‘value’)  
]  
)  
def update\_eqnme(e,s):  
df1=df[df[‘Site’]==s]  
df2=df1[df1['Department ']==e]  
en = [{‘label’:i, ‘value’ : i} for i in df2[‘Equipment Name’].unique()]  
return en

@app.callback(  
Output(component\_id=‘edid’, component\_property=‘options’),  
[  
Input(component\_id=‘eqname’, component\_property=‘value’),  
Input(component\_id=‘dept’, component\_property=‘value’),  
Input(component\_id=‘site’, component\_property=‘value’)  
]  
)  
def update\_eqid(e,s,z):  
df1=df[df[‘Site’]==z]  
df2=df1[df1['Department ']==s]  
df3=df2[df2[‘Equipment Name’]==e]  
sn = [{‘label’:i, ‘value’ : i} for i in df3[‘Equipment ID’].unique()]  
return sn

@app.callback(  
Output(component\_id=‘Table\_result’,component\_property=“columns”),  
[  
Input(component\_id=‘edid’, component\_property=‘value’),  
Input(component\_id=‘eqname’, component\_property=‘value’),  
Input(component\_id=‘dept’, component\_property=‘value’),  
Input(component\_id=‘site’, component\_property=‘value’)  
]  
)  
def column\_table\_data(q,w,e,r):  
df1=df[df[‘Site’]==q]  
df2=df1[df1['Department ']==w]  
df3=df2[df2[‘Equipment Name’]==e]  
df4=df3[df3[‘Equipment ID’]==r]  
df=df4[[‘Sr/ No/’, ‘Site’, ‘Date’, 'Department ', ‘Equipment ID’,  
‘Equipment Name’,‘GREASE GRADE’, ‘POINT’, ‘STOCK’,‘MAN POWER’, ‘Remarks’]]  
column = [{“name”: i, “id”: i} for i in df.columns]  
return column

@app.callback(  
Output(component\_id=‘Table\_result’,component\_property=“row\_selectable”),  
[  
Input(component\_id=‘edid’, component\_property=‘value’),  
Input(component\_id=‘eqname’, component\_property=‘value’),  
Input(component\_id=‘dept’, component\_property=‘value’),  
Input(component\_id=‘site’, component\_property=‘value’)  
]  
)

def load\_table\_data(p,q,r,s):  
df1=df[df[‘Site’]==p]  
df2=df1[df1['Department ']==q]  
df3=df2[df2[‘Equipment Name’]==r]  
df4=df3[df3[‘Equipment ID’]==s]  
df5=df4[[‘Sr/ No/’, ‘Site’, ‘Date’, 'Department ', ‘Equipment ID’,  
‘Equipment Name’,‘GREASE GRADE’, ‘POINT’, ‘STOCK’,‘MAN POWER’, ‘Remarks’]]  
return df.to\_dict(‘records’)  
@app.callback(  
Output(component\_id=‘graph’,component\_property=“figure”),  
[  
Input(component\_id=‘Table\_result’,component\_property=“row\_selectable”),  
Input(component\_id=‘edid’, component\_property=‘value’),  
Input(component\_id=‘eqname’, component\_property=‘value’),  
Input(component\_id=‘dept’, component\_property=‘value’),  
Input(component\_id=‘site’, component\_property=‘value’)  
]

)  
def load\_graph(a,b,c,d,rows):  
df1=df[df[‘Site’]==a]  
df2=df1[df1['Department ']==b]  
df3=df2[df2[‘Equipment Name’]==c]  
df4=df3[df3[‘Equipment ID’]==d]  
dff = pd.DataFrame(rows)  
return {  
‘data’: [{  
‘x’: df[‘Date’],  
‘y’: df[[‘STOCK’]].mean(axis=1),  
‘text’: df[‘Equipment Name’],  
‘type’: ‘bar’  
}  
]

```
}
```

---

<div class="post-metadata">

**Author:** ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)\
**Post date:** [December 4, 2019, 12:28pm UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/2 "2019-12-04T12:28:03Z")

</div>

Can you please reformat your code? See [this other community post](https://community.plotly.com/t/how-to-provide-your-sample-code-in-right-format/27641) for more info. This makes it easier to read and also copy/paste to dev-tools to aid in debugging/providing guidance.

---

<div class="post-metadata">

**Author:** ![Suchi](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Suchi](https://community.plotly.com/u/Suchi)\
**Post date:** [December 5, 2019, 6:01am UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/3 "2019-12-05T06:01:37Z")

</div>

Here It Is

```auto
    # Dropdown Grid
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
app.layout=html.Div([
    html.Div([
        html.Div([
        html.H1('Arasmeta')
        ]
        ),
            # Dropdown

        html.Div([

            html.Div('Site', className='three columns'),
            html.Div(dcc.Dropdown(id='site',
                                      options=[{'label':i, 'value' : i} for i in df['Site'].unique()]),
                         className='nine columns')
        ]
        ),

        html.Div([
            html.Div('Department', className='three columns'),
            html.Div(dcc.Dropdown(id='dept'),
                         className='nine columns')
        ]
        ),

            # Dropdown
        html.Div([
            html.Div('Equipment Name', className='three columns'),
            html.Div(dcc.Dropdown(id='eqname'),
                         className='nine columns')
        ]
        ),

            # Dropdown
        html.Div([
            html.Div('Equipment ID', className='four columns'),
            html.Div(dcc.Dropdown(id='edid'),
                         className='twelve columns')
        ]
        ),
    ], 
        className='six columns'),
 # Empty

    html.Div([
        html.Div(className='six columns')
        
    ],
        className='twleve columns'),
     # Match Results Grid

    html.Div([
        html.Div(
            dte.DataTable(id='Table_result', 
                          columns=[{"name": i, "id": i, 'deletable': True} for i in dt_columns],
                          editable=True,
                          row_selectable="multi",
                          selected_row_indices=[0],
                         ),
            className='six columns'
        ),
        
# Table and Graph
        html.Div([
            # summary table
            dcc.Graph(id='graph')
            # style={},
        ], 
            className='six columns'),
    ]
    ),
    
]
)
# Load in Dropdown
@app.callback(
    Output(component_id='dept', component_property='options'),
    [
        Input(component_id='site', component_property='value')
    ]
)
def update_department(d):
    df1=df[df['Site']==d]
    dpt = [{'label':i, 'value' : i} for i in df1['Department '].unique()]
    return dpt
#Load in Dropdown

@app.callback(
    Output(component_id='eqname', component_property='options'),
    [
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqnme(e,s):
    df1=df[df['Site']==s]
    df2=df1[df1['Department ']==e]
    en = [{'label':i, 'value' : i} for i in df2['Equipment Name'].unique()]
    return en

@app.callback(
    Output(component_id='edid', component_property='options'),
    [
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqid(e,s,z):
    df1=df[df['Site']==z]
    df2=df1[df1['Department ']==s]
    df3=df2[df2['Equipment Name']==e]
    sn = [{'label':i, 'value' : i} for i in df3['Equipment ID'].unique()]
    return sn

@app.callback(
    Output(component_id='Table_result',component_property="columns"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def column_table_data(q,w,e,r):
    df1=df[df['Site']==q]
    df2=df1[df1['Department ']==w]
    df3=df2[df2['Equipment Name']==e]
    df4=df3[df3['Equipment ID']==r]
    df=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    column = [{"name": i, "id": i} for i in df.columns]
    return column

@app.callback(
    Output(component_id='Table_result',component_property="row_selectable"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)

def load_table_data(p,q,r,s):
    df1=df[df['Site']==p]
    df2=df1[df1['Department ']==q]
    df3=df2[df2['Equipment Name']==r]
    df4=df3[df3['Equipment ID']==s]
    df5=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    return df.to_dict('records')

@app.callback(
    Output(component_id='graph',component_property="figure"),
    [
        Input(component_id='Table_result',component_property="row_selectable"),
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]

)
def load_graph(a,b,c,d,rows):
    df1=df[df['Site']==a]
    df2=df1[df1['Department ']==b]
    df3=df2[df2['Equipment Name']==c]
    df4=df3[df3['Equipment ID']==d]
    dff = pd.DataFrame(rows)
    return {
        'data': [{
            'x': df['Date'],
            'y': df[['STOCK']].mean(axis=1),
            'text': df['Equipment Name'],
            'type': 'bar'
        }
        ]
        
    }

```

---

<div class="post-metadata">

**Author:** ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)\
**Post date:** [December 7, 2019, 4:42pm UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/4 "2019-12-07T16:42:43Z")

</div>

After looking over your code,

1. You are missing your imports (`import dash`, etc)
2. external\_stylesheets is not defined
3. In your `app.layout`, you reference `df` but this variable is not defined
4. In many of your callbacks, you reference `df` but this variable is not defined
5. Where is your `app.run_server` statement?

---

<div class="post-metadata">

**Author:** ![Suchi](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Suchi](https://community.plotly.com/u/Suchi)\
**Post date:** [December 9, 2019, 7:41am UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/5 "2019-12-09T07:41:57Z")

</div>

Dude I have just snipped the main code.  
My question here is my inputs are not throwing any error but when it comes to output the whole page is blank.

---

<div class="post-metadata">

**Author:** ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)\
**Post date:** [December 9, 2019, 7:22pm UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/6 "2019-12-09T19:22:34Z")

</div>

ok…typically, when posting code, it’s customary to make it standalone so others can run it locally. This makes it easier to provide guidance and feedback on your specific questions.

I was only pointing out what was missing that prevented me from running your code. Should you update your code in the future, I’d be happy to look at it.

---

<div class="post-metadata">

**Author:** ![Suchi](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Suchi](https://community.plotly.com/u/Suchi)\
**Post date:** [December 10, 2019, 5:19am UTC](https://community.plotly.com/t/output-not-getting-displayed-in-my-dash/32161/7 "2019-12-10T05:19:25Z")

</div>

Yes would love to provide you with my whole code  
I have made changes in code  
Now I’m dealing with error between table and drop-down in my output  
my code is running smoothly without any errors but in output my drop-downs are not working nor interacting with my dash-table but if you separately run the code of drop-downs it will work fine but when you add code of dash-table it won’t work nor it interacts with dash-table.

```auto
import pandas as pd
import numpy as np
import plotly.graph_objects as go
from IPython.display import IFrame
from plotly.offline import download_plotlyjs,init_notebook_mode,plot,iplot
init_notebook_mode(connected=True)
from plotly.subplots import make_subplots
import datetime
import json
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table 
from dash.dependencies import Input, Output, State

df = pd.read_csv('Daily Greasing Data of KILN 2.csv')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
app.layout=html.Div([
    html.Div([
        html.Div([
        html.H1('Arasmeta')
        ]
        ),
            # Select Division Dropdown

        html.Div([

            html.Div('Site', className='two columns'),
            html.Div(dcc.Dropdown(id='site',
                                      options=[{'label':i, 'value' : i} for i in df['Site'].unique()]
                                 ),
                         className='ten columns')
        ]
        ),

        html.Div([
            html.Div('Department', className='two columns'),
            html.Div(dcc.Dropdown(id='dept'),
                         className='ten columns')
        ]
        ),

            # Select Season Dropdown
        html.Div([
            html.Div('Equipment Name', className='two columns'),
            html.Div(dcc.Dropdown(id='eqname'),
                         className='ten columns')
        ]
        ),

            # Select Team Dropdown
        html.Div([
            html.Div('Equipment ID', className='two columns'),
            html.Div(dcc.Dropdown(id='edid'),
                         className='ten columns')
        ]
        ),
        
    ]
        
    ),
     html.Div([
        
             html.Div(className='six columns')
         
         ],
             className='twleve columns'),
        html.Div([
            dash_table.DataTable(
                id='Table_result',
                columns=[
                    {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
                ],
                editable=True,
                column_selectable="single",
                row_selectable="multi",
                row_deletable=True,
                selected_columns=[],
                selected_rows=[],
                page_action="native",
                page_current= 0,
                page_size= 10,
                derived_viewport_indices=[]
            ),
            html.Div(id='datatable-interactivity-container')
            
        ]
            
        )
            
    
]
    
)

@app.callback(
    Output(component_id='dept', component_property='options'),
    [
        Input(component_id='site', component_property='value')
    ]
)
def update_department(site):
    df1=df[df['Site']==site]
    dpt = [{'label':i, 'value' : i} for i in df1['Department '].unique()]
    return dpt
#Load in Dropdown

@app.callback(
    Output(component_id='eqname', component_property='options'),
    [
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqnme(dept,site):
    df1=df[df['Site']==site]
    df2=df1[df1['Department ']==dept]
    en = [{'label':i, 'value' : i} for i in df2['Equipment Name'].unique()]
    return en

@app.callback(
    Output(component_id='edid', component_property='options'),
    [
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqid(eqname,dept,site):
    df1=df[df['Site']==site]
    df2=df1[df1['Department ']==dept]
    df3=df2[df2['Equipment Name']==eqname]
    sn = [{'label':i, 'value' : i} for i in df3['Equipment ID'].unique()]
    return sn

@app.callback(
    Output(component_id='Table_result',component_property="columns"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def column_table_data(edid,eqname,dept,site):
    df1=df[df['Site']==site]
    df2=df1[df1['Department ']==dept]
    df3=df2[df2['Equipment Name']==eqname]
    df4=df3[df3['Equipment ID']==edid]
    df=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
            'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    column = [{"name": i, "id": i} for i in df.columns]
    return column

@app.callback(
    Output(component_id='Table_result',component_property="data"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)

def load_table_data(edid,eqname,dept,site):
    df1=df[df['Site']==site]
    df2=df1[df1['Department ']==dept]
    df3=df2[df2['Equipment Name']==eqname]
    df4=df3[df3['Equipment ID']==edid]
    df6=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
            'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    return df.to_dict('records')

@app.callback(
    Output('datatable-interactivity-container', "children"),
    [Input('Table_result', "derived_virtual_data"),
     Input('Table_result', "derived_virtual_selected_rows")])

def update_graphs(rows, derived_virtual_selected_rows):
        if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    dff = df if rows is None else pd.DataFrame(rows)

    colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
              for i in range(len(dff))]

    return [
        dcc.Graph(
            id=column,
            figure={
                "data": [
                    {
                        "x": dff["Date"],
                        "y": dff[column],
                        "type": "bar",
                        "marker": {"color": colors},
                    }
                ],
                "layout": {
                    "xaxis": {"automargin": True},
                    "yaxis": {
                        "automargin": True,
                        "title": {"text": column}
                    },
                    "height": 250,
                    "margin": {"t": 10, "l": 10, "r": 10},
                },
            },
        )
       
        for column in ["STOCK", "Department ", "MAN POWER"] if column in dff
    ]

```