Annotated Heatmap using ff

📊 Plotly Python
1

Hi all,
How can i create an annotated heatmap using figure factory without all z value combinations for x and y. Not all x and y combinations have a z value.

Regards

2

@Jason4,
Insert np.nan in the positions when you want to have gaps:

import plotly.figure_factory as ff
import numpy as np
z = np.array([[.1, np.nan, .5],
     [1.0, .8, .6],
     [.6, .4, np.nan]])

x = ['Team A', 'Team B', 'Team C']
y = ['Game Three', 'Game Two', 'Game One']

z_text = [['Win', ' ', 'Win'],
          ['Lose', 'Lose', 'Win'],
          ['Win', 'Win', '']]

fig = ff.create_annotated_heatmap(z, x=x, y=y, annotation_text=z_text, colorscale='Viridis')
fig.update_layout(width=600, height=600, xaxis_showgrid=False, yaxis_showgrid=False, template='none')

fig.show()
3

Hi @empet.

That would be great if this was just a static heatmap, but this is for a dynamic dashboard which changes as per my selection in my dashboard.It looks much easier for a 3 x 3 heatmap. What is the heatmap has say 7 x 7 and needs to be dynamically updated with selection.

4

Hi @Jason4,

If you want to have gaps in the unselected cells you have to update through code the corresponding cells with np.nan, respectively with ’ ’ for annotations. ff.create_annotated_heatmap cannot do this automatically.

See: https://github.com/plotly/plotly.py/blob/master/packages/python/plotly/plotly/figure_factory/_annotated_heatmap.py

5

Thanks for your help there @empet. Would you know if there is an update on how to add a local image as a background for plotly graph image? Is there a workaround?

6

@Jason4

I saved this code a time ago from a comment left here on forum https://community.plotly.com/t/using-local-image-as-background-image/4381/8

import base64
#set a local image as a background
image_filename = 'plotly-logo1.png'
plotly_logo = base64.b64encode(open(image_filename, 'rb').read())

layout = go.Layout(
                height=600, width=600,
                hovermode="closest",
                title='EXTC',
                images= [dict(
                    source='data:image/png;base64,{}'.format(plotly_logo.decode()),
                    xref="paper", yref="paper",
                    x=0.5, y=0.90,
                    sizex=0.95, sizey=0.95,
                    xanchor="center",
                    yanchor="middle",
                    #sizing="stretch",
                    layer="above")])
fig = go.Figure(layout=layout)
fig.show()
1 Like