Output not getting displayed in my dash

Dash Python
1

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”
})
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’
}
]

}
2

Can you please reformat your code? See this other community post for more info. This makes it easier to read and also copy/paste to dev-tools to aid in debugging/providing guidance.

3

Here It Is

    # 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'
        }
        ]
        
    }
4

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?
5

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.

6

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.

7

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.

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
    ]