python - Plotly Dash dcc.Interval live update not working (With working Code example and data )

Question

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 is available at : Data source used in code below 1MB in size only

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?

Answer 1

Your callbacks are constructed incorrectly. All inputs should be within the same list. Here is what your first one should look like:

@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...
    # etc.