python-3.xplotlyvisualizationflags

Using flags to incorporate a graphic in plotly - Flagpy in plotly not working


I am trying to make a graphic and put a flag next to it in each barchart. For that I am using flagpy and plotly. But it does not seem like it is working. This is as far as I have gotten. Could you help me ? Here you have a dummy code to it, with the countries as well.

import plotly.graph_objects as go
import pandas as pd
import flagpy as fp


# fp.get_flag_img function from flagpy

# Your DataFrame setup
df_date_top_n = pd.DataFrame({
    'CTR_DSC': ['Spain', 'Canada', 'Germany'],
    'PLT_NAM_DSC': ['Plant A', 'Plant B', 'Plant C'],
    'KPI_VAL': [100, 200, 150],
    'flag_emoji': ['🇪🇸', '🇨🇦', '🇩🇪']
})

# Sorting
df_date_top_n.sort_values('KPI_VAL', ascending=True, inplace=True)

# Create the plot
fig = go.Figure()

# Add bars
fig.add_trace(go.Bar(
    x=df_date_top_n['KPI_VAL'],
    y=df_date_top_n['PLT_NAM_DSC'],
    orientation='h',
    text=df_date_top_n['KPI_VAL'],
    textposition='auto',
    opacity=0.8,
))

# If you remove this you get the function
for i, row in df_date_top_n.iterrows():
    # Correctly using CTR_DSC to fetch flag images
    flag_url = fp.get_flag_img(row['CTR_DSC'])  
    fig.add_layout_image(
        dict(
            source=Image.open(flag_url),
            xref="x", yref="y",
            x=row['KPI_VAL'] - 5,  # Adjusting this value for better visibility
            y=row['PLT_NAM_DSC'],
            sizex=0.05, sizey=0.05,  # Adjust size as necessary
            xanchor="center", yanchor="middle",
            sizing="contain",
            opacity=0.8,
            layer="above"
        )
    )

# Customize layout
fig.update_layout(
    title='Top Plant Consumption',
    xaxis_title="MWH",
    yaxis_title="Factory Name",
)

# Show the figure
fig.show()

I want next to 200 the flag of the correspondent country in df_date_top_n['CTR_DSC'] Thank you for your time in advanced,

enter image description here

For more information, the function outputs this:

img = fp.get_flag_img('Germany')
img

enter image description here


Solution

  • This worked out for me source=PIL.Image.open(urllib.request.urlopen(row["flag_url"])), such that:

    import plotly.graph_objects as go
    import pandas as pd
    import matplotlib.pyplot as plt
    
    
        # Assuming fp.get_flag_img function exists and works with country names or codes to return a flag image URL
    
        # Your DataFrame setup
        df_date_top_n = pd.DataFrame({
            'CTR_DSC': ['Spain', 'Canada', 'Germany'],
            'PLT_NAM_DSC': ['Plant A', 'Plant B', 'Plant C'],
            'KPI_VAL': [100, 200, 150],
            'flag_emoji': ['🇪🇸', '🇨🇦', '🇩🇪']
        })
        # Assuming get_country_alpha_2_code is your function that returns a two-letter country code
        df_date_top_n['flag_url'] = df_date_top_n['CTR_DSC'].apply(lambda country_name: f"https://flagcdn.com/h20/{get_country_alpha_2_code(country_name).lower()}.png")
        print(df_date_top_n)
    
        # Sorting
        df_date_top_n.sort_values('KPI_VAL', ascending=True, inplace=True)
    
        # Create the plot
        fig = go.Figure()
    
        # Add bars
        fig.add_trace(go.Bar(
            x=df_date_top_n['KPI_VAL'],
            y=df_date_top_n['PLT_NAM_DSC'],
            orientation='h',
            text=df_date_top_n['KPI_VAL'],
            textposition='auto',
            opacity=0.8,
        ))
    
        # If you remove this you get the function
        for i, row in df_date_top_n.iterrows():
            # Correctly using CTR_DSC to fetch flag images
            
            fig.add_layout_image(
                dict(
                    source=PIL.Image.open(urllib.request.urlopen(row["flag_url"])),
                    xref="x", yref="y",
                    x=row['KPI_VAL'] - 5,  # Adjusting this value for better visibility
                    y=row['PLT_NAM_DSC'],
                    sizex=10, sizey=10,  # Adjust size as necessary
                    xanchor="center", yanchor="middle",
                    sizing="contain",
                    opacity=0.8,
                    layer="above"
                )
            )
    
        # Customize layout
        fig.update_layout(
            title='Top Plant Consumption',
            xaxis_title="MWH",
            yaxis_title="Factory Name",
        )
    
        # Show the figure
        fig.show()
    

    enter image description here. Now it is only adjusting.