Animated Heatmap in Dash

Dash Python
1

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

2

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