CODEWITHSUNDEEP
pythonimageplotlyplotly-dash
JulesGD
JulesGD

Reputation: 13

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

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

Capture - 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

Capture - icon image on Plotly

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

Upvotes: 1

Views: 2270

Answers (1)

vestland
vestland

Reputation: 61104

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

Plot

enter image description here

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()

Upvotes: 3

Related Questions