✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Error: update must be a key:value in dcc.Graph's extendData property

I was trying to use extendData property of dcc.Graph(), but show the mentioned error. I used the following code. The ext variable is a array of dictionary as expected by the extendData.

import dash
from dash.dependencies import Output, Input,State
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
from collections import deque
import plotly.express as px
import dash
import dash_html_components as html

X =1

app = dash.Dash(__name__)
fig = go.Figure(
    data=[go.Scatter(x=[1], y=[1],mode="lines+markers",)],
    layout=go.Layout(
        title=go.layout.Title(text="A Figure Specified By A Graph Object")
    )
)

def serve_layout():
    return html.Div([dcc.Graph(id="live-graph",figure=fig), dcc.Interval(
            id='graph-update',
            interval=10
        )])

app.layout = serve_layout

@ app.callback(Output("live-graph", "extendData"),
        [Input("graph-update", "interval")],
        [State("live-graph", "figure")])
def update_graph_scatter(inter,existing):
    global X

    x_new = existing['data'][0]['x'][-1] + 1
    y_new = random.random()

    ext=[dict(x=[[x_new]], y=[[y_new]])]
    print(ext)
    return ext, [0],100

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

Can you give me idea where is the problem?

Hi @mainul

I don’t now about extendData but you have one Output and the return has 3 elements:

  • ext
  • [0]
  • 100

:thinking:

Because extendData expects 3. From the documentation:

extendData ( list | dict ; optional): Data that should be appended to existing traces. Has the form [updateData, traceIndices, maxPoints]

@mainul

then the return must be between [ ]:

    return [ext, 0, 100]

Not sure about second element :thinking:

Tried that also, resulted in the same error as before.

The error goes away if I don’t return the other 2, which are optional. I don’t know why.

return ext

But this really does not made the code work. Because interval is not working as intended. Only two data point on the dcc.Graph and that’s it. No further update on data points.

Why?

Review if the graph is working as expected before adding the extendData, I remember that when I try the code without any callback it just showed one point. :thinking:

Hi, I had a problem in the code. I mis-wrote the interval property.
Input("graph-update", "n_intervals")

1 Like