Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Two (Many) subplots, Two dropdown buttons

Hi everyone,

I am trying to have two columns each being controlled by its own dropdown list, I wan’t to be able to use each dropdown to show different heatmaps

For example:
Q1 and Q2

For example:
Q2 and Q8

So essentially it is a side-by-side comparison

So far I have this code, but it only gives I dropdown, and the positions for the plots are fixed, which means Q2 is allocated to 1,2, and can never be 1,1

import pandas as pd
import numpy as np
import time
import sys
import re
import plotly.graph_objects as go
from plotly.subplots import make_subplots

#Read CSV File
data=pd.read_csv("data.csv")
labels =["Q1","Q2","Q8"]

#fig = go.Figure()
#fig = make_subplots(2,2)
fig = make_subplots(
    rows=1, cols=2, 
)
fig.add_trace(go.Heatmap(
                     z=data['Z'],
                     x=data['X'],
                     y=data['Y'],
                     hovertemplate='Y: %{y}<br>'+'X: %{x}<br>'+'Counts: %{z}<br>',
                     colorscale="greens",
                     colorbar = dict(x=0.45),
                     visible=True,
                     ),
                     1,1)
fig.add_trace(go.Heatmap(
                     z=data['Z2'],
                     x=data['X2'],
                     y=data['Y2'],
                     hovertemplate='Y: %{y}<br>'+'X: %{x}<br>'+'Counts: %{z}<br>',
                     colorscale="blues",
                     visible=False,
                     ),
                     1,2)
fig.add_trace(go.Heatmap(
                     z=data['Z8'],
                     x=data['X8'],
                     y=data['Y8'],
                     hovertemplate='Y: %{y}<br>'+'X: %{x}<br>'+'Counts: %{z}<br>',
                     colorscale="oranges",
                     visible=False,
                     ),
                     1,2)



### Create buttons for drop down menu#Thanks to the work of https://stackoverflow.com/questions/50518090/python-plotly-multiple-dropdown-plots-each-of-which-have-subplots
buttons = []
for i, label in enumerate(labels):
    visibility = [i==j for j in range(len(labels))]
    button = dict(
                 label =  label,
                 method = 'update',
                 args = [{'visible': visibility},
                     {'title': label}])
    buttons.append(button)

updatemenus = list([
    dict(active=-1,
         x=-0.15,
         buttons=buttons
    )
])


fig.update_xaxes(
                title_text="X-title",
                row=1, col=1
)

fig.update_xaxes(
                title_text="X-title",
                row=1, col=2
)

fig.update_yaxes(
                title_text="Y-title",
                row=1, col=1
)

fig.update_yaxes(
                title_text="Y-title",
                row=1, col=2
)

fig['layout']['title'] = 'Title'
fig['layout']['showlegend'] = False
fig['layout']['updatemenus'] = updatemenus



fig.show()

with open('plot_heatmap.html', 'w') as f:
    f.write(fig.to_html(include_plotlyjs='cdn'))

sys.exit()

Any help would be appreciated.

Thanks in advance.