Dashboard on click

Dash Python
1

How can I implement something like this.
So basically there’s a dropdown list of user id, and when i click on a user id, it will load the graphs of that user and display on the page. No query strings and redirecting to another route. Is this possible? I am integrating Dash with Flask

2

Hello @bietongdashkhong,

Welcome to the community!

Yes, this is possible, and actually something that I do at work. Same endpoint, different user, it loads that user’s dashboard. :slight_smile:

The key is to create a function that can update a div that holds the information in the page.

3

Thanks for the reply, but can you please elaborate on that? Sorry I am new to Dash/Plotly and it would be really really helpful if there is some short pseudocode of some sort that would be a bit easier for me to understand

4

Sure, here is a very basic example:

import dash
from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Dropdown(id='userSelect', options=[i for i in range(10)]),
        html.Div(id='testOutput')
    ]
)

def pullUserData(user):
    return [
        html.Div(f'user - {user}'),
        html.Div(f'first name - {user}'),
        html.Div(f'last name - {user}')
        ]

@app.callback(
    Output('testOutput','children'),
    Input('userSelect', 'value')
)
def setupUser(v):
    if v:
        return pullUserData(v)
    return dash.no_update

if __name__ == '__main__':
    app.run(debug=True)
2 Likes
5

Thank you so much you’re a lifesaver :partying_face: :partying_face:

1 Like
6

Also, if you want to take a look here:

With this, you can create customizable charts via functions that build.

1 Like
7

can the callback output also instantiate a new dash component? Say,.

def pullUserData(user):
    return [
        dcc.datatable(...)
        ]

@app.callback(
    Output('testOutput','children'),
    Input('userSelect', 'value')
)
def setupUser(v):
    if v:
        return pullUserData(v)
    return dash.no_update
8

Hello @nikok,

Welcome to the community!

Yes, it sure can! If you take a closer look at my example, you can see I was using Divs for each layer. I really like using functions for building as it gives you a lot of freedom and control. :slight_smile:

1 Like