Plotly layout issues with dropdown not placed next to subplots

šŸ“Š Plotly Python
1

I am trying to place two subplots beside a dropdown but for some reason they keep going to the next row. Could someone tell me what Iā€™m doing wrong?

import pandas as pd 
pd.set_option('display.max_rows', None)
# Run this app with `python app.py`
from dash import Dash, dcc, html
#import plotly.express as px
from plotly.subplots import make_subplots
from plotly import graph_objects as go
import dash_bootstrap_components as dbc
import pandas as pd
Dash(assets_ignore='.*ignored.*')

app = Dash(__name__)


colors = {
    'grey_plot_bg':'#353535',
    'background': '#111111',
    'text': 'teal',
    'plottext':'crimson',
    "0":"silver",
    "1":"#FBEC5D",
    "5":"#50C878",
    "10":"#40E0D0",
    "15":"#A23D60",
    0:"silver",
    1:"#FBEC5D",
    5:"#50C878",
    10:"#40E0D0",
    15:"#A23D60",
    'Linux':'#50C878',
    'Windows':'#66D3F4',
    'Primer':'#FFD700',
}

# pandas dataframe used for plots

current_merged_df =  pd.DataFrame({
    'student': ['scooby','doobie','doo'],
    'completed' : [ 55 , 55 , 100 ]
    })

students_topics_earned = pd.DataFrame({
    'topic': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','A','A','B','B','C','C'],
    'completed' : [ 55 , 55 , 100 , 95 , 45 , 99 , 75 , 64 , 93 , 10 , 15 , 55 , 45 , 78 , 98 , 33 ],
    'platform' : ['Primer','Primer','Primer','Primer','Primer','Primer','Primer','Primer', 'Primer', 'Primer','Linux','Windows','Linux','Windows','Linux','Windows']
    })


# add the average scatter polar graphs for the class
class_category_earned = students_category_earned.groupby(['platform','Category']).mean().round().reset_index()
class_topics_earned = students_topics_earned.groupby(['platform','topic']).mean().round().reset_index()

# functions to creating the plots


               
def student_topic_scatter_polar_graph(df,platform):
    print(df)
    df_filtered = df[df['platform']==platform].sort_values(by='topic',ascending=True)
    color = colors[platform]

    fig = go.Scatterpolar(
                    r=df_filtered.completed,
                    theta=df_filtered.topic,
                    fill='toself',
                    name="%s - Focused Topics"%platform,
                    fillcolor=color, 
                    opacity=0.6,
                    line=dict(color=color),
                    mode='markers'
    )
    return fig


fig = go.Figure()

# calling the plot functions

class_linux_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Linux')
class_windows_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Windows')
class_Primer_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Primer')



class_topic_subplot =  make_subplots(rows=2, cols=2,
                    subplot_titles=['Primer','Linux','Windows'],
                    specs=[
                            [{"rowspan": 1,"colspan":2,"type": "polar"},None],
                            [ {"rowspan": 1,"type": "polar"}, {"rowspan": 1,"type": "polar"}]
                            ])

class_topic_subplot.add_trace(class_Primer_topic_scatter_polar_fig,row=1,col=1)
class_topic_subplot.add_trace(class_windows_topic_scatter_polar_fig,row=2,col=1)
class_topic_subplot.add_trace(class_linux_topic_scatter_polar_fig,row=2,col=2)

class_topic_subplot.update_layout(
    autosize=False,
    width=800,
    height=600,)




def populate_student_selection_dropdown(current_merged_df):
    if current_merged_df is not None:
        merged_df = pd.DataFrame.from_records(current_merged_df)
        return [s for s in merged_df['student'].unique()]

student_selection_card = dbc.Card(
    [
        html.H6("Select Individual Students for Analysis:",className="card-text"),
        dcc.Dropdown(['scoobie','doobie','doo'],id="student_selection_dropdown",multi=True,style={'display':False},persistence=True)
    ]
)
# creating card that the subplots will be in
card2 = dbc.Card(
                    [
                        dbc.CardBody([
                            html.H4("Student Name", className="card-title"),
                            dcc.Graph(figure=class_topic_subplot),
                            
                        ])
                    ]
                )
# page layout

class_analysis_layout = dbc.Container([
    dbc.Row(
        [
            dbc.Col([card2],width=3),
            dbc.Col([student_selection_card],width=3),
            dbc.Col([card2],width=3)
        ])

])


app.layout = html.Div([
        class_analysis_layout
    ],
)


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

If you take a look at the class_analysis_layout, I believe that is where Iā€™m having the issue. I looked to see if there was a width property for the dropdown element but did not find one. I would have thought that setting the elements up in columns and setting the column width would do it but no luck. Any advice?

2

HI @jarelan ,

Since you are using dbc. you should include this:

app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP])

Maybe this solves your issue.