Black Lives Matter. Please consider donating to Black Girls Code today.

Animated Heatmap in Dash

Hi,

I’m trying at the moment to build an animated heatmap and facing the problem that I can update the z-values, however the colors are not changing. Do you have an idea, how to solve this?

Here is my minimal example:

import dash
from dash.dependencies import Output, Input
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 numpy as np

X = deque(maxlen=20)
x = [[1.0,2.0,3.0],
                        [4.0,5.0,6.0],
                        [7.0,8.0,9.0]]
X.append(x)

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=True),
        dcc.Interval(
            id='graph-update',
            interval=1*1000
        ),
    ]
)
@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph(input_data):
    x = [[random.uniform(0,10), 2.0, 3.0],
         [4.0, 5.0, 6.0],
         [7.0, 8.0, random.uniform(0,10)]]
    X.append(x)

    data = go.Heatmap(
            z=X[-1]
            )

    return {'data': [data], 'layout': {
                    'title': 'Basic Dash Example'}
            }



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

Best regards
Jonas

Fixed it. Leave “animate=True” out, and everything works :slight_smile: