How to make dropdown menu using plotly?
This recipe helps you make dropdown menu using plotly
Recipe Objective
How to make dropdown menu using plotly.
The Dropdown menu is nothing but a part of the menu button, in which it is been displayed on the screen all the time. Here every menu button is being associated with a menu widget and when we click on that button it can show the choices for that menu button. There are four methods possibly in plotly which are used to modify the charts or graphs by using this update menu method which is as follows:
Restyle It will modify the data or data attributes. Relayout It is used to modify the layout attributes. Update It will modify the data and layout attributes. animate used to start or pausing the animation.
Table of Contents
Step 1 - Import libraries
import plotly.graph_objects as go
import numpy as np
Step 2 - Creat random function
np.random.seed(52)
My_Random_xx = np.random.randint(2, 202, 200)
My_Random_yy = np.random.randint(2, 202, 200)
Step 3 - Add dropdown and Plot graph
My_plt = go.Figure(data=[go.Scatter(
x=My_Random_xx,
y=My_Random_yy,
mode='markers',)
])
My_plt.update_layout(
updatemenus=[
dict(
buttons=list([
dict(
args=["type", "scatter"],
label="Sactter graph",
method="restyle"
),
dict(
args=["type", "bar"],
label="Bar Chart",
method="restyle"
)
]),
direction="down",
),
]
)
My_plt.show()
So from the above figure:
The first "My_plt" is about assigning the values to particular variables like we have taken 2 randome variables in which there are random values. The "x" will consist of "My_random_xx" which are having random values and similarly for "y". After that we have created a Dropdown with the help of "Update_layout" in which we have updated the menus and specified the "buttons" as "Sactter graph" and "Bar chart". The Direction is about in which direction the dropdown should be.
What Users are saying..
Abhinav Agarwal
I come from Northwestern University, which is ranked 9th in the US. Although the high-quality academics at school taught me all the basics I needed, obtaining practical experience was a challenge.... Read More