Adding a dropdown menu to select filter bokeh

Question

I am new coding in python and bokeh. I have a .csv file with a column who has two kinds of factors (A and B). I can plot a chart with the values of A or B, but I would like to put a dropdown menu where I can select the factor (A or B) and update de plot.

Until now I have:

import numpy as np
import pandas as pd
from bokeh.plotting import figure
from bokeh.charts import output_file, show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Select
from bokeh.models.widgets import Div

df = pd.read_csv('/Users/Guilherme/Documents/Graficos/meusdados_3.csv', sep=';')

months = ['2017', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dez']
months2 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dez']

p1 = figure (x_range=meses, plot_height = 400, plot_width = 1100, title = "Plot")

p1.vbar(x=months, top=df[df.type=='b']['month'], width=0.9) #bar chart
p1.square(x=months2, y=df[df.type=='b']['summ'], line_width=2, color='orange') #square points
p1.line(x=months2, y=df[df.type=='b']['summ'], line_width=2, color='orange') #line between points
p1.line(x=months2, y=df[df.type=='b']['limit'],line_width=2, color='red', line_dash = "dotted") #limit line

#Title
title = Div(text='<h1 style="text-align: center">Dashboard</h1>', width=1100, height=100)

show(column(title, p1))

CSV print

mosc9575 · Accepted Answer · 2022-09-15 10:16:19Z

In order to have a drop-down menu for data filtering, you need Select and ColumnDataSource you imported:

# Define your select options and default value
data_source = Select(title='data source', options=['A', 'B'], value='A')

# Create Column Data Source that will be used by the plot
source = ColumnDataSource(data=dict(month=[], summ=[], limit=[]))

You have to give as input to your plots the source you defined:

p1 = figure (x_range=meses, plot_height = 400, plot_width = 1100, title = "Plot")

p1.vbar(x=months, top="month", source=source width=0.9) #bar chart
p1.square(x=months2, y="summ", source=source, line_width=2, color='orange') #square points
p1.line(x=months2, y="summ", source=source, line_width=2, color='orange') #line between points
p1.line(x=months2, y="limit", source=source, line_width=2, color='red', line_dash = "dotted") #limit line

Based on data_source.value, you are able to update source and thus your plot:

def update():
    # Select your data
    df_plot = df[df.type==data_source.value]
    
    # Update source dict
    source.data = dict(
        month=df_plot['month'],
        summ=df_plot['summ'],
        limit=df_plot['limit'])

# Update depending on controls
controls = [data_source]

for control in controls:
    control.on_change('value', lambda attr, old, new: update())

inputs = column(*controls, width=320)

# Option Description
desc = Div(text="SELECT OPTIONS", sizing_mode="stretch_width")

l = column(desc, row(inputs, p1), sizing_mode="scale_both")

update()  # initial load of the data

curdoc().add_root(l)
curdoc().title = "MY PLOT"

This answer is based on the examples given in Bokeh documentation, especially the movies scatter plot interactive example/movies scatter plot code . Next time please provide us with the data set as CSV file.

Collectives™ on Stack Overflow

Adding a dropdown menu to select filter bokeh

Until now I have:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Until now I have:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related