Formatting Graph

Dash Python
1

Hi there,

I’m trying to place the sensors in a image.

image
image.png1380×608 203 KB

As you can see it doesn’t appear right!

I did format my graph to be 550 x 175 and I got the coordinates of my points. For that I need the image to occupy 100% of graph area. SO I defined the follow layout:

image_filename = 'images/Terr1_Planta.PNG'
        imagem_terr1 = base64.b64encode(open(image_filename, 'rb').read())
        layout = go.Layout(
                height=580,
                hovermode="closest",
                xaxis=dict(range=[0,550], zeroline=False, visible= False),
                yaxis=dict(range=[0,175], zeroline=False, visible= False),
                title='Planta Terraceria 1',
                images= [dict(
                    source='data:image/png;base64,{}'.format(imagem_terr1.decode()),
                    xref="paper", yref="paper",
                    x=0, y=0,
                    sizex=1, sizey=1,
                    xanchor="left",
                    yanchor="bottom",
                    #sizing="stretch",
                    layer="below")],
                showlegend=True)

I thought that defining the sizex and size y as 1 that it would use the 100% of the Area… but it doesn’t.
Other question I have is there any way that I zoom in the graph and the image zooms as well?

Thanks you so much!

2

Sizing and positioning these images can definitely be tricky. Does the last example in https://plot.ly/python/images/ help you at all?

1 Like
3

Thank you @chriddyp
Indeed I changed my code a bit inspired in the last example and it works perfectly:
All markers in place:
image
and it zooms perfectly:
image

If someone has the same issue here is the changed code:

# Constants
img_width = 550
img_height = 175
scale_factor = 1

traces.append(go.Scatter(
            x = [0,img_width * scale_factor],
            y = [0,img_height * scale_factor],
            mode='markers',
            marker=dict(opacity=0)))

image_filename = 'images/Terr1_Planta.PNG'
        imagem_terr1 = base64.b64encode(open(image_filename, 'rb').read())
        layout = go.Layout(
                height=580,
                hovermode="closest",
                xaxis=dict(range=[0, img_width * scale_factor], zeroline=False, visible= False),
                yaxis=dict(range=[0, img_height * scale_factor], zeroline=False, visible= False,
                            # the scaleanchor attribute ensures that the aspect ratio stays constant
                            scaleanchor="x"),
                title='Planta Terraceria 1',
                images= [dict(
                    x=0,
                    sizex= img_width * scale_factor,
                    y= img_height * scale_factor,
                    sizey= img_height * scale_factor,
                    xref="x",
                    yref="y",
                    layer="below",
                    sizing="stretch",
                    source='data:image/png;base64,{}'.format(imagem_terr1.decode()),
                    )],
                showlegend=True)
2 Likes