Nrthugu

Does anyone know how to dynamically generate a TABLE of data based on the user input using Dash_Table_Experiments (Python code)?

This code is static, however, I would like to find a way to make it dynamic. Thus, when a user enters a ticker symbol the TABLE will automatically update with the pertinent data below the chart.

The dataframe will change because it is generated from an api (i.e. Alpha Vantage), thus it cannot be defined as a static table. See code below.

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_table_experiments as dt

import json

import pandas as pd

from alpha_vantage.timeseries import TimeSeries



print(dcc.__version__) # 0.6.0 or above is required



app = dash.Dash()

ts = TimeSeries(key='', output_format='pandas')

data1, meta_data = ts.get_daily(symbol=inputsymbol, outputsize='full')

date=data1.reset_index(level=['date'])

df=(date.tail(10))

DF_SIMPLE = df



app.config.supress_callback_exceptions = True

app.scripts.config.serve_locally = True



app.layout = html.Div([

    dcc.Location(id='url', refresh=False),

    html.Div(id='page-content'),

    html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})

])





index_page = html.Div([

    html.H1('Page Home'),

    html.Br(),

    dcc.Link('Go to Home', href='/'),

    html.Br(),

    dcc.Link('Go to Page 1', href='/page-1'),

])



page_1_layout = html.Div([

    html.H1('Page 1'),

    html.Br(),

    dcc.Link('Go back to home', href='/'),



    html.H4('DataTable'),

    dt.DataTable(

        rows=DF_SIMPLE.to_dict('records'),



        # optional - sets the order of columns

        #columns=sorted(DF_SIMPLE.columns),



        editable=False,



        id='editable-table'

    ),

    html.Div([

        html.Pre(id='output', className="two columns"),

        html.Div(

            dcc.Graph(

                id='graph',

                style={

                    'overflow-x': 'wordwrap'

                }

            ),

            className="ten columns"

        )

    ], className="row"),



])



@app.callback(

    dash.dependencies.Output('output', 'children'),

    [dash.dependencies.Input('editable-table', 'rows')])

def update_selected_row_indices(rows):

    return json.dumps(rows, indent=2)



@app.callback(

    dash.dependencies.Output('graph', 'figure'),

    [dash.dependencies.Input('editable-table', 'rows')])

def update_figure(rows):

    dff = pd.DataFrame(rows)

    return {

        'data': [{

            'x': dff['x'],

            'y': dff['y'],

        }],

        'layout': {

            'margin': {'l': 10, 'r': 0, 't': 10, 'b': 20}

        }

    }



# Update the index

@app.callback(dash.dependencies.Output('page-content', 'children'),

              [dash.dependencies.Input('url', 'pathname')])

def display_page(pathname):

    if pathname == '/page-1':

        return page_1_layout

    else:

        return index_page

app.css.append_css({

    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'

})



if __name__ == '__main__':

    app.run_server(debug=True)