Json error on dash app

Dash Python
1

image

Hi,

When I try to look at the console of my dash app to see why my table is not showing up I see this. I tried to look these up online but nothing really helped. Does this mean I cannot access the server or my callback is not working at all or something else?

2

Hello @dgudhka,

Yes, 500 means there was a server error.

It’s hard to say what is causing your issue without seeing your code.

3 
import dash
import plotly.graph_objects as go
import plotly.express as px
from dash.dependencies import Input, Output
from dash_table.Format import Format
import dash_bootstrap_components as dbc 
import mysql.connector
import dash_core_components as dcc
import datetime
import pymssql
import pandas as pd
import math
import numpy as np
from datetime import datetime
from pandas.tseries.offsets import BDay

# getting last business day date
today = datetime.today()
yesterday = today - BDay(1)

app = Dash(__name__, suppress_callback_exceptions=True,external_stylesheets=[dbc.themes.BOOTSTRAP]) 

app.layout = html.Div([
    html.Hr(),
    html.H3(id = 'H1', children = ['TD Flow'], style = {'textAlign':'center', 'color':'rgb(0, 128, 0)','fontSize':'25px'}),
    
    dbc.Row([

        # default date is last business day date
        dbc.Col([
            html.Label(id = 'Date', children = ' Date: ',style = {'color':'rgb(0, 128, 0)','marginLeft':10}),
            dcc.Input(id ='datevalue',
                value = datetime.strftime(yesterday, '%Y%m%d'),
                style = {'textAlign':'center', 'marginLeft':'10px'},
                type='text'
            ),
        ],width = 3),

        # notional default is 500,000 thus only rows with notional>500,000 show up by default
        dbc.Col([
            html.Label(id = 'Ticker', children = ' Ticker: ',style = {'color':'rgb(0, 128, 0)'}),
            dcc.Input(id ='ticker',
                value = 'ECN',
                style = {'textAlign':'center','marginLeft':'5px'},
                type='text'
            ),
        ],width = {'size':4,'offset':2}),

        # allows user to fetch the first or last batch of stock prices
        dbc.Col([
            html.Label(id = 'Currency', children = ' Currency: ',style = {'color':'rgb(0, 128, 0)','marginLeft':10}),
            dcc.Input(id ='currency',
                value='CAD',
                style = {'textAlign':'center','marginLeft':'5px'},
                type = 'text',
            ),
        ],width = 3), 

    ]),
            
    # lets user update input fields themselves to update output, includes a loading button
    dbc.Spinner(children=[html.Button('Update', id='interval-component',style = {'marginLeft':'10px'}),
                          html.Div(id='pagecontent'),
                         ], color = 'rgb(0,128,0)'),
])

# callback takes in 4 variables including one input variable and 3 state variables - so that output only updates once user presses 'Update' 
@callback(
        Output('pagecontent','children'),
        [State('datevalue','value'),
        State('ticker','value'),
        State('currency','value'),
        Input('interval-component', 'n_clicks')
        ])

# datatable is using the dataframe from the query  
def update_output(dateval,symbol,curr,n):

try:
    conn = ...
    cursor = conn.cursor(buffered=True)
    ...
    df = pd.read_sql(sql, conn)
    # creating the summary as a pivot table
    table = pd.pivot_table(df, values = 'Volume',index = ['Desk'],columns = ['TransactionType'], aggfunc=np.sum, fill_value=0, margins=True, margins_name='Grand Total')
  
    # coverting pivot table to a dataframe
    table = pd.DataFrame(table.to_records())
  
    # converting the dataframe df to a dash_table
    tableoutput = dash_table.DataTable(id='dataframe', columns=[{'id':c, 'name':c, 'type':'numeric', 'format':Format(group=True, groups=[3])} for c in df.columns],
  
    data=df.to_dict('records'),editable=False,filter_action="native",sort_action="native",selected_rows=[],sort_mode="multi",page_current= 0,page_action="native",
  
    css=[{'selector': '.dash-spreadsheet tr', 'rule': 'height: 10px;'}], fixed_rows={'headers': True},
  
        style_cell_conditional=[
        {
            'if': {'column_id': c},
            'textAlign': 'center','width': '8.33%'
        } for c in df.columns
    ],
        style_data={
        'color': 'black',
        'backgroundColor': 'white'
                    },
        style_header={
        'backgroundColor': 'rgb(0, 128, 0)',
        'color': 'white',
        'fontWeight': 'bold'
                    }
      )
  
    return tableoutput   

except Exception as e:
            cnx.close()
            print(str(e))
4

Strange.

Are you running your app with debug=True?

Is there any string being printed to your python console?

5

Yes I am running with Debug = True and there is no string printed in python console.

6

Is the callback actually triggering?

Have you tried running just a basic app?

7

Yeah I just had to remove this ^

8

Ah, ok, so not a Dash issue, but an issue with the DB connection. XD :smiley:

Still, glad you got it figured out.

1 Like