Good morning my beloved companions at plotly dash community:
I am currently working on a comprehensive dashboard for statistics on Saudi Arabia, I would like to draw a map of Saudi Arabia to study population growth trends as well as I want to add an interactivity to this map in a such way that whenever I drag a city from that map into a graph it instantly draws a plot line chart , bar chart and so on based on a drop down menu any way I have seen this in your dash gallery concerning a dashboard called US poison induced death I do wonder how can I achieve this effect on my project by just dragging any state in Saudi Arabia to get a graph drawn instantly?
Please help me with your suggestions and ideas
With best regard @adamschroeder
BAHAGEEL
Hi @Bahageel88 ,
you could plot the cities as markers and on marker click (instead of drag&drop) display the information you want. I did this here:
2 Likes
Ok thank you brother for your suggestion I will have a look at it
but If you could just help me with the drag and drop effect cos I want the same effect on the attached dashboard picture
With best regards
This is not a built in feature of plotly. You would need to create it yourself via javascript.
What are you refering to with this?
1 Like
I will figure out how to do it with pure Python
With best regards
1 Like
hi @Bahageel88 the drag and drop feature is not an easy thing to accomplish inside a Dash app with just Python. Is that a really important feature for you? Or can you do it with the dropdown? maybe you do it so when a user clicks on a city in the bar chart or line chart, it updates the map. Or the opposite way around…
Hi Adam
Exactly I want to click on the area on the map and consequently the line chart gets updated can I accomplish this one ? Cos I found someone who made it with pure Python I will you the repository Adam
Here is the repository where someone just did accomplish drag and drop with Python
https://github.com/plotly/dash-sample-apps/blob/main/apps/dash-opioid-epidemic/app.py
And the dashboard is available on dash gallery
Have a look at it and explain for me what he did
With best regards
2 Likes
Hello @Bahageel88,
That isnt drag and drop, that is selectedData. 
Just use the selectedData prop as an input. 
Hi @jinnyzorYes I confused the term however I want to accomplish the same effect with slight modifications
Would you please elaborate on how he built the call back in this situation using selectedData prop as input?
With best regards
Here is how the interaction works for the callback:
@app.callback(
Output("selected-data", "figure"),
[
Input("county-choropleth", "selectedData"),
Input("chart-dropdown", "value"),
Input("years-slider", "value"),
],
)
def display_selected_data(selectedData, chart_dropdown, year):
if selectedData is None:
Using an input mechanism similar to that will get you to show the selected data’s information.
Obviously the call back has three inputs simultaneously, selectedData ,the drop down and the year slider this is precisely what I want to achieve
Final question though
How does the selectedData as input work ? Because I understand slider and drop down are dcc components but what about selectedData?
With kind regards
Here, check out here:
Thank you very much indeed
This is really astonishing
I will check it out
Thank you again my beloved teachers
With best regards
1 Like
In the past I used below code to return new chart when click on map. Hope this help:
@callback(Output('div_1', 'children'),
[Input('map_1', 'clickData'),
Input('store_data', 'data'),
Input(ThemeChangerAIO.ids.radio("theme"), "value")])
def update_bar_chart(clickdata,store_data,theme):
if clickdata:
points = clickdata['points'][0]['location']
dff_z = dff[dff['county_fips'] == points]
dff_z_1 = dff_z.pivot_table(values='sale_dollars',
index=['store_name'],
aggfunc=np.sum).reset_index()
dff_z_1 = dff_z_1.sort_values(['sale_dollars'], ascending=[False]).head(30)
fig = px.bar(dff_z_1,x='sale_dollars',y='store_name',orientation='h')
fig.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
marker_line_color='rgba(50, 171, 96, 1.0)',
marker_line_width=0.5)
fig.update_layout(template=template_from_url(theme), margin=dict(l=0, r=0, t=0, b=0),yaxis_title=None, xaxis_title=None)
dff_z_2 = dff_z.pivot_table(values='sale_dollars',
index=['category_name'],
aggfunc=np.sum).reset_index()
dff_z_2 = dff_z_2.sort_values(['sale_dollars'], ascending=[False]).head(30)
fig_2 = px.bar(dff_z_2, x='sale_dollars', y='category_name',orientation='h')
fig_2.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
marker_line_color='rgba(50, 171, 96, 1.0)',
marker_line_width=0.5)
fig_2.update_layout(template=template_from_url(theme),
margin=dict(l=0, r=0, t=0, b=0),
yaxis_title=None,
xaxis_title=None)
dff_z_3 = dff_z.pivot_table(values='sale_dollars',
index=['item_description'],
aggfunc=np.sum).reset_index()
dff_z_3 = dff_z_3 .sort_values(['sale_dollars'], ascending=[False]).head(30)
fig_3 = px.bar(dff_z_3, x='sale_dollars', y='item_description',orientation='h')
fig_3.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
marker_line_color='rgba(50, 171, 96, 1.0)',
marker_line_width=0.5)
fig_3.update_layout(template=template_from_url(theme),
margin=dict(l=0, r=0, t=0, b=0),
yaxis_title=None,
xaxis_title=None)
return html.Div(dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
dbc.Row([
dbc.Col([
html.Span(f'1. Top sold store by each county'),
dcc.Loading(children=[dcc.Graph(figure=fig,
id='bar_1',
style={'height': 350})],
color='rgba(50, 171, 96, 0.6)', type='dot')
], width={'size': 4}),
dbc.Col([
html.Span(f'2. Top sold category by each county'),
dcc.Loading(children=[dcc.Graph(figure=fig_2,
id='bar_2',
style={'height': 350})],
color='rgba(50, 171, 96, 0.6)', type='dot')
], width={'size': 4}),
dbc.Col([
html.Span(f'3. Top sold items by each county'),
dcc.Loading(children=[dcc.Graph(figure=fig_3,
id='bar_3',
style={'height': 350})],
color='rgba(50, 171, 96, 0.6)', type='dot')
], width={'size': 4})
]),
])
])
], xs=12),
], className='p-2 align-items-center')
)
You can see full code here, it’s quite messy but hope this help: GitHub - hoatranobita/multiple_page_app
1 Like
Good evening @hoatran
Really great I will have a look at it and discuss with you every aspect of this call back
Thank you very much indeed
With best regards
Good morning my beloved companions
Morning to you @hoatran
I wish your doing well my brother
I have a question for you with regard to click on the map to get chart up dated I do not have fips points I have locations codes I want to click on the map and get the other chart filtered to that location how can I achieve this ? Please help me
I have location codes like AFG for Afghanistan and so on I want to click on afghististan and get my chart updated accordingly
With best regards
1 Like
Hello @Bahageel88,
Sounds like you could use a choropleth instead.
How did you try?
As you see in my code, I make choropleth as below:
fig_7 = px.choropleth_mapbox(df9,
locations=df9["county_fips"],
geojson=counties,
featureidkey="properties.geoid",
color=df9['sale_dollars'],
hover_name="county",
range_color=(0, df9['sale_dollars'].iloc[0]),
zoom=5,
center={"lat": 42.01604, "lon": -92.91157},
color_continuous_scale="Viridis")
And with clickData I tried to return county_fips and then use it to filter my data. So I think if you want to use location codes, you should make choropleth with locations as location code and then use it to filter your data. Something as below:
if clickdata:
points = clickdata['points'][0]['location']
dff_z = dff[dff['county_fips'] == points]
1 Like
Hi @jinnyzor
Yes I have gone through them What I want now is to use the locations on the map to update a line chart very much like the selectedData example but I wonder how to accomplish it?
Good morning @hoatran
Ok I will try using this approach, I have location codes and I successfully plotted the cholorpleth map now I want to click on every country and get the neighboring chart updated Do I need geojson?
Any way
Thanks very much indeed
With best regards