Real-time extending Dataframe to display news notification in dash

Dash Python
1

I am trying to do a real time dashboard, so i can stream news notification every 2 or 3 seconds.I am trying to integrate this table in a dashboard with other real time plot, as you can see in the example of code below. I have made this small dashboard, with a dynamic plot upside and a table downside.

I would like to make a table which start with one row only. Then once the next news is streamed, i get another row, etc. For the moment i am just trying to make a dataframe that add a raw with a random string every second. (it can be 2 or 3 seconds)

I have tried to add a new raw by using data.append({‘lib’: ‘C’, ‘qty1’: ‘E’}) in the callback, but without success.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from numpy.random import randint
import time

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

columns=[{"lib": "A", "qty1": "A"},{"lib": "B", "qty1": "B"}]
df = pd.DataFrame(columns)


app.layout = html.Div(children=[
    html.H1(children='Hello World!', id='first'),
    dcc.Interval(id='timer', interval=1000),
    html.Div(id='dummy'),
    dcc.Graph(
            id='example-graph',
            figure={
                'data': [
                    {'x': [1, 2, 3],
                     'y': [4, 1, 2],
                     'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3],
                     'y': [2, 4, 5],
                     'type': 'bar', 'name': 'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization'
                }
            }
        ),
    dash_table.DataTable(
                id='table-editing-simple',
                columns=[
                    {"lib": "A", "qty1": "A"},
                    {"lib": "B", "qty1": "B"}],
                data = df.to_dict("rows")
                ),
    html.Div(
            html.H5(
                id='table-action-outputs',
                children='',
                style={'textAlign': 'left'}),
            style={'width': '100%', 'display': 'inline-block', 'float': 'left'},
            )
])

@app.callback(output=Output('example-graph', 'figure'),
              inputs=[Input('timer', 'n_intervals')])
def update_graph(n_clicks):
    return {
                'data': [
                    {'x': [1, 2, 3],
                     'y': [random.randint(0, 10) for x in range(3)],
                     'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3],
                     'y': [random.randint(0, 10) for x in range(3)],
                     'type': 'bar', 'name': 'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization'
                }
            }

@app.callback(Output('table-action-outputs', 'children'),
              [Input('table-editing-simple', 'data'),
              Input('timer', 'n_intervals')])

def update_database(n_clicks):
    data.append({'lib': 'C', 'qty1': 'E'})

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

First i don’t see the values displaying in the table. I don’t know why it is not showing.

I have tried to add a new raw by using data.append({‘lib’: ‘C’, ‘qty1’: ‘E’}) in the callback, but without success.

Any suggestions on the above would be greatly appreciated! Thank you so much in advance!