extendData for HeatMap

I´m writting a live app that loads a large amount of data into a Heatmap. Currently I´m using the same method as in the examples.

app = dash.Dash()

app.layout = html.Div([
        interval=1*100, # in milliseconds

@app.callback(Output('live-update-graph', 'extendData'),
              Input('interval-component', 'n_intervals'))
def update_plot(n_interval):
    #parse data and load into dataframe
    #create the heatmap
    fig = go.Figure(data=go.Heatmap(
    return fig

app.run_server(debug=True, use_reloader=False)

I’m trying to achieve a real time heat map plot. The issue is that when I run the code, it’ll only plot the initial plot and not add any data and visualize it. Does anyone know how I could achieve this?


Could you update figure instead of the extendData property?

Wouldn’t that require transferring all the data again?

I’ve been able to update now with figure. The issue with this is that I can’t add to an existing plot (to my knowledge as I’m new to Dash) which leaves me constantly reloading a larger dataframe through each iteration from a large data set.

Disclaimer: I’m new to Dash.

It was my understanding that extendData would allow me to append data to an existing plot. Am I wrong in thinking this?

No, that is correct :slight_smile:

1 Like

If the PlotlyJS graphing library supports updating heatmap data via extendTraces function call, then it should work with the extendData prop. This would be significantly faster than returning a new figure each interval.

@nqv also had a similar question in the recent past, which I just saw today. I haven’t looked in much detail; my primary use case remains scatter plot traces. I need to take a deeper look at heat maps.

Note: the extendData callback expects data to be formatted differently than with figure (or even figure.data). AFAIK you cannot use plotly.graph_objects with extendData