Hello,
In my dash app I’m trying to return a roc curve figure, but it gives an error Cannot read properties of null (reading 'data')
.
My code:
html.P('ROC and PR Curves Graphs'),
dcc.Graph(id="roc-curve-model", figure={})
my callback function
@app.callback(
Output('roc-curve-model', 'figure'),
[
Input('ml_model_selection', 'value'),
Input('ml_pred_start', 'n_clicks'),
Input('our-table', 'data'),
],
prevent_initial_call=True,
)
def model_pred_roc_pr_curves(ml_selection, n_clicks, data):
dff = pd.DataFrame(data)
convert_df = dff._convert(numeric=True)
numeric_data = convert_df.select_dtypes(include=np.number)
del numeric_data['OUTPUT']
targetData = np.nan_to_num(convert_df['OUTPUT'])
# targetData= np.nan_to_num(targetData)
# reset button click state
changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
if (ml_selection == 'SVM' and 'ml_pred_start' in changed_id):
SVMnumeric_data_train, SVMnumeric_data_test, SVMtarget_data_train, SVMtarget_data_test = train_test_split(
numeric_data, targetData, test_size=0.30)
scaler = StandardScaler()
scaler.fit(SVMnumeric_data_train)
SVMnumeric_data_train = scaler.transform(SVMnumeric_data_train)
SVMnumeric_data_test = scaler.transform(SVMnumeric_data_test)
svcclassifier = SVC(kernel='poly', degree=3, probability=True)
svcclassifier.fit(SVMnumeric_data_train, SVMtarget_data_train)
prod_roc = svcclassifier.predict_proba(SVMnumeric_data_test)[:, 1]
fpr, tpr, thresholds = metrics.roc_curve(SVMtarget_data_test, prod_roc, pos_label=1)
score = metrics.auc(fpr, tpr)
fig = px.area(
x=fpr, y=tpr,
title=f'ROC Curve (AUC={score:.4f})',
labels=dict(
x='False Positive Rate',
y='True Positive Rate'))
fig.add_shape(
type='line', line=dict(dash='dash'),
x0=0, x1=1, y0=0, y1=1)
print(fig)
return fig
When I print the figure components it gives:
Figure({
'data': [{'fillpattern': {'shape': ''},
'hovertemplate': 'False Positive Rate=%{x}<br>True Positive Rate=%{y}<extra></extra>',
'legendgroup': '',
'line': {'color': '#636efa'},
'marker': {'symbol': 'circle'},
'mode': 'lines',
'name': '',
'orientation': 'v',
'showlegend': False,
'stackgroup': '1',
'type': 'scatter',
'x': array([0. , 0.02631579, 0.05263158, 0.05263158, 0.07894737, 0.07894737,
0.23684211, 0.23684211, 0.31578947, 0.31578947, 0.34210526, 0.34210526,
0.36842105, 0.36842105, 1. ]),
'xaxis': 'x',
'y': array([0. , 0. , 0. , 0.11764706, 0.11764706, 0.17647059,
0.17647059, 0.82352941, 0.82352941, 0.88235294, 0.88235294, 0.94117647,
0.94117647, 1. , 1. ]),
'yaxis': 'y'}],
'layout': {'legend': {'tracegroupgap': 0},
'shapes': [{'line': {'dash': 'dash'}, 'type': 'line', 'x0': 0, 'x1': 1, 'y0': 0, 'y1': 1}],
'template': '...',
'title': {'text': 'ROC Curve (AUC=0.7755)'},
'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title': {'text': 'False Positive Rate'}},
'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title': {'text': 'True Positive Rate'}}}
})
with fig.show it will be showing the figure without any problem:
But in my dash app the figure return nothing it is empty
What I’m doing wrong here!? How I can solve this issue.
Thank you in advance!