Change Plotting Field Color On Dropdown Callback

Hi Bokeh Community,

Trying to create a dropdown widget with values to control the color plotting metric. My larger case is having a map with polygons and various metrics to choose from for the coloring, so my sample case here is a somewhat simpler version with 2 polygon squares and coloring values (albeit kinda wonky - open to suggestions). I’m trying to do this as a standalone with JS, not bokeh server.

I’m trying to have a widget pass in the metric choice (cb_obj.value) through to the patches.fill_color position. Console logs show that the values are being passed correctly but don’t update properly.

from bokeh.models.widgets import Dropdown

from bokeh.io import show

from bokeh.layouts import Column, Row, Plot

from bokeh.models import ColumnDataSource, Patches, HoverTool, CustomJS, DataRange1d, LogColorMapper

from bokeh.palettes import YlGn as palette #YlGn RdYlGn

palette = palette[9]

palette.reverse()

color_mapper = LogColorMapper(palette=palette)

data = dict(x=[[1,2,2,1,1], [2,3,3,2,2]], 

            y=[[1,1,2,2,1], [2,2,3,3,2]], 

            z=[[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]], 

            foo=[[10, 9, 8, 7, 6], [5, 4, 3, 2, 1]]) 

xdr = DataRange1d()

ydr = DataRange1d()

p = Plot(title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,

    h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

patched = Patches(xs = 'x', ys = 'y', fill_color = {"field":"z", "transform":color_mapper}, fill_alpha=0.8, line_color = "white", line_width = 0.7)

p.add_glyph(ColumnDataSource(data), patched)

dropdown = Dropdown(label="Metric Selection For Color", menu=[("z", "z"), ("foo", "foo")])

callback_d = CustomJS(args=dict(patched=patched), code="""

    var fill = patched.fill_color['field'];    

    console.log("patched.fill_color")

    const value = cb_obj.value;

    fill = value;

    source.change.emit();

    """)

dropdown.js_on_change("value", callback_d)

show(Column(dropdown, p))

Did you find out how to solve this? I am trying to do the same in Python.

@Pablo this is a very old post, imported from the mailing list before the Discourse, you will have more chance of getting help if you make a new post with full details specific to your challenge. Most especially, a Minimal Reproducible Example will help others help you.

Thanks! Done:

@Pablo Just FYI this issue has nothing to do with your question, it is to do with using a dropdown to update the colors on a plot, not to do with colors of the dropdown menu itself (another good reason to not resurrect very old threads, it’s easy to lose context).