CODEWITHSUNDEEP
plotly-dash
Петр Чумаков
Петр Чумаков

Reputation: 11

Is it possible to have external (non-dash) button callback in dash app?

I have the html-template with a button. Let's say it is very important template and we dont want to remake it. It contains a button and some date inputs.

On the other hand, i have dash app, that only contains a graph in it's layout.

What I want is to update this graph based on external inputs from my template, not from the dash layout.

Template:

<!--Template-->
{%config%}

<input type="datetime-local" name="dateTimeLocalStart" id=SelectionFrom/>
<input type="datetime-local" name="dateTimeLocalEnd" id=SelectionTo/>
<button type="button" id="show_new_data">SHOW</button>

{%app_entry%}
{%scripts%}
{%renderer%}

Dash-layout:

app.index_string = template_file.read() # is this a way?

# the basic dash layout
app.layout = html.Div(children=[
    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': 'Mo'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

but if i am trying to callback it in dash like this

@app.callback(
    Output(component_id="example-graph", component_property="figure"),
    [Input(component_id="show_new_data", component_property="id")]
)
def update_graph():
    print("Update graph callback")
    return "" # this never happens

I expect callback to work, but getting this:

dash.exceptions.NonExistentIdException: 
Attempting to assign a callback to the
component with the id "show_new_data" but no
components with id "show_new_data" exist in the
app's layout.
  1. So, is there a way to make it work?
  2. Is it possible with Iframe?
  3. Or maybe it is possible to link this inputs to dash layout in a way?

Sorry, new to dash, and documentation is not-that-straight-forward.

Upvotes: 0

Views: 584

Answers (1)

Петр Чумаков
Петр Чумаков

Reputation: 11

As far as i digged it out, it's not possible yet in version 0.41.0

Dash needs Dash components for use in its callbacks, to the best of my knowledge. If you try to use a component that isn't specifically set up as a Dash component, then it won't be hooked up to the underlying React code. – @coralvanda

Upvotes: 1

Related Questions