I only started having this problem a few hours into coding my application. I am trying to start on an empty graph with no data and add to the graph as data is entered in the table. Initially this seemed to work, but now I am getting an error that the property ‘data’ of null cannot be read. I think it is coming from my second callback, but none of the inputs for this callback should be changing. Here is my code:
dbc.Row([
dbc.Col([
html.Div([
# datatable, button, and plot
dash_table.DataTable(
id='table',
columns = [{'name':i,'id':i} for i in ['col1','col2','col3']],
data=[],
editable=True,
row_deletable=True,
style_as_list_view=True,
style_cell={'textAlign': 'center'}
),
html.Button('Add Row', id='add-row-lithology-table', n_clicks=0),
dcc.Graph(
id='graph',
config={
'displayModeBar': False
},
figure={
'data': [],
'layout': go.Layout(
xaxis={
'showticklabels': False,
'ticks': '',
'showgrid': False,
'zeroline': False
},
yaxis={
'showticklabels': False,
'ticks': '',
'showgrid': False,
'zeroline': False
}
)
}
)
])
])
],
style = {'padding': 10}
)
@app.callback(
Output('table', 'data'),
[Input('add-row-table', 'n_clicks')],
[State('table', 'data'),
State('table', 'columns')])
def add_row(n_clicks, rows, columns):
if n_clicks > 0:
rows.append({c['id']: '' for c in columns})
rows[-1]['col1'] = len(rows)
return rows
@app.callback(
Output('graph', 'figure'),
[Input('table', 'data'),
Input('table', 'columns')])
def display_output(rows, columns):
if len(rows)>0:
return {
'data': [{
'type': 'heatmap',
'z': [[row.get('col1', None)] for row in rows], # z is data entered in datatable ex. 'z': [['10', '203', '', '', '', '']]
'y': [row.get('col3', None) for row in rows],
'showscale': False,
'showlegend': False
}],
'layout': go.Layout(
title='Title',
xaxis={
'showticklabels': False,
'ticks': '',
'showgrid': False,
'zeroline': False
},
yaxis={
'ticks': '',
'showgrid': False,
'zeroline': False,
'autorange':'reversed'
}
)
}