# Dashboard on click

**URL:** <https://community.plotly.com/t/dashboard-on-click/71851>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [January 23, 2023, 3:18pm UTC](https://community.plotly.com/t/dashboard-on-click/71851 "2023-01-23T15:18:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bietongdashkhong](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bietongdashkhong/32/22460_2.png) [@bietongdashkhong](https://community.plotly.com/u/bietongdashkhong)\
**Post date:** [January 23, 2023, 3:18pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/1 "2023-01-23T15:18:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 23, 2023, 3:33pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/2 "2023-01-23T15:33:50Z")

</div>

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. 🙂

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

---

<div class="post-metadata">

**Author:** ![bietongdashkhong](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bietongdashkhong/32/22460_2.png) [@bietongdashkhong](https://community.plotly.com/u/bietongdashkhong)\
**Post date:** [January 24, 2023, 4:09am UTC](https://community.plotly.com/t/dashboard-on-click/71851/3 "2023-01-24T04:09:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 24, 2023, 3:40pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/4 "2023-01-24T15:40:30Z")

</div>

Sure, here is a very basic example:

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

```

---

<div class="post-metadata">

**Author:** ![bietongdashkhong](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bietongdashkhong/32/22460_2.png) [@bietongdashkhong](https://community.plotly.com/u/bietongdashkhong)\
**Post date:** [January 24, 2023, 4:26pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/5 "2023-01-24T16:26:25Z")

</div>

Thank you so much you’re a lifesaver 🥳 🥳

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 24, 2023, 4:28pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/6 "2023-01-24T16:28:00Z")

</div>

Also, if you want to take a look here:

> [@Dashboard-Helper](https://community.plotly.com/t/dashboard-helper/70647):
>
> Hello All, I have been working quite a bit on something that I think will benefit us all. I call it the Dashboard-Helper: With it, you can explore your own uploaded datasets and build charts to further utilize Plotly’s really cool graphing options. Or, explore Plotly’s example datasets or realtime stock data powered by Yfinance. With this, you also have to ability to create your custom dashboard from your data set, being able to move, resize, edit the chart, and delete graphs if …

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

---

<div class="post-metadata">

**Author:** ![nikok](https://avatars.discourse-cdn.com/v4/letter/n/ec9cab/32.png) [@nikok](https://community.plotly.com/u/nikok)\
**Post date:** [January 24, 2023, 5:27pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/7 "2023-01-24T17:27:58Z")

</div>

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

```auto
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

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 24, 2023, 5:30pm UTC](https://community.plotly.com/t/dashboard-on-click/71851/8 "2023-01-24T17:30:27Z")

</div>

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 `Div`s for each layer. I really like using functions for building as it gives you a lot of freedom and control. 🙂