✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Fail to Display the chart's content after successful deployment

Hello Everyone,

I have managed to deploy dash app successfully with herokuapp.

However, I have an issue where after deployment I can see the layouts of the charts and also a html component. But the content of the charts are not appearing. When I checked the logs, it says that there is " **no such file or directory **". I’m very sure the file and directory is in my machine because when I run it locally there is no such error.

I am reading an excel file to plot the chart

1)Below is the screen shot of empty charts after deployment to herokuapp.

2) Below is the screen shot of the logs from herokuapp

3) Below is the screen shot of the file and directory in my machine
Directory and File

4) Below is the screen shot of “Suppose chart” when run in localhost

5) Lastly below is the code I used

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 plotly.express as px
import pandas as pd
import dash_auth
from datetime import datetime

username_password_pair = [['Jai', '123'],['username', 'password']]

app = dash.Dash()
auth = dash_auth.BasicAuth(app, username_password_pair)
server = app.server

app.layout = html.Div([
    html.Div(['Lean Partner SDN BHD Invoice Dashboard'],
             style={'color':'#ab251b',
                    'textAlign':'center',
                    'fontSize': 25,
                    'font-weight':'bold'}),
    html.Div([
        dcc.Graph(id='inv-bar'),
        dcc.Interval(id='graph-update',
                     interval=10000,
                     n_intervals=500)
    ], style={'width':'48%', 'display':'inline-block'}),

    html.Div([
        dcc.Graph(id='line-chart'),
        dcc.Interval(id='line-update',
                     interval=10000,
                     n_intervals=0)
    ], style={'width':'48%', 'display':'inline-block'}),

    html.Div([
        dcc.Dropdown(id='file_year',
                     options=[{'label': datetime.now().year - 3, 'value': datetime.now().year - 3},
                              {'label': datetime.now().year - 2, 'value': datetime.now().year - 2},
                              {'label': datetime.now().year - 1, 'value': datetime.now().year - 1},
                              {'label': datetime.now().year, 'value': datetime.now().year}],
                     value='2020')
    ]),

    html.Div([
        dcc.Graph(id='inv-count'),
        dcc.Interval(id='inv-count-update',
                     interval=10000,
                     n_intervals=0)
    ], style={'width': '48%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(id='pie-chart'),
        dcc.Interval(id='pie-update',
                     interval=10000,
                     n_intervals=0)
    ], style={'width': '48%', 'display': 'inline-block'})

])


@app.callback(
    Output('inv-bar', 'figure'),
    [Input('graph-update', 'n_intervals'),
     Input('file_year', 'value')]
)


def update_bar(interval_bar_time, file_year):
    df = pd.read_excel(f'C:/Users/Jai/Desktop/dash_app/Lean Partner Finance_{file_year}.xlsx')

    months = df['Month'].unique()

    grouped = df.groupby(['Month'], sort=False)[['Net Amount', 'Net Amount Received']].sum().reset_index()
    df1 = pd.DataFrame(grouped)

    data1 = go.Bar(x=df1['Month'].unique(),
                   y=df1['Net Amount'],
                   name='Invoice Amount',
                   marker_color='#ab251b',
                   )

    data2 = go.Bar(x=df1['Month'].unique(),
                   y=df1['Net Amount Received'],
                   name='Received Amount',
                   marker_color='#e07272')

    layout = go.Layout(title='Invoice vs Received Amount ',
                       xaxis={'title': 'Months'},
                       yaxis={'title': 'Invoice and Received Amount'}
                       # barmode='stack'
                       )

    return {'data': [data1, data2], 'layout': layout, 'display':'block'}



@app.callback(Output('line-chart', 'figure'),
              [Input('line-update', 'n_intervals'),
               Input('file_year', 'value')])

def line_update(line_chart_update, file_year):
    df = pd.read_excel(f'C:/Users/Jai/Desktop/dash_app/Lean Partner Finance_{file_year}.xlsx')

    grouped = df.groupby(['Month'], sort=False)[['Net Amount', 'Net Amount Received']].sum().reset_index()
    df1 = pd.DataFrame(grouped)

    data1 = go.Scatter(x=df1['Month'].unique(),
                       y=df1['Net Amount'],
                       mode='lines+markers',
                       name='Invoice Amount',
                       line_color='#ab251b')

    layout = go.Layout(title='Invoice Amount(Net)',
                       xaxis={'title': 'Months'},
                       yaxis={'title': 'Invoice and Received Amount', 'rangemode':'tozero'})
    return {'data': [data1], 'layout': layout, 'display': 'block'}


@app.callback(Output('inv-count', 'figure'),
              [Input('inv-count-update', 'n_intervals'),
               Input('file_year', 'value')])

def inv_count_update(inv_data_update, file_year):
    df = pd.read_excel(f'C:/Users/Jai/Desktop/dash_app/Lean Partner Finance_{file_year}.xlsx')
    df1 = df.groupby(['Month'], sort=False)['Invoice'].nunique().reset_index()

    inv_cont_data = go.Bar(x=df1['Month'],
                           y=df1['Invoice'],
                           name='Num of Invoice',
                           marker_color='#ab251b')

    layout = go.Layout(title='Invoice count per month',
                       xaxis={'title':'Months'},
                       yaxis={'title':'Invoice Count'})

    return {'data':[inv_cont_data], 'layout':layout, 'display':'block'}


@app.callback(Output('pie-chart', 'figure'),
              [Input('pie-update', 'value'),
               Input('file_year', 'value')])

def pie_update(pie_data_update, file_year):
    df = pd.read_excel(f'C:/Users/Jai/Desktop/dash_app/Lean Partner Finance_{file_year}.xlsx')

    sumofnet = df['Net Amount'].sum()
    sumofrec = df['Net Amount Received'].sum()

    piechart = px.pie(data_frame=df,
                      values=[sumofnet, sumofrec],
                      title='Total Net Invoice Amount vs Net Amount Received',
                      hover_name=['Net Amount', 'Received Amount'],
                      hole=0.5)

    return piechart


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

Please assist me on this matter and let me know if need more information from my side.
Im very new to this platform, please forgive me if this issue is very silly

Thank you

The error is clear from the herokuapp logs; the data file cannot be found. How have you uploaded the data file?

Hi Emil,

The files are in my laptop.

The tutorial that I followed was very simple which doesn’t have the excel files. When first time I deployed the app I did not upload the excel files. After few trial and error I uploaded the excel file together when I run the “git push Heroku master”.

The error is still the same.

I’m still cracking my head how to solve this.

The app, when running on heroku, does not have scope to your local filesystem. If you need the file available when running on Heroku, you need to upload it (see Dash’s upload component); you will need to modify your code to reference the file accordingly. Alternatively, you can upload your excel file, convert it to panda df, and then your graphs could be generated from this data store.