Dash unexpected end of JSON

Dash Python
1

This program works, but I get a JSON error randomly.
I get random errors when I move the mouse hover quickly.

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.graph_objs as go
from dash.dependencies import Input, Output

example1 = np.random.rand(128, 128)
example2 = np.random.rand(128, 128)
example3= np.random.rand(128, 128, 512)
example4 = np.random.rand(128, 128, 512)
example5 = np.random.rand(512)


app = dash.Dash()
app.layout = html.Div([
    html.Div(
        html.H1('example')),
    dcc.Dropdown(
        id = 'select',
        options = [{'value': 'heatmap1', 'label': 'heatmap1'},
                   {'value': 'heatmap2', 'label': 'heatmap2'}],
        value = 'heatmap1'),
    html.Div([
        dcc.Graph(
            id = 'image',
            style = {'width': 600,
                     'display': "inline-block",
                     'verticalAlign': 'top'},
            figure={}),
        dcc.Graph(
            id = 'small',
            style = {'width': 600,
                     'display': 'inline-block',
                     'verticalAlign': 'top'},
            figure={}),
        dcc.Graph(
            id = 'deflection',
            style = {'width': 600,
                     'display': 'inline-block',
                     'verticalAlign': 'top'},
            figure= {})])])


@app.callback(
    Output('small', 'figure'),
    [Input('image', 'hoverData')])
def update(hoverData):
    if hoverData is None:
        raise dash.exceptions.PreventUpdate
    else:
        selectx = hoverData['points'][0]['x']
        selecty = hoverData['points'][0]['y']
        select_example1 = example3[selecty, selectx, :]
        select_example2 = example4[selecty, selectx, :]
        fig1 = go.Figure()
        fig1.add_trace(go.Scatter(
            x = example5,
            y = select_example1,
            mode = 'markers')
        )
        fig1.add_trace(go.Scatter(
            x = example5,
            y = select_example2,
            mode = 'markers')
        )
    return fig1


@app.callback(
    Output('image', 'figure'),
    [Input('select', 'value')])
def mapping(factor):
    fig3 = go.Figure()
    if factor == 'heatmap1':
        fig3.add_trace(go.Heatmap(z = example1))
        fig3.update_layout(yaxis = dict(scaleanchor = 'x'))
    else:
        fig3.add_trace(go.Heatmap(z = example2))
        fig3.update_layout(yaxis = dict(scaleanchor = 'x'))
    return fig3


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

error code

キャプチャ1
キャプチャ11109×327 30.6 KB

Can you tell me if there is a solution?

2

This error happened to me a few times as there were values not fit to be displayed in the data (e.g. NaNs).

You can go deeper into the error traceback by opening the web console and looking into the line of the script which is mentioned (so here, callbacks.ts at line 330 and column 18). Or first try to comment each graph at a time to see which one causes the issue.

3

Thank you for answering.

web console

image
image507×651 30.3 KB

I think the scatter plot(id=small) below is the problem.
But However, it is considered that the np.random array does not contain NaN.

image
image545×762 155 KB

4

I haven’t solved this yet.
Is there a possibility of processing speed issues?
Can you tell me ??

5

Imo your graph id=‘small’ relies on some ‘incorrect’ data, that’s why the JSON error.

To be sure of that try using a small set of data that you manually set for your graph instead of the complete set of data you want to use.

7

I was able to identify the cause.
It was caused by anti-virus software.
Thank you for your answer.

1 Like