1

I'm currently trying to draw density heatmap which gets updated in real time. This is the figure and app layout that I've defined.

figure = dict({
    "data" : [{"type": 'heatmap',
             "x" : [],
             "y" : []}],
    "layout" : {"xaxis" : [0,255], "yaxis" : [0,255]}
})
app.layout = html.Div(children=[
    html.Div([
        html.H1(children='Sensor Data'),

        html.Div(children='''
            3d Representation.
        '''),

        dcc.Graph(
            id='live-update-graph',
            figure = figure
        ),  
    ]),    
    dcc.Interval(
        id = 'clientside-time',
        interval = 10,
        n_intervals = 0
    )
])

This is the callback function which is supposed to update data each time.

phase = [i for i in range(256)]
phases = []
cycle = []
phases = phase *5

cycle = [[i] *256 for i in range(5)]
cycle = list(chain.from_iterable(cycle))    

@app.callback(
    Output('live-update-graph', 'extendData'),
    Input('clientside-time', 'n_intervals')
)
def update_store_data(time):
    df = DataFrame(storage[256*time : (time+5) * 256], columns = ['Intensity'] )
    df['Phase'] = phases

    print(time)
    return dict(x = [df['Phase']], y = [df['Intensity']])
if __name__ == '__main__':
    app.run_server(debug=True)

In my theory, list slicing is supposed to get different portion from storage list which has been initialized above. However, I don't see any graphs drawn after running this code. Is this the correct way to update data with a change in time?

Taki
  • 313
  • 4
  • 13
  • Can you share a more complete example, and what the goal of the code is exactly? The way you're accessing elements from `storage` using `time` you're bound to hit an index out of bounds if you let the app run for a while. – 5eb May 24 '21 at 20:50
  • @BasvanderLinden I'm just trying to plot different portion of storage list as time goes. And yes, I need to set the maximum limit on the index. – Taki May 25 '21 at 00:16

1 Answers1

1

From experimenting based on the code you've shown I think the graph not displaying properly has something to do with the interval value you chose.

When you set interval to 10 it means the callback will be triggered every 10 milliseconds (source), which is very short.

Increasing the interval made data appear in the graph when I tested your code with some dummy data.

Update

Also you're using a figure of type heatmap, but in your callback you're only returning values for x and y. So the graph wouldn't show up either way, because not all necessary dimensions of the figure are set.

By the way if you you're not satisfied by the refresh rate of 1 second you could also use a client side callback. Also see this nice answer here for more on extendData and client side callbacks.

5eb
  • 14,798
  • 5
  • 21
  • 65
  • Can I know what interval you've tried on your end? I've changed the interval to 1000 which is 1 second. I still don't get any images... – Taki May 25 '21 at 00:14
  • @Taki I've looked at your code again and I notice now that you're using a heatmap and a heatmap needs also needs a `z` dimension in addition to an `x` and a `y`. – 5eb May 27 '21 at 18:09