How to change the layout from inside the callback

📊 Plotly Python
1

I want to display the data based on quarter .The quarter value is selected from the multiple dropdown , if no quarter is selected I want to display the data from all quarters , If one quarter is selected then I want to show only one graph at center of the page , if 2 qtrs are selected two graph should be shown each occupying half of the space and so on , something like this :

question
question1152×648 6.19 KB

I want to change the layout depending on the quarters selected in the dropdown . How can I achieve this ? Thanks !

2

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

import dash_bootstrap_components as dbc
from dash import html

row = html.Div(
    [
        dbc.Row(dbc.Col(html.Div("A single column"))),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns")),
                dbc.Col(html.Div("One of three columns")),
                dbc.Col(html.Div("One of three columns")),
            ]
        ),
    ]
)

You just need this.

3

@stu No , actually I want to change the layout based on number of quarters selected like if all quarters is selected I want all four quarters with equal space , if two three quarters are selected I want to display three quarters with equal space and so on . The layout should change based on number of quarters selected from inside the callback

4

Make inferences from analogy. Put them into your callback.

5

@stu I am new to plotly dash . Can u plz elaborate a bit more with an example ?

6

Welcome! Check the docs.

Take a moment to understand how callbacks work.

7

Hi @Maverick! The drawing you attached was really helpful to understand what your goal is, thank you for including it!

I made some simple code based on dbc that I think will give you what you want.


from dash import Dash, dcc, html, Input, Output, State, MATCH, ALL
import dash_bootstrap_components as dbc
import pandas as pd

# if you don't include the external_stylesheets the alignment may not work
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = Dash(__name__, external_stylesheets=external_stylesheets)

quarters = ['Q1','Q2','Q3','Q4']

# create mock data
df = pd.DataFrame(
    {'quarter':quarters, 'content':['Results for quarter {}'.format(i) for i in range(1,5)]}
    )

# create a layout with the dropdown, a blank like and an empty space where the result of the selection would be
app.layout = html.Div([
    dbc.Row(
        dcc.Dropdown(
        id='dropdown',
        options = quarters,
        value = ['Q1'],
        multi = True
    )),
    dbc.Row(html.Br()),
    dbc.Row(
        id = 'output-goes-here',
        align = 'center'
        )
    ], className="pad-row")

@app.callback(
    Output('output-goes-here', 'children'),
    Input('dropdown', 'value')
    )
def callbackf(q) :
    if type(q) == str : q = [q]

    # determine the width that each col should have

    width = 12/len(q)

    # create a list that has as many cols as selected quarters
    # inside each col, a html.Div component gets the corresponding content
    # in this case it's only a text but in your case it should be a table
    row_content = [
        dbc.Col(
            html.Div(df.query('quarter == "{}"'.format(i))['content'],
                     className='text-center'),
                width = 12/len(q)) for i in q
        ]
    
    return row_content

if __name__ == '__main__':
    app.run_server(debug=True)

The data I used is very simple but you can use this code as a template. You would only have to modify the df and, inside the callback, maybe you should use a datatable object instead of html.Div.

I hope this helps! Good luck! :four_leaf_clover:

1 Like