✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Live update dash_table

In my app, I have one graph and one Dash Table. Because the data source will be updated every 10 minutes, I want to update the graph and dash table if there is any new data points added to data source.

I used dcc.interval to get the data check and fig update every 10minutes. but it doesnt work for the dash table.

@jie - hm not sure what’s going on here. could you share a simple, reproducible example? How to Get your Questions Answered on the Plotly Forum

Hi @jie

Try:

return df.to_dict('records')

I have simplified code below as example. I could use dcc.interval to update the figure with a defined interval. but even with data points updated, the dash table still shows the original data before update…

import dash  #(version 1.12.0)
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

# -------------------------------------------------------------------------------------
# Import the cleaned data (importing csv into pandas)
df = pd.read_excel("datafortable.xlsx")

def get_data(n):
    raw=pd.read_excel('dataforgraph.xlsx')
    return raw
# -------------------------------------------------------------------------------------
# App layout
app = dash.Dash(__name__) # this was introduced in Dash version 1.12.0

app.layout = html.Div([
    dash_table.DataTable(
        id='live_table',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True, "hideable": True}
            for i in df.columns
        ],
        data=df.to_dict('records'),  
        editable=True,              
        page_current=0,             
        page_size=6,                
        style_cell={                
            'minWidth': 95, 'maxWidth': 95, 'width': 95
        },
        style_cell_conditional=[    
            {
                'if': {'column_id': c},
                'textAlign': 'left'
            } for c in ['country', 'iso_alpha3']
        ],
        style_data={                
            'whiteSpace': 'normal',
            'height': 'auto'
        }
    ),

    html.Br(),
    dcc.Graph(id='live_graph'),
    dcc.Interval(
        id='interval-component',
        interval=10000,
        n_intervals=0
    )

])

@app.callback(Output('live_graph','figure'),
            [Input('interval_component','n_intervals')])
def update_graph:
    raw=get_data(n)
    fig=px.scatter(raw,x='date',y='cost')
    return fig

@app.callback(Output('live_table','data'),
            [Input('interval_component','n_intervals')])
def update_table(n):
    df = pd.read_excel("datafortable.xlsx")
    return df

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

@AnnMarieW, do you mean only change the return? I tried, but still the same/ no update…

Hi @jie

Yes, I do mean just change the return in the callback that updates the table. It’s odd that it made no difference, because you should have had an error originally. (It needs to be a dictionary, not a dataframe)

It may be that the callback isn’t firing. Have you tried putting a print statement in the callback? Do you have another component called “live_table” anywhere else (like in another tab?)

I’m just guessing… without data, it’s not possible to see what’s happening. The rest of the code looks fine to me. Can you post something that reproduces the error?

One more thing to check…
The interval component is named:

“interval_component” in the callback, and
“interval-component” in the layout.

you are right, because of the typo there was no error came out. I corrected it, and use your solution, it works now!!
Thank you very much!
I will pay more attention to my code.

1 Like

Hello, just one more note, it should be ‘interval=600000’ for a 10 minute update time.