# Dynamically declaration of dash callback

**URL:** <https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696>\
**Category:** Dash Python\
**Created:** [September 8, 2017, 8:17am UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696 "2017-09-08T08:17:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kfyao](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kfyao](https://community.plotly.com/u/kfyao)\
**Post date:** [September 8, 2017, 8:17am UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/1 "2017-09-08T08:17:36Z")

</div>

Basically, I want to add 1-6 live update figures into my page. The actual number is decided by some condition run-time’ly. My current solution is to still declare the callbacks statically, and update the layout dynamically. So the ‘app.config.supress\_callback\_exceptions’ is needed. Once one of the maximum six graph object is added to the layout, the corresponding callback get fired every update interval. This concept basically works.  
My original idea was to call the make\_graph\_callback as needed so that only callbacks that is needed is declared. That would make it possible to support variant number of graphs in a single page. But I didn’t find a right place to call this function.  
Does anybody has a better solution than this?

```auto
    app = dash.Dash()
    app.config.supress_callback_exceptions=True
    def make_graph_callback(index):
        @app.callback(Output('live-update-graph'+str(index), 'figure'),
                      events=[Event('interval-component-update-graph', 'interval')])
        def graph_callback():
            ### get data to gdf ###
            return {
                'data': [
                    go.Scatter(
                        name=field,
                        mode='lines',
                        type='scatter',
                        x=gdf['Time'],
                        y=gdf[field],
                        line={'width':1, 'dash': 'solid','shape':'spline','smoothing':\
                        '0','simplify':True})for field in ['A','B','C']
                ],

                'layout': go.Layout(
                    xaxis={'title': 'My Title', \
                        'tickformat': '%m-%d %H:%M:%S',\
                    },
                    yaxis=dict(title='Readings'),
                    margin={'l': 100, 'b': 60, 't': 40, 'r': 100},
                )
            }
            return fig

    def getLayout():
        # get the number of graph to be shown to ngraph
        for i in range(ngraph):
            graphs.append(html.Div(dcc.Graph(id='live-update-graph'+str(i))))

        return html.Div([
            html.Div(graphs,id='graphs'),
            dcc.Interval(
                id='interval-component-update-graph',
                interval=3*1000 # in milliseconds
            ),
            dcc.Interval(
                id='interval-component-update-layout',
                interval=6*1000 # in milliseconds
            )
        ])

    app.layout = getLayout

    make_graph_callback(0)
    make_graph_callback(1)
    make_graph_callback(2)
    make_graph_callback(3)
    make_graph_callback(4)
    make_graph_callback(5)

    @app.callback(Output('graphs', 'children'),
                  events=[Event('interval-component-update-layout', 'interval')],
                  state=[dash.dependencies.State('graphs','children')])
    def update_graph_layout(current_graphs):
        # get the number of graph to be shown to ngraph
        for i in range(ngraph):
            graphs.append(html.Div(dcc.Graph(id='live-update-graph'+str(i))))

        return graphs

    if __name__ == ' __main__':
        app.run_server(debug=False, port=8090, host='0.0.0.0',processes=3)
```

---

<div class="post-metadata">

**Author:** ![baris](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@baris](https://community.plotly.com/u/baris)\
**Post date:** [January 26, 2018, 7:23pm UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/2 "2018-01-26T19:23:32Z")

</div>

Were you able to find a solution for adding callbacks dynamically?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 26, 2018, 9:47pm UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/3 "2018-01-26T21:47:15Z")

</div>

There have been several community discussions with examples for this. Try searching “dynamic callbacks” ([https://community.plotly.com/search?q=dynamic%20callbacks%20category%3A16](https://community.plotly.com/search?q=dynamic%20callbacks%20category%3A16)) or “generate callbacks” ([https://community.plotly.com/search?q=generate%20callbacks%20category%3A16](https://community.plotly.com/search?q=generate%20callbacks%20category%3A16))

---

<div class="post-metadata">

**Author:** ![baris](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@baris](https://community.plotly.com/u/baris)\
**Post date:** [January 29, 2018, 11:01am UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/4 "2018-01-29T11:01:40Z")

</div>

Thanks, simply using the app.callback function instead of the decorator I could do everything I wanted.

By the way, thank you for this awesome framework 🙂

---

<div class="post-metadata">

**Author:** ![Tigrus](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tigrus/32/3541_2.png) [@Tigrus](https://community.plotly.com/u/Tigrus)\
**Post date:** [July 7, 2018, 3:36pm UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/5 "2018-07-07T15:36:51Z")

</div>

Here is story, that can help you to add callback to newly created graph. I spent 3 days to make it from [this dash recipe](https://github.com/plotly/dash-recipes/blob/master/dash-add-graphs-dynamically.py):

```
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
html.Button(id='button', n_clicks=0, children='Add graph'),
html.Div(id='container'),
html.Div(dcc.Graph(id='empty', figure={'data': []}), style={'display': 'none'}),
])

app.config['suppress_callback_exceptions']=True

for i in range(10):
    @app.callback(Output('graph_{}'.format(i), 'children'), [
    Input('dropdown_{}'.format(i), 'value'),
    ])
    def graph_update(something):
        return html.H1(something)

@app.callback(Output('container', 'children'), [Input('button', 'n_clicks')])
def display_graphs(n_clicks):
    graphs = []
    for i in range(n_clicks):
        graphs.append(html.Div(children=[
            html.H1("graph_{}".format(i)),
            dcc.Dropdown(
                value=['a'],
                options=[{'label': i, 'value': i} for i in ['a', 'b', 'c', 'd']],
                multi=True,
                id='dropdown_{}'.format(i)
            ),
            html.Div(id="graph_{}".format(i)),
        ]))
    return html.Div(graphs)

if __name__ == ' __main__':
    app.run_server(debug=True, host='0.0.0.0')
```

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [July 17, 2018, 7:24pm UTC](https://community.plotly.com/t/dynamically-declaration-of-dash-callback/5696/6 "2018-07-17T19:24:54Z")

</div>

Hi can you give a minimal example of how you achieved this? I mean without calling:

```auto
    make_graph_callback(0)
    make_graph_callback(1)
    make_graph_callback(2)
    make_graph_callback(3)
    make_graph_callback(4)
    make_graph_callback(5)

```

i.e. without knowing the number of graphs before