[FIXED] Dash - presenting the values on bubble chart as the percentage of the highest value

Issue

As it says in the title - I have made a bubble chart which displays the filed time of a single football player in every game. The player is previously selected from the dropdown menu. My problem is to get the highest number from the [FieldTime] column and represent the values on the chart as the percentage of this value. I've tried calculating the highest value using pandas, but without success. It's my first project, and I'm a bit lost right now.

Graph code:

def build_graph(player):
    dff = activities[(activities['Name'] == player)]

    fig = px.scatter(dff,
                     x="Date",
                     y="Name",
                     color="FieldTime",
                     hover_name='Name', hover_data=['Position_Name','MD', 'Day_after_match','FieldTime'],
                     color_continuous_scale=px.colors.sequential.Bluered,
                     range_color= [min(activities['FieldTime']), max(activities['FieldTime'])]
                     )
    fig.update_traces(marker=dict(symbol="square"))
    fig.update_traces(marker=dict(size=9))
    fig.update_layout(yaxis={'title': 'Field Time'},
                      title={'text': 'Field Time chart',
                             'font': {'size': 28}, 'x': 0.5, 'xanchor': 'center'})

    return fig

Solution

If I got it correctly, you just need to add the following part:

# get the index of the max value in your column
max_val_idx=dff["FieldTime"].idxmax()
# Get the value so you can use to calculate
time_field_max_val=dff["FieldTime"][max_val_idx].copy()

#s Now you can use the max value to calculate what you want
dff["bubble_size"]=dff["the column you want"] / time_field_max_val 

After calculating the %, you can use the new column to set the size:

size="bubble_size"

And this line was commented as you were setting the size manually:

#     fig.update_traces(marker=dict(size=9))

Below is the full code:

def build_graph(player):
    dff = activities[(activities['Name'] == player)]
    
    # get the index of the max value in your column
    max_val_idx=dff["FieldTime"].idxmax()
    # Get the value so you can use to calculate
    time_field_max_val=dff["FieldTime"][max_val_idx].copy()
    
    #s Now you can use this val
    dff["bubble_size"]=dff["the column you want"] / time_field_max_val 
    
    fig = px.scatter(dff,
                     x="Date",
                     y="Name",
                     size="bubble_size",
                     color="FieldTime",
                     hover_name='Name', hover_data=['Position_Name','MD', 'Day_after_match','FieldTime'],
                     color_continuous_scale=px.colors.sequential.Bluered,
                     range_color= [min(activities['FieldTime']), max(activities['FieldTime'])]
                     )
    fig.update_traces(marker=dict(symbol="square"))
    fig.update_layout(yaxis={'title': 'Field Time'},
                      title={'text': 'Field Time chart',
                             'font': {'size': 28}, 'x': 0.5, 'xanchor': 'center'})

    return fig

I hope this can be helpful. If something is not clear, let me know, and if it solves your problem, don't hesitate in flagging it as the answer

Regards,
Leonardo

Answered By - Leonardo Ferreira