python plotly\dash - draw data with image in background

Question

In the plotly manual there is some example on this. However, there is no info on same issue while using the dash.

I've tried following this example and create my own example, I don't see the image

img = plt.imread('link1.png')

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    return fig2

Any suggestion what could be done so that I'll have an image and a scatter plot on same figure?

r-beginners · Accepted Answer · 2020-12-30 12:52:17Z

1

If you want to refer to a local in an image reference on Dash, you need to convert it to base64 format. The code I've provided will probably need to be adjusted in size and position to fit your graph. Officially, I referred to this.You may also find this question helpful.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import base64

# img = plt.imread('link1.png')
img = base64.b64encode(open('link1.png', 'rb').read())

app = dash.Dash(__name__)

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    fig2.add_layout_image(dict(source='data:image/png;base64,{}'.format(img.decode()),
                               xref="x", 
                               yref="y",
                               x=0,
                               y=3,
                               sizex=2,
                               sizey=2,
                               sizing="stretch",
                               opacity=0.5,
                               layer="below"))
    return fig2

 app.run_server(debug=True)

answered Dec 30, 2020 at 12:52

r-beginners

35.6k3 gold badges20 silver badges41 bronze badges

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

2 Comments

user1977050 Over a year ago

This was my initial solution, but it didn't worked as I wanted. Eventually found where I was wrong.

r-beginners Over a year ago

When referring to other questions, be sure to check with the person who asked the question. Please forgive my rudeness.

Collectives™ on Stack Overflow

python plotly\dash - draw data with image in background

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related