How to add a background image to a dashboard - plotly

@evileyelive wrote:

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)

Posts: 2

Participants: 2

Read full topic