Creating a DrownDown Filter for px.timeline

[Dabi]

Hello, I would greatly appreciate any help. Yes I’ve read and search and I’ve hit a mental block. ive simplified my graph in hopes that a well define solution here can be then modified .

1. I import my data from an Excel File
   

2. i plot my px.timeline graph
   

   

3. Please help me Code a dropdown menu that filters the Dataframe by the Customers ( John, Cindy etc). I would like to have the ‘labels’ be loaded by a for loop so as my list increases this will populate automatically.

4. No I dont want to use the color = “Customer” to then generate a legend which i can then select from.

I am stuck trying to figure out using the dropdown menu “method”="update , and mainly the args???

I hope this is clear and would appreciate any help . Thanks in Advance
(

[farispriadi]

Hi @Dabi ,

Welcome to the forum!

If you are trying to use update dropdown like in the link

Dropdown

You need to create multiple Timeline Plot based on your customer.

It is really tricky because if you filtered the data frame it will break the layout of the bar.

So I try to create multiple Timeline Plot and put different color on different Customer.
The selected / active customer will be colored by blue.
The others will be colored by grey.

# create timeline for certain customer (blue) and others is grey
# which is it will create 4 timeline charts, because there is 4 customers
for idx, customer in enumerate(df.Customer.unique()):
	if idx==0:
		fig = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
		# make the color of bar grey for non active customer 
		colors = ['#636efa' if i else 'grey' for i in  df.Customer == customer]
		fig.update_traces(marker_color=colors)
	else:
		fig1 = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
		# make the color of bar grey for non active customer 
		colors = ['#636efa' if i else 'grey' for i in  df.Customer == customer]
		fig1.update_traces(marker_color=colors)
		fig.add_trace(fig1.data[0])

# create additional  timeline chart that display all customer (all color is blue)
fig1 = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
fig.add_trace(fig1.data[0])

By selecting the visible Timeline Plot when a certain Dropdown option is selected using code below.
It will show the Timeline Plot for selected Customer.

# create list of dropdown buttons
buttons = []
for idx,cust_menu in enumerate(menu_labels):
	button = dict(label=cust_menu,
                     method="update",
                     # visiblity of timeline chart based on active dropdown button.
                     args=[{"visible": [True if idx_vis== idx else False for idx_vis,vis in enumerate(visibility)]},
                           {"title": cust_menu,
                            "annotations": []}])
	buttons.append(button)

So for the complete code of the result is below.

import plotly.express as px 
import pandas as pd 

# read data from excel
df = pd.read_excel('/path/file.xlsx') 

# create timeline for certain customer (blue) and others is grey
# which is it will create 4 timeline charts, because there is 4 customers
for idx, customer in enumerate(df.Customer.unique()):
	if idx==0:
		fig = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
		# make the color of bar grey for non active customer 
		colors = ['#636efa' if i else 'grey' for i in  df.Customer == customer]
		fig.update_traces(marker_color=colors)
	else:
		fig1 = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
		# make the color of bar grey for non active customer 
		colors = ['#636efa' if i else 'grey' for i in  df.Customer == customer]
		fig1.update_traces(marker_color=colors)
		fig.add_trace(fig1.data[0])

# create additional  timeline chart that display all customer (all color is blue)
fig1 = px.timeline(df,x_start=df['Start'],x_end=df['End'],color="Task")
fig.add_trace(fig1.data[0])

# Menu labels that will be appear in dropdown
menu_labels = df.Customer.unique().tolist()+["All"]

# visibiliy of timeline
visibility = [False]*len(menu_labels)

# create list of dropdown buttons
buttons = []
for idx,cust_menu in enumerate(menu_labels):
	button = dict(label=cust_menu,
                     method="update",
                     # visiblity of timeline chart based on active dropdown button.
                     args=[{"visible": [True if idx_vis== idx else False for idx_vis,vis in enumerate(visibility)]},
                           {"title": cust_menu,
                            "annotations": []}])
	buttons.append(button)

# update figure layout
fig.update_layout(
	title = "All",
	xaxis=dict(showgrid=True),
	yaxis=dict(showgrid=False),
	showlegend=False,
	# update dropdown buttons to menu
    updatemenus=[
        dict(
            active=4,
            buttons=buttons,
        )
    ])

fig.show()

I hope this help.