Figure is returned empty in dash plotly

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

    Output('roc-curve-model', 'figure'),
        Input('ml_model_selection', 'value'),
        Input('ml_pred_start', 'n_clicks'),
        Input('our-table', 'data'),
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()

        SVMnumeric_data_train = scaler.transform(SVMnumeric_data_train)
        SVMnumeric_data_test = scaler.transform(SVMnumeric_data_test)
        svcclassifier = SVC(kernel='poly', degree=3, probability=True), 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})',
                x='False Positive Rate',
                y='True Positive Rate'))
            type='line', line=dict(dash='dash'),
            x0=0, x1=1, y0=0, y1=1)


        return fig

When I print the figure components it gives:

    '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 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!

It’s hard to tell, but based on the error you get, I think your problem is not the figure itself but this lines of your code:

I suspect your argument data to be null.

1 Like

@AIMPED Thank you for your reply, yes it is correct, I have tried again with another example and started working! I will check why data argument is null!