Live update dash_table

Dash Python
1

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.

IMG_5248
IMG_52482970Ɨ2768 3.72 MB
IMG_5249
IMG_52492940Ɨ791 935 KB

2

@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

3

Hi @jie

Try:

return df.to_dict('records')
4

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)
5

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

6

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?

7

One more thing to checkā€¦
The interval component is named:

ā€œinterval_componentā€ in the callback, and
ā€œinterval-componentā€ in the layout.

9

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
10

Hello, just one more note, it should be ā€˜interval=600000ā€™ for a 10 minute update time.