Callback in map

Dash Python
1

hello community, I am new to this, could you please guide me?

I am making a dashboard in which I have the coordinates when I click on one of the points I want to return a bar chart for example of how it has varied temporarily a variable at that point.
I make the callback of the figure that I want to represent, however I can not understand how this callback works.

@callback(
Output(component_id=‘my-graph’, component_property=‘figure’),
Input(component_id=‘map_plot1’, component_property=‘clickData’))

def update_graph(clickData):
city = clickData[‘points’][0][‘pointNumber’][0]
dff = df[df[‘Ciudad’] == city]
title = ‘{}
{}’.format(city)
fig = px.line(data_frame=dff, x=‘variablex’, y=‘variabley’, color=‘location’, title=f’{title}')
return fig

2

Hello @Adrian593_gis,

Looking at your callback, this looks like it should work.

Have you tried running the app in debug=True to see if it displays any errors?

3

Hello @jinnyzor

is the error I get when I click on some point:

TypeError: ‘int’ object is not subscriptable

4

pointNumber shouldn’t have a [0] behind it.

1 Like
5

how can I see the point numbers?.. this structure is not very clear to me

clickData[‘points’][0][‘pointNumber’][0]

any material to review?

6

Sure. Check here:

Or just print the raw clickData to get its structure.

7

thanks
thank you very much, I have checked but I have no success. could you guide me this is the code, I do not understand why I get the error.

import dash
import dash_html_components as html 
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, dcc, html, Output, Input, State, callback
import dash_core_components as dcc
import pandas as pd
import json                 

  app = dash.Dash()

 df = pd.read_csv(r'https://estrategis-ec.com/data_dash/data.csv', delimiter=';',encoding = 'ISO-8859-1')

 def fig_map(df):
fig= px.scatter_mapbox(df, lat="lat", lon="lon",
        height=600,width=900,
                    color="Empresas",size="Empresas",size_max=75,animation_frame = 'year', 
                    color_continuous_scale='viridis',
             mapbox_style="carto-positron",zoom=5.5,  hover_name="City",
                                      center = {"lat": -2, "lon": -79.01})

    return fig
   

    app.layout = html.Div([
         
            html.Div([
                dcc.Graph(id = 'map_plot1', figure = fig_map(df))],
                style = {'width':'75%','display':'inline-block'}),
               
          html.Div([ 
              dcc.Graph(figure={}, id='my-graph', 
                        style = {'width':'25%','display':'inline-block'})
                ]) ]) 

               ##calback
 @callback(
Output(component_id='my-graph', component_property='figure'),
Input(component_id='map_plot1', component_property='clickData'))   

def update_graph(clickData):
city = clickData['points'][0]['pointNumber'][0]
dff = df[df['City'] == city]
title = '<b>{}</b><br>{}'.format(city)
fig = px.line(dff, x='year', y='Empresas', title=f'{title}')
return fig

if __name__ == '__main__': 
    app.run_server(debug=True, use_reloader=False,port=8059)
8

Alright, here you are:

import dash
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, dcc, html, Output, Input, State, callback, dcc, html
import pandas as pd
import json

app = Dash()

 df = pd.read_csv(r'https://estrategis-ec.com/data_dash/data.csv', delimiter=';',encoding = 'ISO-8859-1')


def fig_map(df):


    fig = px.scatter_mapbox(df, lat="lat", lon="lon",
                            height=600, width=900,
                            color="Empresas", size="Empresas", size_max=75, animation_frame='year',
                            color_continuous_scale='viridis',
                            mapbox_style="carto-positron", zoom=5.5, hover_name="City",
                            center={"lat": -2, "lon": -79.01})

    return fig

app.layout = html.Div([

    html.Div([
        dcc.Graph(id='map_plot1', figure=fig_map(df))],
        style={'width': '75%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(figure={}, id='my-graph',
                  style={'width': '25%', 'display': 'inline-block'})
    ])])


##calback
@callback(
    Output(component_id='my-graph', component_property='figure'),
    Input(component_id='map_plot1', component_property='clickData'),
    State('map_plot1', 'figure'),
    prevent_initial_call=True
)
def update_graph(clickData, f):
    if clickData:
        i = clickData['points'][0]['pointNumber']
        city = f['data'][0]['hovertext'][i]
        dff = df[df['City'] == city]
        title = '<b>{}</b><br>'.format(city)
        fig = px.line(dff, x='year', y='Empresas', title=f'{title}')
        return fig
    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True, port=8059)

Now, the reason for the changes.

clickData pointNumber represents the data point that you wanted to extract, this is not a list, but an integer. This then needed to be related back to the figure’s data to pull the hovertext (city) from the data, using the point from the first step. This being because you wanted to relate it back to the city instead of using the lat,lon combo to find your city.

image
image702×654 39.2 KB

1 Like
9

Great, I am very grateful to you @jinnyzor
I have a lot to learn and this feedback and material is very useful.

1 Like