Plotly dash, updating a live figure on a dash application jinja?

Question

I have a BI interview in a few days and they want me to prepare a dashboard. I don't have access to power BI or Tableau so I'm trying to build up something with Plotly dash however I haven't really built anything fancy using it and I'm a bit inexperienced. I'm pretty new to web development and come from a data background. I was hoping someone may be able to enlighten me on how I could jinja in Plotly dash.

I have my app layout below, someone helped me fix the drop-down issue I had and it's coming together and I was hoping one of the geniuses on here might be able to help me out. The bit I'm trying to update is where it is saying total number jobs and then feed in a value calculated elsewhere. I know in HTML you would use {{}} but this is throwing an error.

Also if you are a plotly dash wizard, please can you help me figure out to have my dashboard laid out differently. The layout is currently

Figure Figure FIgure Figure

but I'm trying to make it look more like

Figure Figure Text Figure Figure

I love how amazing the community here is and thanks for your help in advance.

app.layout = html.Div([
    html.H1("New York City Job Postings", 
    style = {'text-align': 'center', 'font-family': 'Helvetica'}
    ),
    html.P('The total number of jobs is:', {{number_of_jobs}}),
    html.Div(
        className="row",
        children=[
            html.Div(
                className="eight columns",
                children=[
                    html.Div( 
                        #Job postings graph
                                    dcc.Graph(
                                    id='left-graph',
                                    figure=fig,
  
                         )
                    ),
                    #Most job vacancies
                    html.Div(
                        dcc.Graph(
                            id='right-graph',
                            figure=fig5
                        )
                    )
                ]
            ),
            
        ]
    ),
    html.Div(
        className="six columns",
        children=[
                    html.Div(
                        [html.H2('Job posting type report', style
                        ={'margin-right': '2em', 'font-family': 'Helvetica'})
                        ]),
                    dcc.Dropdown(id='report_type', 
                                options=[
                                        {'label': 'Full vs part time ', 'value': 'OPT1'},
                                        {'label': 'Internal vs external', 'value': 'OPT2'}
                                        ],
                                placeholder='Select a report type',
                                multi=False,
                                clearable=False,
                                style={'width':800, 
                                'padding':3, 
                                'font-size':20, 
                                'text-align-last':'center', 
                                'font-family': 'Helvetica'}),

                        dcc.Graph(id='report_type_', figure = {}),
                    

                        #Salary Distributions

                    html.Div(
                        [html.H3('Salary Visuals', style=
                        {'margin-right': '2em', 'font-family': 'Helvetica'}
                                )
                            ]
                        ),
                    dcc.Dropdown(id='salary_visuals', 
                                options=[
                                        {'label': 'Distribution Plot', 'value': 'OPT1'},
                                        {'label': 'Box Plot', 'value': 'OPT2'}
                                        ],
                                placeholder='Select a report type',
                                multi=False,
                                clearable=False,
                                style={'width':800, 
                                'padding':3, 
                                'font-size':20, 
                                'text-align-last':'center', 
                                'font-family': 'Helvetica'
                                        }
                                ),

                        dcc.Graph(id='salary_distribution', 
                        figure = {}
    )])
])

Answer 1

Welcome to the Dash community @user14219014,

If you don't need to use the callback because you don't need user interaction, you can do something like:

jobs = len(df)
html.P('The total number of jobs is: {}'.format(jobs))