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 = {}
    )])
])

Welcome to the Dash community @user14219014, Are you using the callback to update the html children? And what is supposed to update that html? the dropdown? — Adam Schroeder, Dec 17 '21 at 15:24
Hahaha thank you! I perhaps need to add my name on here. I want to have the P tag with the total number of jobs to update with a number. I see on powerbi and tableau dashboards, they have aspects of text that update with values. Like the left hand side of this, https://learn.microsoft.com/en-us/power-bi/consumer/end-user-dashboards. html.P('The total number of jobs is:', {{number_of_jobs}}). I want the number of jobs to be refreshed with a value. — Cam Deardon, Dec 17 '21 at 15:59
Are you familiar with the callback in Dash? If you're trying to build a Dash app, you need to use the callback. If you're not familiar, I can show you how to use the callback to update html. — Adam Schroeder, Dec 17 '21 at 16:08
I have got a callback for various graphs and dropdown menu options how would I use callback to update the the number of jobs? it comes from this data df = pd.read_csv('nyc-jobs.csv') #total number of jobs number_of_jobs = len(df) — Cam Deardon, Dec 17 '21 at 16:22
So this video will teach you all about the callback: https://youtu.be/mTsZL-VmRVE — Adam Schroeder, Dec 17 '21 at 16:33
@AdamSchroeder Thanks so much for your help, I couldn't have got this far without you. I have a fully deployed web app now. Honestly, this is too much to ask you as a stranger on the internet, but I really want this to go well. Is there anything you think this is missing? https://leverdashboard.herokuapp.com/i_am_the_mayor/ Hope you're good bro. I owe you a beer — Cam Deardon, Dec 19 '21 at 22:00

Adam Schroeder · Answer 1 · 2021-12-17T16:35:21.760

0

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))

edited Dec 17 '21 at 16:35

answered Dec 17 '21 at 15:24

Adam Schroeder

748
2
9
23

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

1 Answers1

Linked