How to add a background image to a dashboard - plotly

Dash Python
1

I wish to add a background image to my dash, and I also want to add a figure (go.Scatter) to describe the features or observations of the image, so to make the two layers overlapped, I coded with plotly but it doesn’t work well. I am not sure whether I should add the image fig in the traces part or html part or in the layout part, The background image doesn’t come out at all. Can someone help please? here is the code:

import plotly.express as px
import plotly.graph_objects as go
from skimage import io
import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output


df = pd.read_csv('sitedata.csv')
img = io.imread('assets/example.png')
fig = px.imshow(img)

app = dash.Dash(__name__)
server = app.server


app.layout = html.Div([
    # html.Img(src='assets/example.png'),
    dcc.Graph(id='sitemap'),
    dcc.Slider(
        id='dateslider',
        min=df['Number'].min(),
        max=df['Number'].max(),
        value=df['Number'].min(),
        marks={str(num): str(num) for num in df['Number'].unique()},
        step=None
    )
])

@app.callback(
    Output('sitemap', 'figure'),
    [Input('dateslider', 'value')]
)

def update_figure(selected_num):
    filtered_df = df[df['Number'] == selected_num]
    traces = []
    for i in filtered_df['Location'].unique():
        df_location = filtered_df[filtered_df['Location'] == i]
        traces.append(fig)
        traces.append(dict(
            x=df_location['Lat'],
            y=df_location['Lon'],
            text=df_location['Location'],
            mode='markers',
            marker={
                'size': df_location['Result'],
            },
            name=i,
            )
        ),


    return {
        'data': traces,
        'layout': dict(

            xaxis={'type': 'log', 'title': 'Test Sample'},
            yaxis={'title': " "}
        )
    }


if __name__ == '__main__':
    app.run_server(debug=True)
2

Hi @evileyelive, px.imshow returns a Figure object (with both data and layout), you cannot append a figure to traces (you should do traces.append(fig.data) instead). That said, if you want your image just as a background image, you can add it as a layout image as in this example, this would probably be easier.

1 Like
3

Hi @Emmanuelle, thanks for replying. I used your 2nd way, which is the example, and it solved my issue. Thanks a lot.