3

I wish to add a background image to my dash, and I want to use a figure to describe the features or observations of the image, 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 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)
Alice jinx
  • 585
  • 3
  • 15
  • 1
    Does this answer your question? [Add background image to html.div in Dash-plotly](https://stackoverflow.com/questions/51712433/add-background-image-to-html-div-in-dash-plotly) – rpanai Mar 31 '20 at 02:44
  • 1
    Thanks for replying, the image I wish to add is not for dash_html_components, instead of adding it into a figure. I wish my dcc.Graph and image can be overlapped. – Alice jinx Mar 31 '20 at 03:06

0 Answers0