The line graph with the dropdown button can select the data by different district to show.
However, I would like to add the text on the left-bottom corner of the plot to show the value (input_df5), and there is only one way that I tried that is work, which is fig.add_annotation.
Unfortunately, add_annotation() will show all texts on the screen instead of showing it by the selection on the button.
I would like to ask about how to show the text by the dropdown button that I selected?
The output of my code: (the black long line is the text that I would like to show)
This is the image of my output
My code:
def interactive_multi_plot_test(input_df, input_df2, input_df3, input_df4, input_df5, title, addAll = True):
fig = go.Figure()
for column in input_df.columns.to_list():
fig.add_trace(go.Scatter(x = input_df.index, y = input_df[column], line=dict(color='#0000ff')))
button_all = dict(label = 'Select Data: ',method = 'update',args = [{'visible': ~input_df.columns.isin(input_df.columns),'title': 'All','showlegend':False}])
for column in input_df2.columns.to_list():
fig.add_trace(go.Scatter(x = input_df2.index, y = input_df2[column], line=dict(color='red')))
button_all = dict(label = 'Select Data: ',method = 'update',args = [{'visible': ~input_df2.columns.isin(input_df2.columns),'title': 'All','showlegend':False}])
for column in input_df3.columns.to_list():
fig.add_trace(go.Scatter(x = input_df3.index, y = input_df3[column], line=dict(color='red')))
button_all = dict(label = 'Select Data: ',method = 'update',args = [{'visible': ~input_df3.columns.isin(input_df3.columns),'title': 'All','showlegend':False}])
for column in input_df4.columns.to_list():
fig.add_trace(go.Scatter(x = input_df4.index, y = input_df4[column], line=dict(color='green', dash='dash'), hoverinfo='none'))
button_all = dict(label = 'Select Data: ',method = 'update',args = [{'visible': ~input_df4.columns.isin(input_df4.columns),'title': 'All','showlegend':False}])
for column in input_df5.columns.to_list():
fig.add_annotation(text="Different between 2019 to 2022: " + str(input_df5[column][0]),
xref="paper", yref="paper",
x=1, y=0.2, showarrow=False)
# for column in input_df5.columns.to_list():
# fig.add_trace(go.Scatter(x = input_df3.index[2:5],y = input_df3[column],name=str(input_df5[column][0]),marker_color="#2457BD"))
# fig.add_vline(x = input_df[input_df[column] == max(input_df[column])].index[0], line_width=3, line_dash="dash", line_color="green")
fig.layout.plot_bgcolor = '#ffffff'
fig.layout.yaxis.gridcolor = '#000000'
fig.layout.xaxis.gridcolor = '#000000'
# Update remaining layout properties
fig.update_layout(
title_text=title,
height=600,
font = dict(color='#000', size=12)
)
fig.update_layout(
updatemenus=[go.layout.Updatemenu(
active = 0,
buttons = ([button_all] * addAll) + list(input_df.columns.map(lambda column: dict(label = column,
method = 'update',
args = [{'visible': input_df.columns.isin([column]),
'title': column,
'showlegend': False}]))))])
return(fig)
I expect the text(annotation) will follow my selection on the dropdown button.
I tired to create a short line on the graph and always show that one hovertext, but it seems not a good format for visualize the data, and I didn't completely test it yet