dcc.Interval not updating automatically , graph only updates with page refresh (With working code and data)

Dash Python
1

I am trying to make a live updating dash app but the live update only shows when I manually press the refresh button on the web page until then the graph doesn’t update , I am trying to generate a progressively updating heat map from some data derived from sensor reading to show how it would look like if the data is read in real time.

Data source file to be used (1 MB in size)

import dash 
from dash.dependencies import Output, Input
import dash_core_components as dcc 
import dash_html_components as html 
import plotly 
import pandas as pd 
import random 
import plotly.graph_objs as go 




# The csv file for this dataset used here can be downloaded from:
#  https://easyupload.io/0ni29p (Hyperlinked in post as well)

cols = [  'shot' , 'chan' , 'peak_amplitude',  'onset_time_(ms)', 'bubble_period_(ms)']
cols_bubble_period  = [ 'shot' , 'chan' ,  'bubble_period_(ms)']
source_df = pd.read_csv('seq-4bubbleQC.txt').drop(['sequence', 'file'], axis=1)
source_df.columns = cols
source_df.loc[source_df['shot'] % 2 == 0, 'chan'] += 18

all_results =  pd.DataFrame(columns = cols)
i=0

def df_to_plotly(df):
    return {'z': df.values.tolist(),
            'x': df.columns.tolist(),
            'y': df.index.tolist()}


  
app = dash.Dash(__name__) 
  
app.layout = html.Div( 
    [ 
        dcc.Graph(id = 'live-graph', animate = True),
        html.Button('START_PLOT', id='plot_start',n_clicks=0),
        html.H2(id='hidden-div', style= {'display': 'none'} ),

        dcc.Interval( 
            id = 'graph-update', 
            interval = 5*1000, 
            n_intervals = 0
        ), 
    ] 
) 

@app.callback( 
    Output('hidden-div', 'children'), 
    [ Input('graph-update', 'n_intervals') ],
    [Input('plot_start', 'n_clicks')] 
) 

def update_frame(n_clicks, n_interval):
    global source_df 
    global i
    global all_results

    if n_clicks == 0:
        raise dash.exceptions.PreventUpdate()

    all_results = all_results.append((source_df[i: i+36]))
    i+=36
    #print(i)



@app.callback( 
    Output('live-graph', 'figure'), 
    [ Input('graph-update', 'n_intervals') ],
    [Input('plot_start', 'n_clicks')] 
) 
  
def update_graph_heat(n_clicks, n_interval): 

    global all_results
    

    all_results_1 = all_results.apply(pd.to_numeric)
    #all_results_1 = all_results_1.drop_duplicates()
    #all_results_1.to_csv('all_results.csv')
    df_s1 = all_results_1.loc[all_results_1['chan'] <=18]
    df_s1_bp = df_s1[cols_bubble_period]
    #print(df_s1_bp)
    #df_s1_bp.to_csv('test_data.csv')
    df_s1_pivoted = df_s1_bp.pivot(  'chan', 'shot', 'bubble_period_(ms)')
    
    data = go.Heatmap(df_to_plotly(df_s1_pivoted) ,  colorscale='rainbow', zmin=30.0, zmax=210.0)
    return {'data': [data], 
            'layout' : go.Layout(xaxis_nticks=20, yaxis_nticks=20)} 

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

The graph only updates when a manual page refresh is done , how can I make the updated graph appear automatically?

2

sorry for bumping such an old thread, but it’s the only thread I have found so far and I seem to be running into the same issue - were you able to find a solution? TIA

3

Hi @nc12 welcome to the forums.

Try converting your layout into a function. This should solve your problem.

4

thank you for your help!

the change didn’t work on it’s own, however I found an example that seemed to work but I was unable to find the relevant documentation - on callback, return a tuple (data, trace to add to, elements to keep)

so for example:

@app.callback(
Output(“graph”, “extendData”),
Input(“update”, “n_intervals”)
)
def update_data(intervals):
return (dict(x=[[x1]] y=[[y1]]), [0], 1000)

this works and live updates the graph on trace0

my new issue is, how can I add data to a second trace?

edit
found relevant docs - dccGraph function - RDocumentation and seem to have figured it out:
return [
dict( x=[ [x1], [x2] ], y=[ [y1], [y2] ] ), # data to add
[0, 1], # traces to add to
]

1 Like