plotly / dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
MIT License
174 stars 57 forks source link

Create more table in one page #95

Open elianalien opened 5 years ago

elianalien commented 5 years ago

Hey guys, i would like to show 2 dataframe table, one is the dataset and the other one is statistical calculation of the dataframe (pandas describe()) of the dataframe. but I couldn't manage to show it. here is my code:

# Define App Layout
app.layout = html.Div([
    # Title
    html.H2('Analytics Dashboard'),

    # Dropdown to choose the dataset
    html.Div([
        html.Label('Choose Your Data'),
        dcc.Dropdown(
            options = [{'label':i, 'value':i} for i in onlyfiles], 
            value = " ",
            id="field-dropdown"
            ), 
        ], 
        style = {'width':'25%', 'display':'inline-block'}
    ),

    # Visualize Dataframe using Dash's Data Table Experiments
    dt.DataTable(
        # initialize rows
        rows = [{}],
        # selection feature in dash table
        row_selectable = True,
        # filter feature in dash table
        filterable = True,
        # sort feature in dash table
        sortable = True,
        # initialize row selection array
        selected_row_indices = [],
        # data table id (for referencing)
        id = 'datatable'
    ), 

    dt.DataTable(
        rows = [{}],
        row_selectable = False,
        filterable = False,
        sortable = False,
        id = 'statisticalTable'
    ), 

    # Hidden div inside the app that stores the intermediate value
    # Use for sharing data between callback
    html.Div(id='intermediate-value', style={'display':'none'})
])

# Callback to read state change in dropdown
@app.callback(Output('intermediate-value','children'),[Input('field-dropdown', 'value')])
def updateTable(field_dropdown): # update function in dropdown change
    # pandas dataframe construct
    df = pd.read_csv(datapath+field_dropdown)
    return df.to_json(date_format='iso', orient='split')

@app.callback(Output('datatable','rows'),[Input('intermediate-value', 'children')])
def updateTable(jsonified_clean_data):
    print('update 1st table')
    dff = pd.read_json(jsonified_clean_data, orient='split')
    return dff.to_dict('record')

@app.callback(Output('statisticalTable','rows'),[Input('intermediate-value', 'children')])
def updateStatTable(jsonified_clean_data):
    print('update 2nd table')
    dff = pd.read_json(jsonified_clean_data, orient='split')
    stat = dff.describe()
    print(stat)
    return stat.to_dict('record')

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