Plotly: How to plot multiple images on a Plotly figure?

Question

My main objective is to display weather icons on a meteogram, using a Plotly graph from Dash. An example of this requirement is shown below:

Weather Icon Objective

For that, I tried to write the following code:

def graph_pictos(df: pd.DataFrame):
    
    k = 0
    
    fig = go.Figure()

    file_path = 'pictos_png/'
       
    for row in df.itertuples():
        
        picto_number = str(round(row.pictonumber_3h))        
        image_filename = ''.join((file_path, picto_number,'_big.png'))
        picto_image = base64.b64encode(open(image_filename, 'rb').read())
   
        
        fig.add_layout_image(
            go.layout.Image(
                source = 'data:image/png;base64,{}'.format(picto_image.decode()),
                xref = "x",
                yref = "y",
                x = k,
                y = 1,
                sizex = 0.5,
                sizey = 0.5,
                xanchor="center",
                yanchor="middle"
            )
        )
        k+=1
        
   
        
        return fig

I use a folder of icon images ('pictos_png') where each image name correspond to a weather code. Then, a dataframe df is passed to the function where each row correspond to a weather code for the timestamp considered. However, this function seems to only display one weather icon corresponding to the last icon code in the dataframe df, as it can be seen here:

Icon Image on Plotly

Anyone have any idea why this doesn't work correctly?

Thank you for your answer! The method you suggest works well for the purpose I had. — JulesGD
– JulesGD, Commented Jul 21, 2021 at 6:24

vestland · Accepted Answer · 2021-07-15 22:27:33Z

3

The code you've provided isn't easily reproducible. The following setup should be pretty close to what you're looking for though:

Plot

Code

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

data = {'category': ['A', 'B', 'C', 'D'],
        'x': [4,8,12,16],
        'y':[1,1,1,1],
        'image':["https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
                 "https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png"],
        'intervals':[[4, 6], [8, 10], [12, 14], [16, 18]]
       }
df = pd.DataFrame(data)

# Create figure
fig = go.Figure()

for i, x in enumerate(df['x']):

    fig.add_layout_image(
            dict(
                source=df['image'].iloc[i],
                xref="x",
                yref="y",
                x=x,
                y=df['y'].iloc[i],
                sizex=2,
                sizey=2,
                sizing="stretch",
                opacity=0.5,
                layer="below")
    )
fig.update_layout(xaxis_range=[0, 20], yaxis_range=[-2,4])

fig.show()

answered Jul 15, 2021 at 22:27

vestland

62.1k41 gold badges220 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr.J Over a year ago

Hi! What if I want to add an image title along with the image while plotting?

Collectives™ on Stack Overflow

Plotly: How to plot multiple images on a Plotly figure?

Weather Icon Objective

Icon Image on Plotly

1 Answer 1

Plot

Code

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Weather Icon Objective

Icon Image on Plotly

1 Answer 1

Plot

Code

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related