Slider figure problem

📊 Plotly Python
1

Hi.
I have a figure with a slider that shows “squashed” to vertical lines on the y axis.
Also, the legend moves around strangely.
Would love to have some idea how to solve this.
Any help will be great.

2

2022-02-22T22:00:00Z

Hi.
I have a figure with a slider that shows “squashed” to vertical lines on the y axis.
Also, the legend moves around strangely.
Would love to have some idea how to solve this.
Any help will be great.
(Been cracking my head for a few days… :frowning: )

This is how it should appear (seaborn)

SPL
SPL888×499 31.1 KB

This is how it does (go.plotly):

spl_plotly
spl_plotly1254×703 10.7 KB

The code:

x_ax = pd.Series(range(10,100,10))
x_ax = x_ax.append(pd.Series(range(100,1000,100)))
x_ax = x_ax.append(pd.Series(range(1000,11000,1000)))
#x_ax

OASPL = 140

fig = go.Figure()

#figure/layout

def go_figure(OASPL_loc):

y_ticks = pd.Series(range(OASPL-50,OASPL+10,10))
y_ticks_str = y_ticks.apply(lambda x: str(x))

fig1 = go.Scatter(
    visible=False,
    line=dict(color="red", width=6),
    x = df.Third_octave_center_frequency_Hz,
    y = df.Upper_tolerance_limit_dB + OASPL_loc,
    name="Upper tolerance limit dB = " + str(OASPL_loc),
    line_shape='hv',
    mode = 'lines+markers'
)

fig2 = go.Scatter(
    visible=False,
    line=dict(color="green", width=6),
    x = df.Third_octave_center_frequency_Hz,
    y = df.Nominal_level_dB + OASPL,
    name="Nominal level dB = " + str(OASPL_loc),
    line_shape='hv',
    mode = 'lines+markers'
)

fig3 = go.Scatter(
    visible=False,
    line=dict(color="blue", width=6),
    x = df.Third_octave_center_frequency_Hz,
    y = df.Lower_tolerance_limit_dB + OASPL,
    name="Lower tolerance limit dB = " + str(OASPL_loc),
    line_shape='hv', 
    mode = 'lines+markers'
)

#add LB point to include in range
figLB = go.Scatter(
    visible=False,
    line=dict(color="white", width=1),
    x = [10],
    y = [OASPL-50],
    name="",
    #line_shape='hv', 
    mode = 'markers'
)

#add RT point to include in range
figRT = go.Scatter(
    visible=False,
    line=dict(color="white", width=1),
    x = [10000],
    y = [OASPL+10],
    name="",
    #line_shape='hv', 
    mode = 'markers'
)

fig.add_trace(fig1)
fig.add_trace(fig2)
fig.add_trace(fig3)   
fig.add_trace(figLB)   
fig.add_trace(figRT)   

fig.update_layout(          #barmode = 'stack',
    height = 600,
    width = 1000,
    xaxis_title='Frequency [Hz]',
    yaxis_title='1/3 octave SPL relative to OASPL',
    xaxis = dict(
        tickmode = 'array',
        tickvals = [10, 100, 1000, 10000],
        ticktext = ['10', '100', '1000', '10000'],
        range=[10, 10000],
        showgrid=True,
        gridcolor = 'grey',
        gridwidth = 2,
        fixedrange=True),
    yaxis = dict(
        tickmode = 'array',
        tickvals = y_ticks.to_list(),
        ticktext = y_ticks_str.to_list(),
        range=[OASPL-50, OASPL],
        showgrid=True,
        gridcolor = 'grey',
        gridwidth = 2,
        fixedrange=True))

fig.update_xaxes(type="log", matches='x')

#Traces
for OASPL_range in np.arange(OASPL-50, OASPL, 1): #loop on all OASPL range from 100 to 165
go_figure(OASPL_range)

steps = [x]
for OASPL_range in np.arange(OASPL-50, OASPL+1, 1): #loop on all OASPL range
    slid_titl = f"OASPL = {OASPL} dB"
    step = dict(
        method="update",
        args=[{"visible": [False] * len(np.arange(OASPL-50, OASPL+1, 1))},  #define as non visible for all steps
              {"title": slid_titl}],  # layout attribute
    )
    step["args"][0]["visible"][OASPL_range-OASPL+50] = True  # Toggle i'th trace to "visible"
    steps.append(step)             #Add the step to the steps list

#slider

steps =

for OASPL_range in np.arange(OASPL-50, OASPL+1, 1): #loop on all OASPL range
slid_titl = f"OASPL = {OASPL_range} dB"
step = dict(
method=“update”,
args=[{“visible”: [False] * len(np.arange(OASPL-50, OASPL+1, 1))}, #define as non visible for all steps
{“title”: slid_titl}], # layout attribute
)
step[“args”][0][“visible”][OASPL_range-OASPL+50] = True # Toggle i’th trace to “visible”
steps.append(step) #Add the step to the steps list

sliders = [dict(
#active=10,
currentvalue={“prefix”: "OASPL: ", “suffix”: “dB”},
pad={“t”: 50, “b”: 50},
steps=steps
)]

fig99 = fig.update_layout(sliders=sliders) #barmode = ‘stack’,

fig.data[0].visible = True

fig.show()

Data (df):

Third_octave_center_frequency_Hz Upper_tolerance_limit_dB Nominal_level_dB Lower_tolerance_limit_dB
50 -19 -29 -39
63 -15 -25 -35
80 -15 -21 -27
100 -11 -17 -23
125 -9 -13 -17
160 -8 -12 -16
200 -7 -11 -15
315 -7 -11 -15
400 -7 -11 -15
500 -7 -11 -15
630 -7 -11 -15
800 -7 -11 -15
1000 -7 -11 -15
1250 -7 -11 -15
1600 -8.5 -12.5 -16.5
2000 -10 -14 -18
2500 -9.5 -15.5 -21.5
3150 -11 -17 -23
4000 -12.5 -18.5 -24.5
5000 -16.5 -22.5 -28.5
6300 -16.5 -26.5 -36.5
8000 -20.5 -30.5 -40.5
10000 -24.5 -34.5 -44.5
3

Hi
Managed to fix to squash issue.
You need to place a log on the x-axis range when plotting a logarithmic scale.
Still, the figure does not update with the slider.
Come on guys… A little help please?..

new code:

#Define y axis:

y_ticks = pd.Series(range(OASPL-60,OASPL+20,10))
y_ticks_str = y_ticks.apply(lambda x: str(x))

#Initialize figure data

num_steps = 4 #number of figures minus 1 - because startes with 0)

fig_data = [ for i in np.arange(0, num_steps+1, 1)]
n_slides=51 # No. of different slider steps

for OASPL_range in np.arange(OASPL-50, OASPL+1, 1): #loop on all OASPL range from 100 to 165
fig0 = go.Scatter(
visible=False,
line = dict(color=“red”, width=6),
x = df.Third_octave_center_frequency_Hz,
y = df.Upper_tolerance_limit_dB + OASPL,
#name="Upper tolerance limit dB = " + str(OASPL_range),
line_shape=‘hv’,
mode = ‘lines+markers’)

if OASPL_range == OASPL-50: #set first figure instance to visible
    fig0['visible'] = True

fig_data[0].append(fig0)


fig1 = go.Scatter(
    visible=False,
    line=dict(color="green", width=6),
    x = df.Third_octave_center_frequency_Hz,
    y = df.Nominal_level_dB + OASPL,
    #name="Nominal level dB = " + str(OASPL_range),
    line_shape='hv',
    mode = 'lines+markers')

if OASPL_range == OASPL-50: #set first figure instance to visible
    fig1['visible'] = True

fig_data[1].append(fig1)


fig2 = go.Scatter(
    visible=False,
    line=dict(color="blue", width=6),
    x = df.Third_octave_center_frequency_Hz,
    y = df.Lower_tolerance_limit_dB + OASPL,
    #name="Lower tolerance limit dB = " + str(OASPL_range),
    line_shape='hv', 
    mode = 'lines+markers')

if OASPL_range == OASPL-50: #set first figure instance to visible
    fig2['visible'] = True

fig_data[2].append(fig2)


#add LB point to include in range
figLB = go.Scatter(
    visible=False,
    line=dict(color="white", width=1),
    x = [10],
    y = [OASPL-51],
    name="",
    #line_shape='hv', 
    mode = 'markers')

if OASPL_range == OASPL-50: #set first figure instance to visible
    figLB['visible'] = True

fig_data[3].append(figLB)

#add RT point to include in range
figRT = go.Scatter(
    visible=False,
    line=dict(color="white", width=1),
    x = [10000],
    y = [OASPL+11],
    name="",
    #line_shape='hv', 
    mode = 'markers')

if OASPL_range == OASPL-50: #set first figure instance to visible
    figRT['visible'] = True

fig_data[4].append(figRT)

fig = go.Figure(data = fig_data[0] +
fig_data[1] +
fig_data[2] +
fig_data[3] +
fig_data[4])

steps = #initialize steps

for i in np.arange(0,n_slides, 1):
# Hide all traces
step = dict(
method = ‘restyle’,
args = [‘visible’, [False] * len(fig.data)],
label = f’{OASPL -50 + i}’ ############################
)
# Enable the traces we want to see

for j in np.arange(0, num_steps+1, 1):
    k=i+j*n_slides
    step['args'][1][k] = True
    #print(i,j,k) #check numbers
steps.append(step) # Add step to step list

#Add slider to figure:
sliders = [dict(
active=0,
currentvalue={“prefix”: "OASPL: ", “suffix”: “dB”},
pad={“t”: 50, “b”: 50},
steps = steps
)]

#define layout

#fig.layout.sliders = sliders
fig99 = fig.update_xaxes(type=“log”, matches=‘x’)
fig100 = fig.update_layout( #barmode = ‘stack’,
height = 600,
width = 1000,
xaxis_title=‘Frequency [Hz]’,
yaxis_title=‘1/3 octave SPL relative to OASPL’,
xaxis = dict(
tickmode = ‘array’,
tickvals = x_ax.to_list(),
ticktext = pd.Series(x_ax.to_list()).apply(lambda x: str(x)).to_list(),
range=np.log10([9, 11000]), #If the axis type is “log”, then you must take the log of your desired range
showgrid=True,
gridcolor = ‘grey’,
gridwidth = 2,
fixedrange=True),
yaxis = dict(
tickmode = ‘array’,
tickvals = y_ticks.to_list(),
ticktext = y_ticks_str.to_list(),
range=[OASPL-51, OASPL+1],
showgrid=True,
gridcolor = ‘grey’,
gridwidth = 2,
fixedrange=True),
sliders=sliders)

fig.show()

spl_plotly2
spl_plotly21390×677 28.5 KB

4

This code is just fine.
The error was in the data base. :smiling_face:
So now it works