CODEWITHSUNDEEP
pythonfilterdropdownbokeh
Guilherme
Guilherme

Reputation: 11

Adding a dropdown menu to select filter bokeh

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

Upvotes: 1

Views: 783

Answers (1)

Jack P.
Jack P.

Reputation: 136

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.

Upvotes: 1

Related Questions