Dash , how to return two figures?

Dash Python
1

The code below is working but i would like to return fig and fig2.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from datetime import datetime
import plotly.express as px
import pandas as pd
import numpy as np

app = dash.Dash()
df = pd.DataFrame({‘DateTime’:pd.date_range(start=‘2021-12-08’, end=‘2022-12-08’)})
df[‘A’] = np.random.randint(0,10, size=len(df))
df[‘B’] = np.random.randint(0,5, size=len(df))
app.layout = html.Div([
html.H1(‘This is the title’),
html.Div([
html.H3(‘Select start and end dates:’),
dcc.DatePickerRange(
id=‘my_date_picker’,
min_date_allowed = df.DateTime.min().to_pydatetime(),
max_date_allowed = datetime.today(),
start_date = df.DateTime.min().to_pydatetime(), # datetime(2022, 10, 1),
end_date = datetime.today()
)
], style={‘display’:‘inline-block’}),
dcc.Graph(
id=‘my_graph’
)
])
@app.callback(
Output(‘my_graph’, ‘figure’),
[Input(‘my_date_picker’, ‘start_date’),
Input(‘my_date_picker’, ‘end_date’)])
def update_graph(start_date, end_date):
v start = datetime.strptime(start_date[:10], ‘%Y-%m-%d’)
end = datetime.strptime(end_date[:10], ‘%Y-%m-%d’)

df = pd.DataFrame({‘DateTime’:pd.date_range(start=‘2021-12-08’, end=‘2022-12-08’)})
df[‘A’] = np.random.randint(0,10, size=len(df))
df[‘B’] = np.random.randint(0,5, size=len(df))
df=df[(df[‘DateTime’]>start) & (df[‘DateTime’]<end)]
fig = px.line(df, x=‘DateTime’ , y=[‘A’,‘B’], markers=False)
fig.update_layout(title=“Graph1”)
fig2 = px.line(df, x=‘DateTime’ , y=[‘A’], markers=False)
fig2.update_layout(title=“Grap2”)
return fig

if name == ‘main’:
app.run_server()

2 
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from datetime import datetime
import plotly.express as px
import pandas as pd
import numpy as np

app = dash.Dash()
df = pd.DataFrame({"DateTime": pd.date_range(start="2021-12-08", end="2022-12-08")})
df["A"] = np.random.randint(0, 10, size=len(df))
df["B"] = np.random.randint(0, 5, size=len(df))
app.layout = html.Div(
    [
        html.H1("This is the title"),
        html.Div(
            [
                html.H3("Select start and end dates:"),
                dcc.DatePickerRange(
                    id="my_date_picker",
                    min_date_allowed=df.DateTime.min().to_pydatetime(),
                    max_date_allowed=datetime.today(),
                    start_date=df.DateTime.min().to_pydatetime(),  # datetime(2022, 10, 1),
                    end_date=datetime.today(),
                ),
            ],
            style={"display": "inline-block"},
        ),
        dcc.Graph(id="my_graph"),
        dcc.Graph(id="my_graph_2"),
    ]
)


@app.callback(
    Output("my_graph", "figure"),
    Output("my_graph_2", "figure"),
    [Input("my_date_picker", "start_date"), Input("my_date_picker", "end_date")],
)
def update_graph(start_date, end_date):
    start = datetime.strptime(start_date[:10], "%Y-%m-%d")
    end = datetime.strptime(end_date[:10], "%Y-%m-%d")

    df = pd.DataFrame({"DateTime": pd.date_range(start="2021-12-08", end="2022-12-08")})
    df["A"] = np.random.randint(0, 10, size=len(df))
    df["B"] = np.random.randint(0, 5, size=len(df))
    df = df[(df["DateTime"] > start) & (df["DateTime"] < end)]
    fig = px.line(df, x="DateTime", y=["A", "B"], markers=False)
    fig.update_layout(title="Graph1")
    fig2 = px.line(df, x="DateTime", y=["A"], markers=False)
    fig2.update_layout(title="Graph2")
    return fig, fig2


if __name__ == "__main__":
    app.run_server()
1 Like
3

Thanks a lot !
What’s the right way te make a Blockquote ?

4

If you look up a markdown syntax cheat sheet, that should help you out. Code put between 3 backticks will be formatted as a code block. ```

5

You can also use this button for preformatted text.

image

1 Like
6

In the code the dataframes was two times defined. Is it possible to pass it to the callback as an argument ?

7

Yes. You can use it as global variable (not recommended) or use a dcc.Store().

Have a read here: