Plotly Dash: Update graph with dropdown input

Question

I am trying to add points to a predefined figure through a dropdown in Dash. If I select one value I want to add a point in a pair of coordinates, and if I select a different value I want to update the graph in a different pair of coordinates. First of all the function to graph the figure is the following:

import plotly.graph_objects as go
import plotly as py
py.offline.init_notebook_mode(connected = True)

def graficar_rectangulos(fig):

    fig.add_trace(go.Scatter(
        x=[1.5],
        y=[0.75],
        mode="text",
    ))

    # Set axes properties
    fig.update_xaxes(range=[0, 7], showgrid=False)
    fig.update_yaxes(range=[0, 3.5])

    # Add shapes
    fig.add_shape(
            # unfilled Rectangle
                type="rect",
                x0=1,
                y0=1,
                x1=2,
                y1=3,
                line=dict(
                    color="RoyalBlue",
                ),
            )

    fig.update_shapes(dict(xref='x', yref='y'))

    return True

After that is where I have the problem and specifically updating the graph. I am not sure which are the parameters that should be returned by the function update graph to update the figure with the scatter plots (I am using Jupyter notebook):

from jupyter_plotly_dash import JupyterDash
import plotly.graph_objects as go

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

app = JupyterDash('SimpleExample')

fig = go.Figure()
graficar_rectangulos(fig)

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'A', 'value': 'A'},
            {'label': 'B', 'value': 'B'},
            {'label': 'C', 'value': 'C'}
        ],
        value='NYC'
    ),
    dcc.Graph(id='graph-court', figure = fig)
]
)

@app.callback(
    Output('graph-court', 'figure'),
    [Input('dropdown', 'value')])

def update_figure(selected_value):
    if selected_value=='A':
        x,y=3,3
    else:
        x,y=2,2
       
    return add_trace(go.Scatter(x=x,y=y,marker = dict(size=[15], color=['green']), mode='markers'))

app

How does the function update_figure should work?

user11989081 · Accepted Answer · 2020-04-06 05:55:59Z

4

import dash
import plotly as py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
from jupyter_plotly_dash import JupyterDash
py.offline.init_notebook_mode(connected = True)

app = JupyterDash('SimpleExample')

app.layout = html.Div([

    dcc.Dropdown(id='dropdown', options=[
            {'label': 'A', 'value': 'A'},
            {'label': 'B', 'value': 'B'}],
            value = 'A'),

    dcc.Graph(id='graph-court')

])

def create_figure():

    layout = dict(xaxis=dict(range=[0, 7], showgrid=False), yaxis=dict(range=[0, 3.5]), showlegend=False,
             shapes=[dict(type='rect', x0=1, y0=1, x1=2, y1=3, line=dict(color='RoyalBlue'))])

    data = go.Scatter(x=[1.5], y=[0.75], text='Some text', mode='text')

    fig = go.Figure(data=data, layout=layout)

    return fig

@app.callback(Output('graph-court', 'figure'), 
              [Input('dropdown', 'value')])
def update_figure(selected_value):

    if selected_value == 'A':

        x, y = 3, 3

    else:

        x, y = 2, 2


    fig = create_figure()

    fig.add_trace(go.Scatter(x=[x], y=[y], marker=dict(size=15, color='green'), mode='markers'))

    return fig

app

edited Apr 6, 2020 at 5:55

answered Apr 5, 2020 at 15:50

user11989081

8,75211 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

agm Over a year ago

thank you? how can I pass the rectangle in a function? since my original figure is more complex than this.

user11989081 Over a year ago

I updated my answer. The function create_figure() generates the initial figure with the rectangle, while the callback update_figure() adds a new data point based on the dropdown selection.

Collectives™ on Stack Overflow

Plotly Dash: Update graph with dropdown input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related