Display graph only after editing is finished in Datatable

Dash Python
1

Is it possible?-
I have a datatable which is editable and in my output i have Graph. I want that my graph should change or update only after i finish editing of my table in various cells. Eg. Editing table —> Submit Button ----> Updated Graph.

Currently in my code whenever i am changing the value of one cell by graph is updating. I want to first finish editing in my table —> submit button—> Output graph

2

Yes, it is possible. You need to pass only State of datatable to callback and button as an Input. I can give you example with dropdowns:

@app.callback(
    [Output('chart-1-1', 'figure'),
     Output('chart-2-1', 'figure')],
    [Input('calc-button', 'n_clicks')],
    [State('dropdown-year', 'value'),
     State('dropdown-month', 'value')])
def f(click, year, month):
     #here comes your function

In this example you can choose dropdowns’ values and than submit it with button. After click your chart is updated.

3

@namrata This should behave as expected: Updates to the table are only reflected in the Graph when the Submit button is clicked. As mentioned by @lance the trick is to use State for the props you want to use in your callback but that you want to use to trigger the callback (as opposed to Input). Hope this helps.

import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

from dash_core_components import Graph
from dash_html_components import Button, Div
from dash_table import DataTable

import pandas as pd

data=[
    dict(x=0, y=2),
    dict(x=1, y=4),
    dict(x=2, y=1),
    dict(x=3, y=6),
]

columns=[{"name": i, "id": i, "type": "numeric"} for i in ['x', 'y']]

app = dash.Dash(__name__)

app.layout = Div([
    DataTable(
        id='table',
        columns=columns,
        data=data,
        editable=True
    ),
    Button(id='submit', children=['Submit']),
    Graph(id='graph')
])

@app.callback(
    Output('graph', 'figure'),
    [Input('submit', 'n_clicks')],
    [State('table', 'data')]
)
def update(n_clicks, data):
    if data is None:
        raise PreventUpdate

    return {
        'data': [{
            'x': [d.get('x') for d in data],
            'y': [d.get('y') for d in data],
            'line': {'shape': 'spline'}
        }],
        'layout': {'autosize': True}
    }

app.run_server(debug=True)
4

Thank You @Marc-Andre and @lance.This was helpful :slight_smile:

5

Hello guys,

My submit button works now. When i am trying to reset the table to default values i am using a separate callback

@app.callback(Output(‘table-dataset’,‘data’),
[Input(‘reset_button’, ‘n_clicks’)])
def update_table(reset):
return df.to_dict(‘records’)

It resets my table but i want to reset the graph also with is linked to my SUBMIT button
For graph output i am using this callback
@app.callback(Output(‘graph-display’, ‘figure’),
[Input( ‘submit_button’,‘n_clicks’),
Input(‘dropdown-dataset’, ‘value’)],
[State(‘table-dataset’,‘data’),
State(‘table-dataset’, ‘columns’)])

def update_simulation(submit, var , rows , columns):

How to connect these that on reset it resets my graph as well as table to default values