1

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

Kat
  • 15,669
  • 3
  • 18
  • 51
  • I think the drop-down annotations in the [references](https://plotly.com/python/dropdowns/#update-dropdown) will help you. – r-beginners Dec 31 '22 at 01:44
  • You can add annotations to your buttons. Since you're already using the method `update`, add the information in `args`. It will be similar to how shapes are added in [these Plotly examples.](https://plotly.com/python/dropdowns/) – Kat Dec 31 '22 at 20:30

0 Answers0